Selectors

In CSS, pattern matching rules determine which style rules apply to elements in the document tree.

1. Universal Selector
2. Class selector
3. id Selector
4. decendant Selector
5. Child Selector
6. Adjacent sibling selector
7. Attribute Selector
8. :first-child pseudo-class
9. link pseudo class
10. :first-line pseudo-element
11. :first-letter pseudo-element
12. Grouping Selectors

The universal selector matches any element and is denoted by the * symbol.

Any HTML element can accept class attribute. The value of this attribute must be a list of identifiers separated by spaces. (e.g "class1 class2 class3").

Using class selector you can define a style for elements that belongs to a class.

The id attribute is another universal attribute. The value of this attribute must be a unique identifier for the entire HTML document. You can create selectors using the id attribute.

The descendant selectors match elements that are nested inside of other elements.

A B {..}

Matches any B element that is inside an A element. (B is an arbitrary descendant of A)

The child selectors match element that is immediately inside an element.

A > B {...}

Match any element that is immediate inside an A element. (B is a direct descendant or child of A)

The adjacent sibling selector matches if the elements have the same parent and the second element immediately follows the first element.

A + B {...}

Matches if the element A and B have the same parent and A immediately precedes B.

Below are the syntax for the attribute selector.

If the same styles applies to many elements, you can group selectors in a list of selectors separated by commas.

S1, S2, S3 {...}