A: Selects all elements of type A. Type refers to the type of tag, so div, p and ul are all different element types.
#id: Selects the element with a specific id. You can also combine the ID selector with the type selector.
.classname: The class selector selects all elements with that class attribute. Elements can only have one ID, but many classes.
A.className: You can combine the class selector with other selectors, like the type selector.
*: It allows selecting all elements in a page.
A *: This selects all elements inside of A.
A B: Selects all B inside of A. B is called a descendant because it is inside of another element.
A, B: Selects all A and B elements. You can combine any selectors this way, and you can specify more than two.
A + B: This selects all B elements that directly follow A. Elements that follow one another are called siblings. They're on the same level, or depth.
A ~ B: You can select all siblings of an element that follow it. This is like the Adjacent Selector (A + B) except it gets all of the following elements instead of one.
A > B: You can select elements that are direct children of other elements. A child element is any element that is nested directly in another element.
:first-child: You can select the first child element. A child element is any element that is directly nested in another element. You can combine this pseudo-selector with other selectors.
:only-child: You can select any element that is the only element inside of another one.
:last-child: You can use this selector to select an element that is the last child element inside of another element.
A:nth-child(n): Selects the n-th (Ex: 1st, 3rd, 12th etc.) child element in A element.
A:nth-last-child(n): Selects the n-th (Ex: 1st, 3rd, 12th etc.) child element in A element starting from the bottom.
:first-of-type: Selects the first element of that type within another element.
:nth-of-type(A): Selects a specific element based on its type and order in another element - or even or odd instances of that element.
div:nth-of-type(2): selects the second instance of a div.
.example:nth-of-type(odd): selects all odd instances of a the example class.
span:nth-of-type(6n+2): selects every 6th instance of a span, starting from (and including) the second instance.
:only-of-type: Selects the only element of its type within another element.
:last-of-type: Selects each last element of that type within another element. Remember type refers the kind of tag, so p and span are different types.
div:last-of-type: selects the last div in every element.
:empty: Selects elements that don't have any other elements inside of them.
:not(X): Select all elements that do not match selector "X".
[attribute]: Select all elements that have a specific attribute
[attribute="value"]: Select all elements that have a specific attribute value
[attribute^="value"]: Select all elements with an attribute value that starts with specific characters
[attribute$="value"]: Select all elements with an attribute value that ends with specific characters
[attribute*="value"]: Select all elements with an attribute value that contains specific characters anywhere
[attribute~="value"]: Select all elements with an attribute value that it is a whitespace-separated list of words and one of which is exactly "value".
[attribute|="value"]: Select all elements with an attribute value that can be exactly “value” or can begin with “value” immediately followed by “-” (U+002D). It can be used for language subcode matches
Pseudo-elements are very much like pseudo-classes, but they have differences. They are keywords (this time preceded by two colons (::)) that can be added to the end of selectors to select a certain part of an element. They are: