CSS selector for custom data-attribute?

Question

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

Answer 1

You'll want to use

[data-favorite="1"] {}

The difference being the quotes "" around the value.

Here's the working jsFiddle

Answer 2

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