A Guide to CSS Selectors
📣 Sponsor
The Basics
There are four really fundamental CSS selectors which are the most common that you will see. Those are class, star, element and ID selection.
Element selection
Type the HTML tag to target specific HTML tags with CSS, for example:
<p>My paragraph</p>
p {
color: red;
}
Class selection
Use a dot .
to indicate a class. The below CSS targets any paragraph with the "my-paragraph" class.
<p class="my-paragraph">My paragraph</p>
.my-paragraph {
color: red;
}
ID selection
Use a hash #
to indicate a id. The below CSS targets a paragraph with the ID "important-paragraph".
<p id="important-paragraph">My paragraph</p>
#important-paragraph {
color: red;
}
Star selection
Use a star *
to select every single HTML element on a webpage. Below, the CSS applies to all HTML on your webpage.
<p>My paragraph</p>
<span>My span</span>
<i>My anything</i>
* {
color: red;
}
Combinations
You can combine these selectors to find specific elements with specific classes, or IDs. For example, the below CSS will only target the paragraph with class my-item
. Although you can write p#myId
or .myClass
, .myClassp
would not work, since the p
is not separated from the class name itself.
<p class="my-item">My paragraph</p>
<span class="my-item">My span</span>
<i class="my-item">My anything</i>
p.my-item {
color: red;
}
Siblings and Direct Children
When we want to get a bit more specific, we can select elements based on their position within the HTML.
Sibling Selectors
Using a +
selects the immediate next element, while a ~
will select any element matching after the first mentioned element. With CSS, you can only select next siblings, and not previous siblings.
The below will only affect the second div labeled item-2
, since it is item-1
's immediate sibling. If we switched to a ~
, both item-2
s would be styled, as they both occur after item-1
.
<div class="item-1 item">An item</div>
<div class="item-2 item">An item</div>
<div class="item-3 item">An item</div>
<div class="item-2 item">An item</div>
.item-1 + .item-2 {
transform: scale(1.1);
box-shadow: 0 0 0 1px #00000024, 0 0 0 5px #1629bd6b;
background: linear-gradient(-135deg, #ffb50f, #ff4a04);
}
Try it out:
Child selection
In CSS, we can also select items which are the children of other elements. For example, p span
will only select spans who are within p elements.
The previous example will select any span found, even if it is a child's child. If we only want to select direct children, we can do that by typing p > span
.
<p>
<span>
My Span
<span>Another Span</span>
</span>
</p>
/* Selects both 'My Span' and 'Another Span' */
p span {
color: blue;
}
/* Selects only 'My Span' */
p > span {
color: red;
}
Selection by Attributes
Although class and ID selection are built in, you can also select any element by any attribute using attribute selection. This uses the square bracket notation, i.e. p[attr]
. Note, that you can still use class and id in attribute selection, i.e. p[class]
.
Select if it has an attribute
Use square brackets. The below will select any p element with the attribute 'data-code'
<p data-code="123-123-123">My paragraph</p>
p[data-code] {
color: red;
}
Select if attribute equals or partially something
There are a number of different ways to select elements based on the value of a particular attribute.
Syntax | Description |
p[data-id="someId"] | Selects a paragraph with the attribute "data-id" equal to someId. |
p[data-id~="someId"] | Selects a paragraph with the attribute "data-id" is a list of space separated values, one of which is 'someId'. For example data-id="someId anotherId thisId" . |
p[data-id^="someId"] | Selects a paragraph with the attribute "data-id" beginning with "someId", i.e. "someId-1". |
p[data-id$="someId"] | Selects a paragraph with the attribute "data-id" ending with "someId", i.e. "1-someId". |
p[data-id*="someId"] | Selects a paragraph with the attribute "data-id" containing "someId", i.e. "this-someId-2". |
p[data-id|="someId"] | Selects a paragraph with the attribute "data-id" is a list of hyphen separated values, one of which is "someId". For example data-id="someId-anotherId-thisId" . |
Try it out:
You have selected..
State Selection
CSS also allows you to select items based on the state they are currently in. For example, an item can be hovered over, so it is said to be in the hover state.
Syntax | Description |
a:link | Selects an element which has a hyperlink which has not been visited yet. |
a:visited | Selects an element which has a hyperlink which has been visited yet. |
a:target | Selects an element which has a hyperlink which is the current page. |
a:active | Selects an element which is actively being clicked or touched. |
a:hover | Selects an element which is being hovered over by the mouse. |
a:focus | Selects an element which is being focused upon, i.e. an input, or an element selected by tab. |
Order Selectors
CSS also allows you to select items based on the order they appear in.
Children
Syntax | Description |
div:first-child | Selects any div's which are the first child of a parent element. |
div:last-child | Selects any div's which are the last child of a parent element. |
div:last-child | Selects any div's which are the only child of a parent element. |
div:nth-child(n) | Selects any div's which are the nth child of a parent element, where n can be a number of a calculation using n, i.e. 2n+1 . |
div:nth-last-child(n) | Selects any div's which are the nth last child of a parent element, where n can be a number of a calculation using n, i.e. 2n+1 . |
For example, the following will only target a div which is the immediate first child of an element with the class .example-selectors
.
<p>
</p><div class="example-selectors">
<div class="item">Item</div>
<div class="item">Item</div>
</div>
<p></p>
.example-selectors > div:first-child {
color: red;
}
Try it out:
You have selected..
Of Type Selectors
As well as child selectors, CSS allows us to select elements which are of a specific element type, i.e. the first div within an element. The reason we have both child and type selectors, is an element can have different tags within it, so the first child may be an h1, but the div:first-of-type may not necessarily be the first child.
Syntax | Description |
div:first-of-type | Selects a div which is the first div amongst its siblings. |
div:last-of-type | Selects a div which is the last div amongst its siblings. |
div:only-of-type | Selects a div which is the only div amongst its siblings. |
div:nth-of-type(n) | Selects any div's which are the nth of its type amongst its sivlings, where n can be a number of a calculation using n, i.e. 2n+1 . |
div:nth-last-of-type(n) | Selects any div's which are the nth last of its type amongst its sivlings, where n can be a number of a calculation using n, i.e. 2n+1 . |
For example, the following will only target a div which is the first div within .example-selectors
.
<p>
</p><div class="example-selectors">
<div class="item">Item</div>
<div class="item">Item</div>
</div>
<p></p>
.example-selectors > div:first-of-type {
color: red;
}
Try it out:
You have selected..
paragraph 1st-child
paragraph 3rd-child
Input and UI Selector
As well as states for HTML elements, there are a number of elements which are specific to UI elements, mostly inputs and textareas. Along with these, :focus, which we previously mentioned, is frequently used to highlight focused form input elements.
:optional/:required
It is common to have required inputs in a form. We usually mark these with the required tag. These CSS selectors select inputs which are specifically required, or optional.
<input type="text" required>
input:required {
color: red;
}
:optional/:required
It is common to have required inputs in a form. We usually mark these with the required tag. These CSS selectors select inputs which are specifically required, or optional.
<input type="text" required>
input:required {
color: red;
}
Other useful selectors
:root
:root is a special selector which is mostly used for defining CSS variables. It selects the root of the document, which is the html
tag in an HTML document.
:valid/:invalid
Inputs can have valid and invald inputs. For example, an input of type number cannot have text entered into it. If text was entered into it, the input would be invalid, and therefore we could use the :invalid
selector.
<input type="number" required>
input:invalid {
border: 1px solid red;
}
:checked
Some inputs can be checked, such as checkboxes. If we want to select an input which has been checked and style it differently, we can use the :checked
selector.
:enabled/:disabled
All inputs can be disabled, which is useful when someone has entered something into a form which disables another question. When something is disabled, it is normal to style it differently - i.e. to reduce its opacity. Disabled elements can be selected with these selectors.
<input type="text" disabled>
input:disabled {
opacity: 0.5
}
:read-only/:read-write
Similarly, an input can be marked as read-only, and we can target that with these selectors.
<input type="text" readonly>
input:read-only {
opacity: 0.5
}
:in-range/:out-of-range
Some inputs accept ranges of values, such as a range input element. If the range goes from 1 to 10, but a user provides a value of 11, we can style the input differently using these selectors.
<input type="range" min="1" max="10">
input:out-of-range {
color: red;
}