CODEWITHSUNDEEP
htmlcsscss-selectorscustom-data-attribute
Hugolpz
Hugolpz

Reputation: 18248

CSS selector for custom data-attribute?

Why my star is not appearing in YELLOW ? How to fix it ?

Here's the relevant code for the above issue.

HTML

<div class="tpl" data-favorite="1">
  <div>
    <span class="favorite">★</span>
    <span class="text">Italian Pizza: salmon, olives, onion, tomato, blue-cheese</span>
  </div>
</div>

CSS

[data-favorite=1] {
    background: #AAA;
    border-left: 3px solid green
}
.favorite {
    font-size: 2em;
    padding: 0 1 0 1em;
}
[data-favorite=1] .favorite {
    color:yellow;
}
[data-favorite=0] .favorite {
    color:#AAA;
}

Fiddle

Upvotes: 25

Views: 35703

Answers (2)

Mr. Alien
Mr. Alien

Reputation: 157314

You need to use " around the attribute value

[data-favorite="1"] {
   /* Styles goes here */
}

Demo

Why is that so?

CSS Specification - 6.3. Attribute selectors

Attribute values must be CSS identifiers[1] or strings. [CSS21] The case-sensitivity of attribute names and values in selectors depends on the document language.

Identifiers

[1] In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

So the issue is that the value of your attribute starts with a number, if you have something like this in your HTML (You already do)

<span data-favorite="0">Color Me red</span>


[data-favorite=0] { color: red;}

WONT WORK

Demo

But, if you have something like 

<span data-favorite="a0">Color Me red</span>

[data-favorite=a0] { color: red;}

WILL WORK (Even without quotes) because the value of your attribute starts with an alphabet [1].

Demo

Upvotes: 14

Brett DeWoody
Brett DeWoody

Reputation: 62753

You'll want to use

[data-favorite="1"] {}

The difference being the quotes "" around the value.

Here's the working jsFiddle

Upvotes: 44

Related Questions