Geek asks and answers

CSS selector for custom data attributes?

Why doesn't my star appear in YELLOW? How to fix it?

Here is the appropriate code for the indicated problem.

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

+3
source share
2 answers

Do you want to use

[data-favorite="1"] {}

The difference is in quotes around the value.

JsFiddle works here

+8
source

You need to use "around the attribute value

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

Demo

Why is this so?

The CSS specification is 6.3. Attribute selectors

CSS [1] strings. [CSS21] .

[1] CSS ( , ) [a-zA-Z0-9] ISO 10646 U + 00A0 , (-) (_); , . ISO 10646 (. ). , "B & W?" "B\& W \?" "B\26 W\3F".

, , , HTML - ( )

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


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

WONT WORK

-

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

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

( ), [1].

+7

More articles:


All Articles