What are CSS selectors?

A CSS selector is used as a way to target elements in our DOM (Document Object Model) and apply a certain style to it. Basically, what we are doing is defining the style we want to use and then applying a « filter » that target specified items. In order to do that, we are going to use this structure:

There are many selectors in CSS, we’ll talk about them later on. The style we apply can target the text or background’s color, the police’s size, if we want a border or not, we can do so much.

The different types of CSS selectors

1. Universal selector

When using the asterisk ( * ) we are targeting all the elements on the web page and it will apply styles to everyone of them.

2. ID selector

If we use the hash symbol ( # ), we are using an ID selector. In the example below, something in our HTML (it can be a div, a span…), is identified with the « square » ID. So in our CSS file we are selecting the only element that has this ID and are applying to it the styles you chose.

This selector is not much used because it’s very specific. Since ID’s are unique, we will only be able to target one ID and it’s not necessarily what we want.

3. Class selector

When using a dot ( . ) we are selecting a class that you defined in our HTML document. It is almost like ID selector but the only difference is we can use class selectors for multiple elements in a page which will share the same CSS styles.

4. Type selector

We also can target every element that is the same type. With this selector we can apply a style to all the divs or the elements of a list (shown in the example below) or even to all paragraphs (p).

5. Specificity and generalities

We have seen four of the most important and interesting CSS selectors. To increase the filter queries we can mix selectors so we can also increase the specifity of the selectors. It means that we can apply multiple styles to a various number of elements by listing differents selectors in our CSS file. Mixing selectors is called chaining selectors.

The more filters we add to our selector, the more specific it gets. This is what we call « overriding » the style. For example if we have three divs and one of them has a class called test, in our CSS file we are going to have a red background applied to all divs using the type selector and a blue background applied to the class test using the class selector. Well, two of the divs are going to be red and one of them is going to be blue. This is because this specific element first gets applied the style of its low-priority generic selector (the simple div), and then matches the more specific selector that overrides some properties.

6. Other selectors

This is where things are really interesting. For example we can target all the anchor elements inside an element that has a class. In the example below it will affect only anchor elements inside our square class element. These selectors are called « descendant selectors« .

To select an element that immediately follows the first element we have the adjacent selectors using the add symbol ( + ).

In the example above, the paragrapher that follows the div is going to be affected by the style.

The sibling selector is almost like the adjacent selector except we can select all the paragrapher elements that follow the div instead of just one (in the case of adjacent selector).

Then we have the direct children selector. If we have a div that has four paragraphers in it, we can style those paragrapher without overriding paragraphers that are external to that div.

7. Specific child of an element

If we want to be even more accurate in our child-targeting logic, we can query children at a specific position in the list of children. We can basically do 5 things:

• get the first child with :first-child
• get the last child with :last-child
• get the first child with a given tag name with :first-of-type
• get the last child with a given tag name with :last-of-type
• get a child at a given index with :nth-child()

The :nth-child() selector is really interesting because we can either pass a basic number to get the element at a certain index (the first element has index 1 and not 0), or we can pass in a math formula to get children at an index or multiple indexes that match this formula.

Pseudo-classes

The next big usage of CSS selectors is when we want to have state-dependent styling. When our DOM elements can be in different states, like “hovered” or “focused”, CSS selectors let us capture this particular state and modify the appearance of our element depending on what state it currently has.

We can also use them to better stylise our forms and show the user the fields that are valid or invalid, the values that are in range of the sliders, the inputs that are currently read-only or disabled, and so on.

The possible states of a DOM element depend on its type; the :hover, :active and :focus states are common ones but you have lots of additional states for links (like :visited), checkboxes (:checked), range sliders (:in-range)… Those states are called pseudo-classes. The specific children of an element also are identified as pseudo-classes but not of state but position.

Conclusion

This was a quick review of all the CSS selectors that exists. There are some of them that are missing. If this subject interests you, you can follow up with some research online.

CSS selectors are an incredible tool that lets us retrieve DOM elements with precision and apply different effects and styles that helps us create dynamic attractive pages.

---