CODEWITHSUNDEEP
htmlcsscss-selectors
DJC
DJC

Reputation: 1173

No need for selecting by partial attribute?

If

.animal {background: yellow}

will apply the styling rule to any elements with a class containing the word animal, even if it also contains other words eg...

<li class="toy animal">Toy Bear</li>

then what is the need for the below syntax for selecting by partial attribute?

*[class~="animal"] {background: yellow}

Thanks

Upvotes: 1

Views: 39

Answers (2)

Explosion Pills
Explosion Pills

Reputation: 191749

According to the selectors spec, the period . is an alternative for the ~= notation for the class attribute.

Thus, for HTML, div.value and div[class~=value] have the same meaning

Just to clarify the ~= meaning:

E[foo~="bar"] an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar"

Note that this is different than *=

In other words, .animal and [class~=animal] (without the *) are the same.

Upvotes: 1

MarcinJuraszek
MarcinJuraszek

Reputation: 125630

The only difference is, you can use .value syntax only for classes, when [attribute~="value"] can be used to match any attribute values.

But when you use [class~="className"] to match class attribute values, it is equivalent to standard .className syntax.

Upvotes: 1

Related Questions