e[attr]

Where e is an element and [attr] is an attribute of element e. For example, p[title] would match all p tags with a title, regardless of the value of the title.

1 2 3 4 5 6 7 8 9 10

/* Matches all <p> tags with a title and changes their background 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 of val. For example, p[title="Example 1"] would match all p tags with a title which equals “Example 1” exactly.

1 2 3 4 5 6 7 8 9 10 11

/* Matches all <p> tags with a title equal to "Example 1" and changes their background color to green and text color 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 equals val exactly. For example, p[title~="Example-1a"] would match all p tags with a title containing the word “Example-1a” in a list of whitespace delimited words.

1 2 3 4 5 6 7 8 9 10 11

/* Matches all <p> tags with a title containing the exact word to "Example-1a" and changes their background color to 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 of val exactly, or begins with val immediately followed by a hyphen “-“. For example, p[title!="Example"] would match all p tags with a title containing the word “Example-“, followed by any other value, such as “Example-1”, “Example-A”, etc..

1 2 3 4 5 6 7 8 9 10 11

/* Matches all <p> tags with a title containing the word to "Example-" and changes their background color to blue and text color to white */ p[title|="Example"]{     background-color: blue;     color: white; }

View Example

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.

1 2 3 4 5 6

/* 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 with val.

1 2 3 4 5 6

/* 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 contains val.

1 2 3 4 5 6

/* Matches all anchor tags which contain a query string */ a[href*="?"]{     color: blue; }

View Example