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

possible duplicate of Select elements by data attribute in CSS — Brett DeWoody
– Brett DeWoody, Commented Feb 23, 2014 at 18:31

Brett DeWoody · Accepted Answer · 2014-02-23 17:46:56Z

45

You'll want to use

[data-favorite="1"] {}

The difference being the quotes "" around the value.

Here's the working jsFiddle

answered Feb 23, 2014 at 17:46

Brett DeWoody

63.3k31 gold badges145 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mr. Alien · Accepted Answer · 2014-02-23 18:03:46Z

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

Collectives™ on Stack Overflow

CSS selector for custom data-attribute?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related