This article will cover what are CSS selectors, why and how we use them, and we will also get to know different types of CSS in detail, and we will take a look at how they work. We’ve already covered selectors in QuerySelector multiple classes and other rules in JavaScript and CSS, so this is definitely the article you should also take a look at. And if you are interested in JavaScript, the article GetElementById vs. querySelector: Which is better and why use one over the other? is also something you should check, too.
What are CSS selectors?
In CSS, selectors are patterns that target different HTML elements. Why do we target these HTML elements? We target or select them because we want to style these specific HTML elements. There is a really wide diversity of selectors available and thankfully this allows us to target the HTML elements with great precision.
We have already learned in some previous articles that selectors target the document in different ways, for example, we can target elements by types such as headings (h1, h2 etc), or elements with a specific class (such as .class) or by ID, elements’ attributes, pseudo-classes and pseudo-elements and we can even combine these selectors by using combinators if we want to fine-grain the selection. There are many more CSS selectors available, so let’s take a look at them in more detail.
It is encouraging to know that the wast majority of selectors are very well supported by browsers.
Types of CSS selectors
We can divide CSS selectors to the following six groups:
- Simple selectors (select elements based on name/type, id, class)
- Combinator selectors (select elements that we combine and are based on a specific relationship between them – either descendant, child, adjacent sibling or general sibling selector)
- Pseudo-class selectors (select elements based on a certain state, therefore they are called pseudo-class selectors)
- Pseudo-elements selectors (select and style a part of an element, therefore they are called pseudo-elements selectors)
- Attribute selectors (select elements based on an attribute or its value)
- Universal selector (select any and all types of elements)
Let’s take a look at them all in more detail.
Simple selectors: type, class, and ID selectors
CSS selectors by type or name target an HTML element such as an <h1>, <h2>, etc. like so
h1 { }CSS selectors by class target an HTML element with a defined class:
.my-class { }CSS selectors by an ID select an HTML element with a defined ID:
#my-ID { }Combinator selectors or combinators
This group of selectors combines selectors belonging to other groups. Obviously, the aim is to fine-grain the targeting of specifics elements in the document. CSS recognizes four different combinators, which are:
- descendant selector (white space),
- child selector (>),
- adjacent sibling selector (+)
- general sibling selector (~).
Descendant selector
With descendant combinator, we place white space between 2 selectors, in our example div and span. The process of combining these two selectors will look like this: first, we will search for all the elements that match div (the first selector) – this will be our first result, and then we will look for the elements which are the descendants of the elements of our result and elements that match our second selector (in our case span) and we will get our final result. In short, we will target <span> elements that are descended from the <div> elements:
div span {
background: black;
}Child selector
With child selector, we place the sign (>) between two selectors, for example ( article > p ). First, the process will search for all elements that match the first selector, in our case “article” and we will get the first result. Then the process will look for all elements that are the direct children of the elements of the first result and match the second selector, in our case p and we will get the final result. In the example below, we targeted paragraphs that are direct children of <article> elements using the child combinator (>), like so:
article > p { }Adjacent sibling selector
With adjacent sibling selector, we place the plus sign (+) between two selectors and we target an element that is directly after another specific element. So, the first result would be all elements that match the first selector (in our case div), then the process will search for all elements that are “adjacent siblings” of the elements of the first result and match the second selector (elements that are placed immediately after <div> elements), like so:
div + p {
background-color: black;
}General sibling selector
With general sibling selector, we place the hyphen sign (~) between two selectors, so the process of targeting will first target all elements that match the first selector (<div>) and we will get the first results. Then, the process will search for all younger siblings of the first result elements that match the second selector (<p>), and we will get the second result, which is the final result – all elements that are next siblings of a specified element. Our example shows a selection of all
elements that are next siblings of
div ~ p {
background-color: black;
}Pseudo-class and pseudo-element selectors
A CSS pseudo-class selector is a keyword added to a selector that specifies a special state of the selected element. For example, :active can be used to select the active link:
a:active { }Or, another example – :empty pseudo-class selector targets every <p> element that has no children, like so:
p:empty { }You should also get to know pseudo-element selectors, which select a certain part of an element rather than the element itself. For example, ::first-line always selects the first line of some text inside an element (<p> in the below case), acting as if the first formatted line was wrapped around and then selected, like so:
p::first-line { }If you are interested, we had already talked about CSS pseudo-class vs. pseudo-element: how are they similar and what are the differences?.
Attribute selectors
Attribute selectors target elements based on an attribute or value of an element.
- An example of attribute selector, where we select all <a> elements with a title attribute looks like this:
a[title] { }- An example of attribute selector, where we make a selection based on the presence of an attribute with a particular value – in the case below – all <a> elements with a href=”https://website.com” value – looks like this:
a[href="https://website.com"] { }Universal selector
The universal selector is used as a wildcard character because we use it to select any and all types of elements in an HTML page. We use asterisk (*) to specify the universal selector, like so:
* {
property : value;
}We can also use the asterisk to be followed by a selector while using it to select a child object, like in the example below, where the text inside those which are direct children of any elements of HTML the page will become red:
* p { color : red; }