CSS selector for custom data-attribute?
Solution 1
You'll want to use
[data-favorite="1"] {}
The difference being the quotes "" around the value.
Here's the working jsFiddle
Solution 2
You need to use "
around the attribute value
[data-favorite="1"] {
/* Styles goes here */
}
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
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].
Hugolpz
Educational platform Engineer at Center for Research and Interdisciplinarity, Paris. Former PhD candidate in Chinese Teaching and Computer Assisted Language Learning (#CALL), enthusiast wikipedian. I mainly discuss a HTML/CSS/JS for #webapp, #Nodejs, #D3js, #Make, #GIS cartography, #topojson, #wikidata, #openedx. Love to ask short, clean questions on isolated issue with JSfiddle to demo it.
Updated on June 04, 2022Comments
-
Hugolpz about 2 years
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; }
-
Hugolpz over 10 yearsAlready tried out...... Well, I visibly tried out everythings but that. Thanks a lot.