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