Skip to content

CSS Selectors

Attribute contains value in list

About

The [attr~=value] selector matches all elements with the specified attribute whose value contains a list of space-separated values and one of the values is exactly value.

Note: This is a contrived example. Use the .class selector to select elements by class instead.

Matching attribute

The example matches all elements with the class attribute containing the word foo, no matter where it is in the list. All four items are matched because they contain the class foo.

Non-matching attribute

All three items have the word foo in their class list, but the word is not a separate class, so they are not matched. For the selector to match, the value must be a separate word in the list.