CSS Selectors
Learn all the most important things about CSS Selectors
A selector allows us to associate one or more declarations to one or more elements on the page.
Basic selectors
Suppose we have a p
element on the page, and we want to display the words into it using the yellow color.
We can target that element using this selector p
, which targets all the element using the p
tag in the page. A simple CSS rule to achieve what we want is:
p {
color: yellow;
}
Every HTML tag has a corresponding selector, for example: div
, span
, img
.
If a selector matches multiple elements, all the elements in the page will be affected by the change.
HTML elements have 2 attributes which are very commonly used within CSS to associate styling to a specific element on the page: class
and id
.
There is one big difference between those two: inside an HTML document you can repeat the same class
value across multiple elements, but you can only use an id
once. As a corollary, using classes you can select an element with 2 or more specific class names, something not possible using ids.
Classes are identified using the .
symbol, while ids using the #
symbol.
Example using a class:
<p class="dog-name">
Roger
</p>
.dog-name {
color: yellow;
}
Example using an id:
<p id="dog-name">
Roger
</p>
#dog-name {
color: yellow;
}
Combining selectors
So far we’ve seen how to target an element, a class or an id. Let’s introduce more powerful selectors.
Targeting an element with a class or id
You can target a specific element that has a class, or id, attached.
Example using a class:
<p class="dog-name">
Roger
</p>
p.dog-name {
color: yellow;
}
Example using an id:
<p id="dog-name">
Roger
</p>
p#dog-name {
color: yellow;
}
Why would you want to do that, if the class or id already provides a way to target that element? You might have to do that to have more specificity. We’ll see what that means later.
Targeting multiple classes
You can target an element with a specific class using .class-name
, as you saw previously. You can target an element with 2 (or more) classes by combining the class names separated with a dot, without spaces.
Example:
<p class="dog-name roger">
Roger
</p>
.dog-name.roger {
color: yellow;
}
Combining classes and ids
In the same way, you can combine a class and an id.
Example:
<p class="dog-name" id="roger">
Roger
</p>
.dog-name#roger {
color: yellow;
}
Grouping selectors
You can combine selectors to apply the same declarations to multiple selectors. To do so, you separate them with a comma.
Example:
<p>
My dog name is:
</p>
<span class="dog-name">
Roger
</span>
p, .dog-name {
color: yellow;
}
You can add spaces in those declarations to make them more clear:
p,
.dog-name {
color: yellow;
}
Follow the document tree with selectors
We’ve seen how to target an element in the page by using a tag name, a class or an id.
You can create a more specific selector by combining multiple items to follow the document tree structure. For example, if you have a span
tag nested inside a p
tag, you can target that one without applying the style to a span
tag not included in a p
tag:
<span>
Hello!
</span>
<p>
My dog name is:
<span class="dog-name">
Roger
</span>
</p>
p span {
color: yellow;
}
See how we used a space between the two tokens p
and span
.
This works even if the element on the right is multiple levels deep.
To make the dependency strict on the first level, you can use the >
symbol between the two tokens:
p > span {
color: yellow;
}
In this case, if a span
is not a first children of the p
element, it’s not going to have the new color applied.
Direct children will have the style applied:
<p>
<span>
This is yellow
</span>
<strong>
<span>
This is not yellow
</span>
</strong>
</p>
Adjacent sibling selectors let us style an element only if preceded by a specific element. We do so using the +
operator:
Example:
p + span {
color: yellow;
}
This will assign the color yellow to all span elements preceded by a p
element:
<p>This is a paragraph</p>
<span>This is a yellow span</span>
We have a lot more selectors we can use:
- attribute selectors
- pseudo-class selectors
- pseudo-element selectors
More on those on future posts.
I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025