CSS Selectors: An Introduction

If you’ve ever used CSS, you should already know about selectors but in case you’ve forgotten, you need a refresher or you have no idea what I’m talking about, I’ll explain what they are and how to use them.

What are selectors?

Selectors are quite easy to understand in concept. They select one or more elements conditionally based on what you tell them to do, and as a result, the styles that you write after the selector will be applied to the HTML element or elements that the selector relates to.

*             /* Wildcard selector */
p             /* Element selector */
.classname    /* Class selector */
#thing        /* ID selector */

For example, the above selectors are some of the basic ones that you’ll probably come across when first learning CSS so in this first technical post of mine, I will be explaining these but in the future, I will be writing about some of the more advanced CSS selectors such as pseudo selectors.

Here are the selectors that I’m going to be talking about in this post:

Wildcard selector

The wildcard selector (also referred to as the Universal selector) will select all elements within its scope.

/* A common use case is in browser resets */

* {
  margin: 0;
  padding: 0;
}

Although this can be a useful selector, it’s usually classed as lousy practice and recommended to not be used. This is due to CSS specificity and performance. Using the wildcard selector means that you will be applying the styling specified to all child elements indiscriminately which as a result, makes it harder for yourself (and others who may be maintaining your CSS in the future) to apply styling to individual elements.

However, as with most ‘good’ and ‘bad’ practices, this is to be taken with a pinch of salt as there are edge cases to consider when using CSS so don’t take them as law.

Element Selector

An element selector (can also be called a type selector) matches elements on the basis of tag names.

p {
  font-size: 18px;
  color: red;
  font-style: italic;
}

Take the example above, here we are selecting all of the paragraph elements on the page, and for some reason, we have decided to turn them all red, make them italic and set their font size to 18px.

Okay, so knowing about CSS selectors doesn’t necessarily mean that you’ll be able to make things look beautiful but it's a start!

Class Selector

Next up is going to be our most commonly used selector, the class selector. Class selectors consist of a dot prefixed before the class name. The class name is defined in the class attribute in an HTML element and multiple elements are allowed to have the same class name. As a result, the class selector matches all HTML elements with the same class name.

.center {
  text-align: center;
}

.large {
  font-size: 400%;
}

.red {
  color: red;
}

In the above example, we have defined three CSS classes that we can use to style elements which have those classes in their class attributes.

<p>This is a regular, unstyled paragraph</p>

<p class="large">
  This is a large paragraph
</p>

<p class="red">
  This is a red paragraph
</p>

<p class="large red center">
  This is a large, red and center aligned paragraph
</p>

Furthermore, each HTML element isn’t limited to having only one class, it can have as many as it wants.

ID Selector

Finally, the ID selector is the most specific selector. This means that it should only relate to a single element in the document. The ID selector consists of a hashtag prefixed before the ID name of the HTML element.

#introduction {
  color: green;
  font-size: 20px;
  text-transform: capitalize;
}

Furthermore, the ID selector is used very similarly to the Class selector mentioned above but instead of using the class attribute in HTML, we use the ID attribute, as shown below.

<p id="introduction">
  This is a paragraph which has some introduction text
  and should only be used once in this page.
</p>

Conclusion

In conclusion, CSS selectors are pretty easy to get your head around and are a very powerful tool for web designers if handled properly. If you enjoyed this post and found it useful, leave a comment or a reaction below.

Thanks for reading!