The Element Selector
Selects all elements of the specified type. The following example selects all <aside> elements.
The ID Selector ( # )
Selects the single element that has the specified ID. The following example selects the single element whose ID is "id-brown".
The Class Selector ( . )
Selects all elements with the specified class name. The example below selects all elements that have the "class-green" class.
The Descendent Selector ( space )
Selects elements that are descendants of a specified parent element. The descendants can appear at any level.
Simple Descendent Selector
The example below selects every element, that has a 'simple-desc-bar' class, nested anywhere inside any element with a 'simple-desc-foo' class.
Compound Descendent Selector
The following example uses the universal selector to require at least one element be present between the .compound-desc-foo and .compound-desc-bar elements
The Child Selector ( > )
Selects elements that are direct descendants of a specified element (first-level children). This is similar to the descendent selector, except it applies only to first-level descendents. The example below selects every <cite> element, nested at the first-level, inside any <div> element that has the "child-foo" class.
Note: The "This inherits from cite" text, inside the <b> tag, is also affected, but only because of inheritance. If a color reset was used (e.g., "* {color:black;}"), then the text would remain black.
The Adjacent Selector ( + )
Selects the specified element immediately following the specified sibling element. The example below selects the first <cite> element after any <div> element that has the "foo" class.
The General Sibling Selector ( ~ )
Selects all sibling elements of a preceding simple selector. This is similar to the Adjacent Selector, but now non-selected sibling elements are allowed. The example below selects every sibling <cite> element after any <div> element that has the "general" class.
The Attribute Selector ( [ ] )
[name]
Selects all elements that have the specified attribute name.
[name="value"]
Matches all elements that have the exact attribute name and value.
[name~="value"]
Matches all elements that have the exact attribute name plus the exact value as a whitespace separated substring.
[name|="value"]
Matches all elements that have the exact attribute name plus the exact value or the exact value followed by a dash (-) with optional trailing characters.
[name^="value"]
Matches all elements that have the exact attribute name and start with the specified value.
[name$="value"]
Matches all elements that have the exact attribute name and end with the specified value.
[name*="value"]
Matches all elements that have the exact attribute name and contains the specified value.
The Pseudo Selector ( : / :: )
The pseudo selector (:pseudo-classes and ::pseudo-elements) can match useful facets in a DOM, based on information that's not directly represented (e.g., a visited link or the first character in the content of a <div>).
:firstChild pseudo-class
:lastChild pseudo-class
:nth-child() pseudo-class
:checked pseudo-class
:negation pseudo-class
::first-letter pseudo-element #1
::first-letter pseudo-element #2
::before and ::after pseudo-elements
Insert and format additional content, within a targeted element, before or after the existing content of the element.