Guides CSS selectors

CSS selectors

Overview: Building blocks Next

In CSS, selectors are used to target the

HTML elements on our web pages that we
want to style. There are a wide variety of
CSS selectors available, allowing for fine-
grained precision when selecting elements
to style. In this article and its sub-articles
we'll run through the different types in great
detail, seeing how they work.

Basic computer literacy, basic

software installed, basic knowledge
of working with files, HTML basics
Prerequisites:
(study Introduction to HTML), and
an idea of how CSS works (study
CSS first steps.)

To learn how CSS selectors work in

Objective:
detail.

What is a selector?
A CSS selector is the first part of a CSS
Rule. It is a pattern of elements and other
terms that tell the browser which HTML
elements should be selected to have the
CSS property values inside the rule applied
to them. The element or elements which are
selected by the selector are referred to as
the subject of the selector.

In other articles you may have met some

different selectors, and learned that there
are selectors that target the document in
different ways — for example by selecting
an element such as h1 , or a class such as
.special .

In CSS, selectors are defined in the CSS

Selectors specification; like any other part
of CSS they need to have support in
browsers for them to work. The majority of
selectors that you will come across are
defined in the Level 3 Selectors
specification and Level 4 Selectors
specification , which are both mature
specifications, therefore you will find
excellent browser support for these
selectors.

Selector lists
If you have more than one thing which uses
the same CSS then the individual selectors
can be combined into a selector list so that
the rule is applied to all of the individual
selectors. For example, if I have the same
CSS for an h1 and also a class of
.special , I could write this as two separate
rules.

CSS

h1 {
color: blue;
}

.special {
color: blue;
}

I could also combine these into a selector

list, by adding a comma between them.

CSS

h1, .special {
color: blue;
}

White space is valid before or after the

comma. You may also find the selectors
more readable if each is on a new line.

CSS

h1,
.special {
color: blue;
}

In the live example below try combining the

two selectors which have identical
declarations. The visual display should be
the same after combining them.

Type selectors
Veggies es bonus vobis,
proinde vos postulo essum
magis kohlrabi welsh onion
daikon amaranth tatsoi
tomatillo melon azuki bean
garlic.

Gumbo beet greens corn soko

endive gumbo gourd. Parsley
shallot courgette tatsoi pea
sprouts fava bean collard
greens dandelion okra wakame
tomato. Dandelion cucumber
earthnut pea peanut soko
zucchini.

Turnip greens yarrow ricebean

rutabaga endive cauliflower
sea lettuce kohlrabi amaranth
water spinach avocado daikon
napa cabbage asparagus
winter purslane kale. Celery
potato scallion desert raisin
horseradish spinach

Interactive editor

span {
background-color: yellow;
}

strong {
color: rebeccapurple;
}

em {
color: rebeccapurple;
}

<h1>Type selectors</h1>
<p>Veggies es bonus vobis,
proinde vos postulo essum magis
<span>kohlrabi welsh

When you group selectors in this way, if any

selector is syntactically invalid, the whole
rule will be ignored.

In the following example, the invalid class

selector rule will be ignored, whereas the
h1 would still be styled.

CSS

h1 {
color: blue;
}

..special {
color: blue;
}

When combined however, neither the h1

nor the class will be styled as the entire rule
is deemed invalid.

CSS

h1, ..special {
color: blue;
}

Types of selectors
There are a few different groupings of
selectors, and knowing which type of
selector you might need will help you to
find the right tool for the job. In this article's
subarticles we will look at the different
groups of selectors in more detail.

Type, class, and ID selectors

Type selectors target an HTML element
such as an <h1> :

CSS

h1 {
}

Class selectors target an element that has a

specific value for its class attribute:

CSS

.box {
}

ID selectors target an element that has a

specific value for its id attribute:

CSS

#unique {
}

Attribute selectors
This group of selectors gives you different
ways to select elements based on the
presence of a certain attribute on an
element:

CSS

a[title] {
}

Or even make a selection based on the

presence of an attribute with a particular
value:

CSS

a[href="https://example.com"]
{
}

Pseudo-classes and pseudo-

elements
This group of selectors includes pseudo-
classes, which style certain states of an
element. The :hover pseudo-class for
example selects an element only when it is
being hovered over by the mouse pointer:

CSS

a:hover {
}

It also includes pseudo-elements, which

select a certain part of an element rather
than the element itself. For example,
::first-line always selects the first line of
text inside an element (a <p> in the below
case), acting as if a <span> was wrapped
around the first formatted line and then
selected.

CSS

p::first-line {
}

Combinators
The final group of selectors combine other
selectors in order to target elements within
our documents. The following, for example,
selects paragraphs that are direct children
of <article> elements using the child
combinator ( > ):

CSS

article > p {
}

Summary
In this article we've introduced CSS
selectors, which enable you to target
particular HTML elements. Next, we'll take a
closer look at type, class, and ID selectors.

For a complete list of selectors, see our

CSS selectors reference.

Overview: Building blocks Next

Found a content problem with

this page?

Edit the page on GitHub.

Report the content issue.

View the source on GitHub.

Want to get more involved? Learn how

to contribute.

This page was last modified on Sep 25,

2023 by MDN contributors.

Your blueprint for a

better internet.

MDN Support

About Product help

Blog Report an issue

Careers

Advertise with us

Our communities Developers

MDN Community Web Technologies

MDN Forum Learn Web Development

MDN Chat MDN Plus

Hacks Blog

Website Privacy Notice Cookies Legal

Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.

Portions of this content are ©1998–2023 by individual mozilla.org
contributors. Content available under a Creative Commons license.