What are CSS Selectors?

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.

In this article, we’ll see how to implement all the most useful CSS selectors, from basic to advanced pseudo-selectors.

Let’s get started!

An external stylesheet is a separate file from your HTML document. To link the two, you will need to add a 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 make 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 padding of 0.

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

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

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 shortcodes 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:

• 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

Conclusion

I hope you’ve found this article useful. I certainly had a lot of fun brushing up on my CSS selector skills and playing around with the various possibilities. There are a lot of cool things you can do now using pure CSS, which is exciting for designers who can do some pretty advanced styling and animation in pure CSS, and all without a single line of JavaScript in sight. Happy styling!