The power of CSS Selectors can not be understated; for, without them, there would be no simple means by which developers could target specific elements for styling in a manner abstracted from, or external to, the actual markup to which the styles will bind.
In addition to some of the more common Simple Selectors, such as Type Selectors, Class Selectors and Id Selectors, we have have Attribute Selectors, which, as the name implies, allow us to match elements based on their attributes.
Attribute Presence and Value Selectors
CSS2 introduced four Attribute Selectors; referred to as Attribute Presence and Value Selectors, which allow for coarse grained matching of specific elements based on their attributes and / or attribute values. These include the following:
- e[attr]
- Where e is an element and
[attr]is an attribute of element e. For example,p[title]would match allptags with atitle, regardless of the value of thetitle.12345678910/*Matches all <p> tags with a title and changes theirbackground color to red with white text*/p[title]{background-color: red;color: white;} - e[attr=val]
- Where e is an element and
[attr=val]represent an attribute of element e which contains the exact value ofval. For example,p[title="Example 1"]would match allptags with atitlewhich equals “Example 1” exactly.1234567891011/*Matches all <p> tags with a title equal to "Example 1"and changes their background color to green and textcolor to white*/p[title="Example 1"]{background-color: green;color: white;} - e[attr~=val]
- Where e is an element and
[attr~=val]is an attribute of element e which has a value containing a whitespace-separated list of words, one of which equalsvalexactly. For example,p[title~="Example-1a"]would match allptags with atitlecontaining the word “Example-1a” in a list of whitespace delimited words.1234567891011/*Matches all <p> tags with a title containing the exactword to "Example-1a" and changes their background colorto black and text color to red*/p[title~="Example-1a"]{background-color: black;color: red;} - e[attr|=val]
- Where e is an element and
[attr|=val]is an attribute of element e that has a value ofvalexactly, or begins withvalimmediately followed by a hyphen “-“. For example,p[title!="Example"]would match allptags with atitlecontaining the word “Example-“, followed by any other value, such as “Example-1”, “Example-A”, etc..1234567891011/*Matches all <p> tags with a title containing the wordto "Example-" and changes their background color to blueand text color to white*/p[title|="Example"]{background-color: blue;color: white;}
Substring Matching Attribute Selectors
In addition to the above Attribute Presence and Value Selectors, CSS3 expands on this by defining three additional Attribute Selectors; referred to as Substring Matching Attribute Selectors. These additions allow for fine grained matching of specific elements based on their attribute values.
In simplest terms, the new Attribute Selectors in CSS3 can be used to match an element with a given attribute whose value begins, ends or contains a certain value. The following is a basic description and example of each new Attribute Selector:
- e[attr^=val]
- Where e is an element and
[attr^=val]is an attribute of element e which contains a value that begins with val.123456/* Matches all linked resources sent over https */a[href^="https"]{color: red;} - e[attr$=val]
- Where e is an element and
[attr$=val]represent an attribute of element e which contains a value that ends withval.123456/* Matches all anchor tags to .html documents */a[href$=".html"]{color: green;} - e[attr*=val]
- Where e is an element and
[attr*=val]is an attribute of element e which has a value that containsval.123456/* Matches all anchor tags which contain a query string */a[href*="?"]{color: blue;}
To summarize, there are a total of seven Attribute Selectors in CSS3, three of which are new. Whether used for general matches, such as global Attributes; e.g. *[hreflang|=en] or more specific matches, such as chaining; e.g, a[href^="https"][target="_blank"], Attribute Selectors provide a powerful mechanism for selecting both general and specific content within a page.
