Attribute selectors

Attribute selectors match elements based on either the presence of an attribute, or the partial or exact match of an attribute value.

Attribute selectors match elements based on either the presence of an attribute, or the partial or exact match of an attribute value.

Note:

Strings, as distinct from identifiers (elements, id and class attributes) must be quoted in attribute selectors.

Action Description CSS Example
contains Applies to elements that have an attribute which contains the specified value, for example, the title attribute contains 'copy', which will select 'copyright' and 'photocopy'. 
p[title*="copy"] {
 font-size:9pt;}
contains-word Applies to elements that have an attribute which contains the specified word, for example, menu labels with a class containing 'sport' in a space-separated list of words. 
label[class~="sport"] {
 background-color:silver;}
ends-with Applies to elements that have an attribute which contains a value which ends with the specified value, for example, image with a src attribute ending in '.png'. 
img[src$=".png"] {
 clear:both;}
equals Applies to elements that have an attribute which is equal to the specified value, for example, a paragraph with the class attribute 'relinfo'. 
p[class="relinfo"] {
 color:blue;}
language-match Applies to elements that have the lang attribute set to the specified language, for example, a paragraph with a lang attribute of 'fr' or beginning with 'fr' and immediately followed by '-'. 
p[lang|="fr"] {
 border:thin;}
set Applies to elements that have the specified attribute set, for example, any list item with the title attribute set. 
li[title] {
 font-weight:bold;}
starts-with Applies to elements that have an attribute containing a value which starts with the specified value, for example, menuitem links to a 'mycorp' URI. 
menuitem[href^="http://mycorp.com"] {
 color:red;}

Related topics