Getting Started with CSS Selectors

In this section, we will introduce you to CSS selectors. Selectors are a fundamental part of CSS as they determine which HTML elements you want to style. We will look at what they are and how to use them.

What is a CSS Selector?

Selectors are used to "select" the HTML elements you want to style.

When you write a CSS rule, you use a selector to tell the browser which elements the rule should apply.

Common CSS Selectors

Here are the most commonly used selectors that every beginner should know. Don't worry about memorizing these things; as you use them, muscle memory will kick in.

Type Selector

The type selector targets all elements of a given type. For example, you can select all <p> elements to style all paragraphs.

p {
    color: blue;
}

This rule sets the text color of all <p> elements to blue. This can be any HTML tag. Just pass the name of the tag. For clarity, another example using an <img> tag would be:

img {
    width: 400px;
}

Class Selector

The class selector targets elements with a specific class attribute. Class selectors begin with a dot (.).

.example-class {
    background-color: yellow;
}

To apply this style, add the class to an HTML element:

<p class="example-class">This paragraph has a yellow background.</p>

This is usually the most common way you'll style elements because it allows you to apply and reuse styles across multiple elements regardless of their type.

Selector

The ID selector targets an element with a specific id attribute. ID selectors begin with a hash (#). Note that IDs should be unique within a page.

#example-id {
  font-size: 24px;
}

To apply this style, add the id to an HTML element:

<h1 id="example-id">This heading has a font size of 24 pixels.</h1>

As mentioned above, an ID should be unique. Therefore, it can only be used to style a single element, which is why you'll usually reach for classes instead. Styling entire pages might get cumbersome with unique identifiers so it might not be a selector you reach for often.

Universal Selector

The universal selector (*) targets all elements on a page.

* {
    margin: 0;
    padding: 0;
}

This rule removes all default margins and padding from all elements.

Note the "all" elements. Notice the example below where I give everything a red border. It includes the <body> and <html>. Play around with the styles below to try it out:

I wanted to introduce this because often when you start a project, you might see some default overrides of styles to get some consistent behaviors across browsers.

Descendant Selector

The descendant selector targets elements that are descendants of a specified element. It is written as a space between two selectors.

div p {
  color: red;
}

This rule sets the text color of all <p> elements that are inside a <div> element to red.

Combining Selectors

You can also combine selectors.

Here's an example of mixing a Type Selector with a Class selector.

div .blue {
  color: blue;
}

And here's all the output so you can play with different combinations:

There is also a "Compound Selector" which allows you to precisely target elements by certain types that have specific classes. As an example, targeting all <div> elements with the blue class:

div.blue {
  color: blue;
}

This means to target elements they would need to look something like this:

<div class="blue">I'm blue!</div>

Same can by done with IDs:

div#example-id {
  padding: 10px;
}

This rule adds padding to the <div> element with the ID example-id.

Learn by Doing

Understanding and using these selectors will allow you to effectively target and style specific elements on your web pages. Practice makes perfect. Take your time and start using them right away to ensure you remember them. You'll only really learn these things when you start coding.

Here are some practice exercises that you can try out on CodePen to test your new skills:

Applying Type Selectors:
- Write a CSS rule to set the background color of all <h2> elements to lightgray.
Using Class Selectors:
- Write a CSS rule to set the text color of elements with the class highlight to orange.
Using ID Selectors:
- Write a CSS rule to set the font size of the element with the ID main-title to 32 pixels.
Combining Selectors:
- Write a CSS rule to set the font style to italic for all <span> elements inside a <p> element.

If you get stuck, jump into our Discord or let me know in the comments below, and I'll try to help.

This is not an exhaustive list of all the selectors in CSS, but it'll solve 95% of the problems you face. In later sections, we will share more selectors and rules that will make your sites pop even more.

In the next article, we will start learning about "Cascading" in CSS and specificity, another skill that will become crucial in creating beautiful websites and apps.