Commonly Used CSS Selectors

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.

*{font-family:Arial,sans-serif}

The class selector

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

<div>Sometextinside.</div>

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>

That’s it for the HTML! We’ve set it up, and we can now use the class selector in the CSS.

To begin, we add the . and follow it up with the value we gave to our HTML class attribute:

.large-text{ 
}

We can add any number of CSS property: value pairs inside the curly ...