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 pseudo-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
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 to 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 make 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 names. 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 more complex selection criteria. A combinator is a character that will instruct the compiler on 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 a 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 are 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 on Educative
- Complete Guide to CSS Positions: element layout in CSS
- CSS Interview Questions: Cheat Sheet for Front-end Interviews
- Revamp Your Front-End Skills: hands-on with HTML5 and CSS3
Start a discussion
Why does web development interest you, and what do you hope to accomplish with it? Was this article helpful? Let us know in the comments below!
Top comments (0)