Here’s the list of the most commonly used CSS selectors:

  • The universal (wildcard) selector (*)
  • The class selector (and the combined class selector)
  • The descendant class selector (or less commonly, just the descendant selector)
  • The element selector
  • The ID selector (not used as much as it used to be)
  • The :hover-* pseudo-class
  • The ::before and ::after pseudo-elements

Let’s look at examples of each of these selectors.

The universal selector (*)

We’ve already discussed the universal selector in this chapter. It’s best suited for setting up a style that will be used throughout a layout, such as what we saw in the previous lesson when we changed the default font in the browser from Times New Roman to Arial.


The class selector

The class selector is easy enough. Let’s say you have a <div> element with some text inside:


To add a class selector, we first need to add a class HTML attribute to the above <div>. In other words, we’ll update the code above to this:

<div class="">Sometextinside</div>

We’ve now set up our HTML class attribute, but we still haven’t added a value. Let’s correct that mistake, and add our HTML class attribute the value of large-text:

<div class="large-text">Sometextinside</div>

Get hands-on with 1200+ tech skills courses.