CSS Selector Cheat Sheet: Top

selectors for front-end development

Oct 21, 2020 - 6 min read

Christina Kopecky

CSS selectors are used to locate HTML elements you want to style in
your programs. Think of these like patterns or codewords that all
you to specifically search for and modify particular aspects of your
code. Using CSS selectors will speed up your front-end life and make
it far easier to edit code quickly.

Today, we’ll show how to implement all the most useful CSS
selectors, from basic to advanced psuedo-selectors.

Let’s get started!

In this article, we’ll talk about:

What are CSS Selectors

Basic Selectors
Combinator Selectors
Pseudo- Selectors
Attribute Selectors
What to Learn Next

Master CSS all in one place

Learn all the CSS skills that interviewers

are looking for through skimmable and
interactive text-based lessons.

The Complete Advanced Guide to CSS

(https://www.educative.io/courses/the-
complete-advanced-guide-to-css)
What are CSS Selectors

An external stylesheet is a separate file from your HTML document.

To link the two, you will need to add a <link> to the head of your
HTML document that references the CSS file you create.

This external stylesheet will contain individual CSS Rules – blocks of

CSS that contain a CSS Selector and a set of CSS properties called the
declaration block.

The CSS Selector dictates which HTML element apply the properties
to.

body { /* <-- this is the CSS Selector */

text-align: center; /* <-- this is one CSS Property */
margin: 0 auto;
}
 Both the CSS Selector and the declaration block makes up one CSS
Rule. Next, we’ll take a look at some of the common ways to select
HTML elements so you can style your web pages.
| Blog Home (/blog)

Basic Selectors

Universal or ‘Wildcard’ selector

* {
box-sizing: border-box;
}

The universal selector, indicated by the * , selects everything on

the page. A common use of this selector is to indicate the box-sizing
on the page.

Tag Selectors
p {
font-size: 14px;
}

Tag selectors select HTML elements based on their tag. The

example here shows that all p tags will have a font-size of 14px.
Class Selectors

.none {
display: none;
}

Class selectors select HTML elements based on their class name.

The class is selected by using a . symbol. The example here shows
that all elements with the class name of .none will not be displayed.

ID Selectors
#container {
margin: 0 auto;
padding: 0;
}

ID selectors select HTML elements based on their ID. They are

selected using # . The example here shows that the element
#container will have a margin of 0 auto and 0 padding .

Combinator Selectors
Combinator selectors join multiple basic selectors with a
combinator to form a more complex selection criteria. A combinator
is a character that will instruct the compiler how to select an HTML
element. There are four different types:

Descendent Selectors
ul a {
text-decoration: none;
color: black;
cursor: pointer;
}

Sometimes we don’t want to style all of any particular class or tag,

but only the ones inside another element. Descendant selectors use
a space to select a particular descendant of another element. In this
example, we are selecting any tag that is inside an unordered list to
change the text-decoration , color , and cursor .

Child Combinator Selectors

div > p {
font-size: 12px;
color: pink;
}
There are times, we specifically want to select an immediate child of
another element. Child selectors use a > to select a child of another
element. In this example, we are selecting any p tag that is a child
of a div to change the font-size and color.

We can also use target a specific child element using the first-
child or last-child selectors.

p:first-child {
color: red;
}

div p:last-child {

color: red;

Adjacent Sibling Selectors

div + p {
font-size: 12px;
color: pink;
}

We use the + to indicate we want an adjacent sibling element. An

adjacent sibling has the same parent element as the first element
and immediately comes after that first element. The first element
listed in the adjacent sibling selector tells the compiler what to
look for. The second element indicates the item that we are actually
selecting.

Read this example as “Select all p tags that come immediately after
div tags”. In this example, we are selecting any p tag that has the
same parent element as the div tag, where the p tag immediately
comes after the div.

General Sibling Selector

div ~ p {
font-size: 12px;
color: pink;
}

You can use the general sibling selector to select all siblings of an
element. In this example, we are selecting any p tag that is a sibling
of a div to change the font-size and color.

<body>
<p></p> <!-- the CSS selector will select this element beca
use a div tag is one of the siblings. -->
<div></div>
<p></p> <!-- the CSS selector will select this element beca
use a div tag is one of the siblings. -->
</body>
<br>
Pseudo-Selectors

Pseudo-Class Selectors

a:hover {
font-size: 12px;
color: pink;
font-weight: bold;
}

div:nth-child(2) {
background-color: red;
color: white;
font-weight: normal;
}

There are times, we specifically want to style an element when the

state of the element is visited, hovered over, active, in focus, etc. We
can use pseudo-class selectors to style certain elements to be styled
in a certain way based on behavior or placement. Use a colon :
after the element you want to style.

Pseudo-Element Selectors
 div::selection{
font-size: 12px;
background-color: pink;
}

h1::before{
content: 😎;
}
h1::after{
content: 😎;
}

Pseudo-element selectors are very similar to pseudo-class selectors

in the way they are written. If we want the text that a user selects in
a div to be a certain background-color, we can style that using
div::selection .

Note the two colons. This was a change from previous versions
of CSS. Modern CSS uses two colons to better differentiate
between pseudo-class and a pseudo-element.

The ::before and ::after pseudo-selectors have a content

property. That content will be inserted before or after the specified
element. In this example, a 😎 will be inserted before and after an
h1 .

Attribute Selectors
 div[data-tab] {
display: none;
}
div[data-tab=“one”] {
display: block;
background-color: ivory;
}

There are two types of attribute selectors: one that specifies only if
the element has the named attribute and one that specifies the
named attribute and attribute value. This type of selector is
particularly useful if you are using custom attributes in your HTML.

This example targets a div that has the custom attribute data-tab
and sets display to none by default. The next CSS rule is even more
specific when we select the data-tab attribute that has the value of
“one” to display it.

What to learn next

That’s all for our CSS selectors cheat sheet. Learning these short
codes will make your front-end life much easier, as you can search
your code like a pro. Be sure to keep this on hand for your next CSS
project.

If you want to continue learning about CSS selectors, here’s some

next topics to consider:

nth type selectors, ( nth-last-child , nth-of-type , etc.)

 Line selectors ( first-line , last-line )

Advanced selectors ( first-letter , interface-state )

CSS selector best practices

To help you learn these advanced topics, Educative has created the
course The Complete Advanced Guide to CSS
(https://www.educative.io/courses/the-complete-advanced-guide-
to-css). This course teaches you helpful advanced techniques used
by front-end developers every day, all with interactive examples.

By the end, you’ll have not only mastered selectors but other
advanced CSS topics like CSS grid manipulation, custom properties,
dynamic positioning, and more.

Happy learning!

Continue reading about CSS and web

development
Complete Guide to CSS Positions: element layout in CSS
(https://www.educative.io/blog/complete-guide-css-positions)
CSS Interview Questions: Cheat Sheet for Front-end Interviews
(https://www.educative.io/blog/css-interview-questions-cheat-
sheet)
Revamp Your Front-End Skills: hands-on with HTML5 and CSS3
(https://www.educative.io/blog/revamp-front-end-skills)
 WRITTEN BY

Christina Kopecky

Join a community of 500,000 monthly readers. A free, bi-monthly email

with a roundup of Educative's top articles and coding tips.

Full Name

E-mail

Subscribe

(/)

Learn in-demand tech skills in half the time

LEARN SCHOLARSH IPS

Courses For Students

(/explore) (/github-students)

Early Access Courses For Educators

(/explore/early-access) (/github-educators)

Edpresso

(/edpresso)

Blog

(/blog)

Pricing

(/unlimited)

For Business

(/business)

CodingInterview.com

(//codinginterview.com/)

CONTRIBUTE LEGAL

Become an Author Privacy Policy

(/authors) (/privacy)

Become an Af liate Terms of Service

(/af liate) (/terms)

Business Terms of Service

(/enterprise-terms)

MORE

Our Team

(/team)

Careers

(//angel.co/educativeinc/jobs)

For Bootcamps
For Bootcamps

(//try.educative.io/bootcamps)

Blog for Business

(/blog/enterprise)

Quality Commitment

(/quality)

FAQ

(/courses/educative-faq)

Contact Us

(/contactUs)

Copyrigh
©2021
Educative
(//linkedin.com/company/educative- (//www.youtube.com/channel/UCT_8FqzTIr2Q1BOtvX_DPPw/? Inc. All
(//facebook.com/educativeinc) (//twitter.com/educativeinc) (//educativesessions.podbean.com)
inc/) sub_con rmation=1) rights
reserved.