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:

<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-2s 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);
}

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:

=someId ~=someId ^=someId $=someId *=someId |=someId

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.

Order Selectors

CSS also allows you to select items based on the order they appear in.

Children

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;
}

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.

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;
}

You have selected..

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;
}

More Tips and Tricks for CSS

• How to do Deletion Animations with CSS
• CSS Media Queries
• Making a CSS Only Minecraft Chicken
• CSS States
• CSS 3d Mosaic Parallax Effect
• How to Animate SVG paths with CSS
• Putting Javascript in Your CSS with Paint Worklets
• Updating CSS Variables with Javascript
• CSS Only Masonry Layouts with Grid
• iOS Crystalline Blurred Backgrounds with CSS Backdrop Filters