Pattern: element   Definition: The element selector matches every instance of the element type in the document tree.   Examples:   p { color: gold; } a { background-color: azure; }

Pattern: element1 element2   Definition: The element1 element2 selector matches every element2 that is the descendant of element1. A descendant selector is made up of two or more selectors separated by white space.   Examples: Style every <a> element that is inside <p> elements p a { color: greenyellow; } Style every <em> element that is within a <p>, and is a grandchild or later descendant of a <div> div p em { text-decoration: underline; }

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; }

Pattern: element1 ~ element2   Definition: The element1 ~ element2 selector matches every element2 that is a sibling of element1 (they need to have the same parent), and element1 must precede (not necessarily immediately) element2.      Examples: Style every <p> element that is placed after an <h1> element with the same parent h1 ~ p { margin-top: 10px; }

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: 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: [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 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: [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; }