CSS

A Guide to CSS Selectors

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:

html Copy
<p>My paragraph</p>
css Copy
p { color: red; }

Class selection

Use a dot . to indicate a class. The below CSS targets any paragraph with the "my-paragraph" class.

html Copy
<p class="my-paragraph">My paragraph</p>
css Copy
.my-paragraph { color: red; }

ID selection

Use a hash # to indicate a class. The below CSS targets a paragraph with the ID "important-paragraph".

html Copy
<p id="important-paragraph">My paragraph</p>
css Copy
#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.

html Copy
<p>My paragraph</p> <span>My span</span> <i>My anything</i>
css Copy
* { color: red; }

Combinations

You can combine these with elements, to find specific elements with specific classes, or IDs. For example, the below CSS will only target the paragraph with class my-item.

html Copy
<p class="my-item">My paragraph</p> <span class="my-item">My span</span> <i class="my-item">My anything</i>
css Copy
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-2s would be styled, as they both occur after item-1.

html Copy
<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>
css Copy
.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:

An item
An item
An item
An item

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.

html Copy
<p> <span> My Span <span>Another Span</span> </span> </p>
css Copy
/* 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'

html Copy
<p data-code="123-123-123">My paragraph</p>
css Copy
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..

data-id=someId
data-id=another-someId
data-id=another-someId-2
data-id=someId-anotherId-thisId
data-id=someId anotherId thisId
data-id=someIdTwo

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.

html Copy
<p> </p><div class="example-selectors"> <div class="item">Item</div> <div class="item">Item</div> </div> <p></p>
css Copy
.example-selectors > div:first-child { color: red; }

Try it out:

You have selected..

1st-child
2nd-child
3rd-child
4th-child
5th-child
6th-child
7th-child

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.

html Copy
<p> </p><div class="example-selectors"> <div class="item">Item</div> <div class="item">Item</div> </div> <p></p>
css Copy
.example-selectors > div:first-of-type { color: red; }

Try it out:

You have selected..

paragraph 1st-child

div 2nd-child

paragraph 3rd-child

div 4th-child
div 5th-child
div 6th-child
div 7th-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.

html Copy
<input type="text" required="">
css Copy
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.

html Copy
<input type="text" required="">
css Copy
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.

html Copy
<input type="number" required="">
css Copy
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.

html Copy
<input type="text" disabled="">
css Copy
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.

html Copy
<input type="text" readonly="">
css Copy
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.

html Copy
<input type="range" min="1" max="10">
css Copy
input:out-of-range { color: red; }
Last Updated Tuesday, 9 March 2021