CSS Selectors: An Introduction

Posted ·by William Neild·774 Words·4 min read

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 upon what you tell it 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.

The 4 basic CSS selectors

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:

SelectorExampleDescription
Wildcard*Selects all elements
ElementpSelects all <p> elements
Class.headingSelects all elements with class="heading"
Id#firstnameSelects the element with id="firstname"

Wildcard selector

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

An example of a common use of wildcards. This will remove the default margin and padding of all elements

Although this can be a useful selector, it’s usually classed as being bad 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 on yourself (and to 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.

An example of using an element selector to style paragraphs

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 font size of 18px.

Okay, so knowing about CSS selectors doesn’t necessarily mean that you’ll be able to make things look beautiful but its 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.

Three example css classes

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.

An assortment of paragraphs being styled using the HTML class attribute

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.

An example showing the use of an Id selector

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.

A paragraph element being styled using the HTML Id attribute

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!