CSS Selector Specificity

Ordered from lowest specificity to highest specificity

1. Universal Selector

The universal selector acts as a wildcard. It is used to select any and every element, regardless of class, id, etc. This can be useful for applying styles to everything, or it can be combined with another selector to select everything under it. This selector uses the *.

2. Element Selector

Any element that is specified will be selected with the element selector. This selector is useful whenever you want to affect a basic HTML element. The syntax for this selector is simply the HTML tag you would like to select.

3. Psuedo Elements

Psuedo Elements are things like ::before and ::after, which are empty elements before and after every element. These can be used to enforce spacing or line breaks (in the case of clearfix), as well as a few other niche things. The format is ::psuedo-element.

4. Group Selector

This selector applies to any series of elements (or other selectors) used. This is used to group elements/selectors that you would like to have similar styling. To group selectors, you simply insert a comma between selectors and it becomes a group.

5. Descendant Selector

A descendant selector applies to an element that is a descendent of another specified element. This works as a parent-child relationship. It is useful when you would like to select all em elements inside a p element, or all anchor tags inside of a class/id. The format is the parent element followed by the child element, like p em.

6. Class Selector

This selector applies to any element with the specified class. Classes are useful to style a lot of things similarly. For instance, if you would like to style a selection of h1 and p elements so they have a blue font color, you can assign them a class in HTML and use that class selector to change the text color to blue. The format for classes is .class.

7. Psuedo Selectors

Psuedo selectors include :hover and :focus. These can be used to select elements that are being interacted with by the user to provide visual feedback about what is being selected. There are some others like :invalid and :last-child that can be used to select specific elements that are children of elements, or elements that contain invalid form data. The format for these selectors is :psuedo-selector

8. ID Selector

An element with an ID that matches the ID selector will be selected when using this selector. IDs are used for single unique elements, often to manipulate them with Javascript. The ID must only be used once in HTML, or else it is not valid. The ID selector uses the #id format.