CODEWITHSUNDEEP
htmlcsscss-selectors
user8758206
user8758206

Reputation: 2191

Selectors for divs with specific data attributes

I'm trying to use CSS to specifically select divs with specific data attributes. The data attribute I'm using is 'data-id' and selectors I've tried are:

div['data-id'*="2"]
div[data-id="2"]
div['data-id'="2"]

Nothing works. Can anyone help get the working selector using the 'data-id' attribute to make the 2nd div red? Thanks for any help here.

div['data-id'*="2"] {
  color: red;
}
div {
  color: blue;
}

/* also fails:
div[data-id="2"]
div['data-id'="2"]
*/
<div data-id='1'>one</div>
<div data-id='2'>two</div>
<div data-id='3'>three</div>

Upvotes: 0

Views: 41

Answers (1)

doğukan
doğukan

Reputation: 27381

Should be data-id="2" Yes, this is works.

div[data-id="2"] {
  color: red;
}
div {
  color: blue;
}

/* also fails:
div[data-id="2"]
div['data-id'="2"]
*/
<div data-id='1'>one</div>
<div data-id='2'>two</div>
<div data-id='3'>three</div>

Upvotes: 2

Related Questions