CSS Selector Cheat Sheet: Top selectors for front-end development
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
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.
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.
<body>
<div></div>
<p></p> <!-- the CSS selector will select this element because a div tag comes immediately before it. -->
</body>
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 because a div tag is one of the siblings. -->
<div></div>
<p></p> <!-- the CSS selector will select this element because 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:
-
nthtype 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. 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#
Free Resources
