Pattern: [attr$=substring]   Definition: The [attr$=substring] selector matches any element whose attr attribute value ends with the suffix substring.   Examples: Style all <a> elements that have an href attribute value which ends with ".zip" a[href$=".zip"] { background-color: antiquewhite; }

Pattern: [attr^=substring]   Definition: The [attr^=substring] selector matches any element whose attr attribute value begins with the prefix substring.   Examples: Style all <a> elements that have an href attribute value which begins with "https" a[href^="https"] { background: blueviolet; }

Pattern: [attr]   Definition: The [attr] selector matches any element based on the presence of attr attribute, regardless of the attribute's value.      Examples: Style all <img> elements with an alt attribute img[alt] { border: 1px solid #FFFF00; }  

Pattern: [attr|=val]   Definition: The [attr|=val] selector matches any element with the attr attribute, its value either being exactly val or beginning with val immediately followed by a hyphen ( - ), like lang="en-au".    Examples: Match every <a> element whose lang attribute's value starts with "en" a[lang|=en] { color: gold; }

Pattern: [attr~=val]   Definition:   The [attr~=val] selector matches any element with the attr attribute, and one of its attr attribute's value (separated by whitespaces) is exactly val.    Examples: Style all elements with a title attribute whose value contains the word "highlight"  [title~=highlight] { background-color: yellow; }  

Pattern: [attr=val]   Definition: The [attr=val] selector matches any element whose attr attrubute's value is exactly val.    Examples:   Style all <pre> elements whose title attribute is exactly the value "css" pre[title=css] { color: aqua; }  

Pattern: element#IDNAME   Definition: The element#IDNAME selector matches any element whose ID attribute has the value IDNAME. The IDNAME must immediately follow the "#".    Examples: Assign styles to all elements with id="name" *#name{ text-decoration: underline; } or simply #name { text-decoration: underline; } Style all <h1> elements with id="title" h1#title { font-family: fantasy; }

Pattern: element.CLASSNAME   Definition: The element.CLASSNAME selector matches every element that have a class attribute containing CLASSNAME. The CLASSNAME must immediately follow the ".".  When representing the class attribute, element.CLASSNAME and element[class~=CLASSNAME] have the same meaning.   Examples: Assign styles to all elements with class="code" *.code { font-family: monospace; } or simply .code { font-family: monospace; } Style all <p> elements with class="note

Pattern: element1 > element2   Definition: The element1 > element2 selector matches every element2 that is the child of element1. A child selector is made up of two or more selectors separated by ">".   Examples: Style every <a> that is the child of <p>. p > a { padding: 10px; } Match every <a> element that is a descendant of <em>; the <em> element must be the child of a <p>; and the <p> element must be a descendant of a <div>

Pattern: element1 + element2   Definition: The element1 + element2 selector matches every element2 where element1 and element2 are sibling elements that share the same parent in the document tree, and element1 immediately precedes element2 (non-element nodes between element1 and element2 is ignored).    Examples: Style every <p> element that is placed immediately after <h1> h1 + p { font-size: large; }   div.important + * { font-weight: bold; }