CSS Selectors Cheat Sheet

Share this article

What are CSS Selectors?

A CSS selector is the part of a CSS ruleset that allows you to select the element you want to style by type, attributes, or location within the HTML document. Let’s look at all the different kinds of selectors available, with a brief description of each. Here’s a concise CSS selectors cheat sheet you can refer to as you work.

Types of CSS Selectors

  • Universal: Every element
  • Element Type: A specific type of element, e,g. <button>.
  • ID: An element by its id property, e.g. id="main-content".
  • Class: Select element(s) by their class property, e.g. class="primary-color".
  • Child Combinator: Immediate descendants (children) of an element.
  • General Sibling: General siblings in the HTML.
  • Adjacent Sibling: Immediate siblings in the HTML.
  • Attribute: Based on the presence and/or value of HTML attributes, e.g. [type="text"].
  • Pseudo-Class: Based on the presence of a pseudo-class, e.g. :hover.
  • Pseudo-Element: For pseudo-elements, e,g, the :before element.

Universal CSS Selector

The universal selector works like a wild card character, selecting all elements on a page. Every HTML page is built on content placed within HTML tags. Each set of tags represents an element on the page. Look at the following CSS example, which uses the universal selector:
* {
   color: green;
   font-size: 20px;
   line-height: 25px;
}
The three lines of code inside the curly braces (color, font-size, and line-height) will apply to all elements on the HTML page. As seen here, the universal selector is declared using an asterisk. You can also use the universal selector in combination with other selectors.

Element Type CSS Selector

Also referred to simply as a “type selector,” this selector must match one or more HTML elements of the same name. Thus, a selector of nav would match all HTML nav elements, and a selector of <ul> would match all HTML unordered lists, or <ul> elements. The following example uses an element type selector to match all <ul> elements:
ul {
   list-style: none;
   border: solid 1px #ccc;
}
To put this in some context, here’s a section of HTML to which we’ll apply the above CSS:
<ul>
  <li>Fish</li>
  <li>Apples</li>
  <li>Cheese</li>
</ul>

<div class="example">
  <p>Example paragraph text.</p>
</div>

<ul>
  <li>Water</li>
  <li>Juice</li>
  <li>Maple Syrup</li>
</ul>
There are three main elements making up this part of the page: Two <ul> elements and a <div>. The CSS will apply only to the two <ul> elements, and not to the <div>. Were we to change the element type selector to use <div> instead of <ul>, then the styles would apply to the <div> and not to the two <ul> elements. Also note that the styles will not apply to the elements inside the <ul> or <div> elements. That being said, some of the styles may be inherited by those inner elements.

ID CSS Selector

An ID selector is declared using a hash, or pound symbol (#) preceding a string of characters. The string of characters is defined by the developer. This selector matches any HTML element that has an ID attribute with the same value as that of the selector, but minus the hash symbol. Here’s an example:
#container {
   width: 960px;
   margin: 0 auto;
}
This CSS uses an ID selector to match an HTML element such as:
<div id="container"></div>
In this case, the fact that this is a <div> element doesn’t matter—it could be any kind of HTML element. As long as it has an ID attribute with a value of container, the styles will apply. An ID element on a web page should be unique. That is, there should only be a single element on any given page with an ID of container. This makes the ID selector quite inflexible, because the styles used in the ID selector rule set can be used only once per page. If there happens to be more than one element on the page with the same ID, the styles will still apply, but the HTML on such a page would be invalid from a technical standpoint, so you’ll want to avoid doing this. In addition to the problems of inflexibility, ID selectors also have the problem of very high specificity.

Class CSS Selector

The class selector is the most useful of all CSS selectors. It’s declared with a dot preceding a string of one or more characters. Just as is the case with an ID selector, this string of characters is defined by the developer. The class selector also matches all elements on the page that have their class attribute set to the same value as the class, minus the dot. Take the following rule set:
.box {
   padding: 20px;
   margin: 10px;
   width: 240px;
}
These styles will apply to the following HTML element:
<div class="box"></div>
The same styles will also apply to any other HTML elements that have a class attribute with a value of box. Having multiple elements on a single page with the same class attribute is beneficial, because it allows you to reuse styles, and avoid needless repetition. In addition to this, class selectors have very low specificity—again, more on this later. Another reason the class selector is a valuable ally is that HTML allows multiple classes to be added to a single element. This is done by separating the classes in the HTML class attribute using spaces. Here’s an example:
<div class=”box box-more box-extended”></div>

Descendant Combinator

CSS selector combinators combine selectors for precision targeting. The descendant selector or, more accurately, the descendant combinator lets you combine two or more selectors so you can be more specific in your selection method. For example:
#container .box {
   float: left;
   padding-bottom: 15px;
}
This declaration block will apply to all elements that have a class of box that are inside an element with an ID of container. It’s worth noting that the .box element doesn’t have to be an immediate child: there could be another element wrapping .box, and the styles would still apply. Look at the following HTML:
<div id="container">
  <div class="box"></div>

  <div class="box-2"></div>
</div>

<div class="box"></div>
If we apply the CSS in the previous example to this section of HTML, the only element that’ll be affected by those styles is the first <div> element that has a class of box. The <div> element that has a class of box-2 won’t be affected by the styles. Similarly, the second <div> element with a class of box won’t be affected because it’s not inside an element with an ID of container. You should be careful when using the descendant combinator in your CSS. This kind of selector, while making your CSS a little easier to read, can unnecessarily restrict your styles to a specific context—in this case, the styles are restricted to boxes inside of #container—which can make your code inflexible.

Child Combinator

A selector that uses the child combinator is similar to a selector that uses a descendant combinator, except it only targets immediate child elements:
#container > .box {
   float: left;
   padding-bottom: 15px;
}
This is the same code from the descendant combinator example, but instead of a space character, we’re using the greater-than symbol (or right angle bracket.) In this example, the selector will match all elements that have a class of box and that are immediate children of the #container element. That means, unlike the descendant combinator, there can’t be another element wrapping .box—it has to be a direct child element. Here’s an HTML example:
<div id="container">
  <div class="box"></div>

  <div>
    <div class="box"></div>
  </div>
</div>
In this example, the CSS from the previous code example will apply only to the first <div> element that has a class of box. As you can see, the second <div> element with a class of box is inside another <div> element. As a result, the styles will not apply to that element, even though it too has a class of box
. Again, selectors that use this combinator can be somewhat restricting, but they can come in handy—for example, when styling nested lists.

General Sibling Combinator

A selector that uses a general sibling combinator matches elements based on sibling relationships. That is to say, the selected elements are beside each other in the HTML.
h2 ~ p {
   margin-bottom: 20px;
}
This type of selector is declared using the tilde character (~). In this example, all paragraph elements (<p>) will be styled with the specified rules, but only if they are siblings of <h2> elements. There could be other elements in between the <h2> and <p>, and the styles would still apply. Let’s apply the CSS from above to the following HTML:
<h2>Title</h2>
<p>Paragraph example.</p>
<p>Paragraph example.</p>
<p>Paragraph example.</p>
<div class="box">
  <p>Paragraph example.</p>
</div>
In this example, the styles will apply only to the first three paragraph elements. The last paragraph element is not a sibling of the <h2> element because it sits inside the <div> element.

Adjacent Sibling Combinator

A selector that uses the adjacent sibling combinator uses the plus symbol (+), and is almost the same as the general sibling selector. The difference is that the targeted element must be an immediate sibling, not just a general sibling. Let’s see what the CSS code for this looks like:
p + p {
   text-indent: 1.5em;
   margin-bottom: 0;
}
This example will apply the specified styles only to paragraph elements that immediately follow other paragraph elements. This means the first paragraph element on a page would not receive these styles. Also, if another element appeared between two paragraphs, the second paragraph of the two wouldn’t have the styles applied. So, if we apply this selector to the following HTML:
<h2>Title</h2>
<p>Paragraph example.</p>
<p>Paragraph example.</p>
<p>Paragraph example.</p>

<div class="box">
  <p>Paragraph example.</p>
  <p>Paragraph example.</p>
</div>
…the styles will apply only to the second, third, and fifth paragraphs in this section of HTML.

Attribute CSS Selector

The attribute selector targets elements based on the presence and/or value of HTML attributes, and is declared using square brackets:
input[type="text"] {
   background-color: #444;
   width: 200px;
}
There should not be a space before the opening square bracket unless you intend to use it along with a descendant combinator. The above CSS would match the following element:
<input type="text">
But it wouldn’t match this one:
<input type="submit">
The attribute selector can also be declared using just the attribute itself, with no value, like this:
input[type] {
   background-color: #444;
   width: 200px;
}
This will match all input elements with an attribute of type, regardless of the value. You can also use attribute selectors without specifying anything outside the square brackets (thus targeting based on the attribute alone, irrespective of the element). It’s also worth noting that, when using values, you have the option to include quotes (single or double,) or not.

Pseudo-class CSS Selector

A pseudo-class uses a colon character to identify a pseudo-state that an element might be in—for example, the state of being hovered, or the state of being activated. Let’s look at a common example:
a:hover {
   color: red;
}
In this case, the pseudo-class portion of the selector is the :hover part. Here we’ve attached this pseudo-class to all anchor elements (a elements). This means that when the user hovers their mouse over an a element, the color property for that element will change to red. This type of pseudo-class is a dynamic pseudo-class, because it occurs only in response to user interaction—in this case, the mouse moving over the targeted element. It’s important to recognize that these types of selectors do not just select elements; they select elements that are in a particular state. For the purposes of this example, the state is the “hover” state. Other popular pseudo-classes include:
  • :visited: matches visited links
  • :target: matches an element targeted by a document URL
  • :first-child: targets the first child element
  • :nth-child: selects specific child elements
  • :empty: matches an element with no content or child elements
  • :checked: matches a toggled-on checkbox or radio button
  • :blank: styles an empty input field
  • :enabled: matches an enabled input field
  • :disabled: matches a disabled input field
  • :required: targets a required input field
  • :valid: matches a valid input field
  • :invalid: matches an invalid input field
  • :playing: targets a playing audio or video element
  • :is: a native CSS solution for nesting styles
  • :has: Identical to :is but differs with specificity.
  • :where: similar syntax to :is() and :where(), but it targets an element which contains a set of others

Pseudo-element CSS Selector

Finally, CSS has a selector referred to as a pseudo-element and, used appropriately, it can be very useful. The only caveat is that this selector is quite different from the other examples we’ve considered. Let’s see a pseudo-element in context:
.container:before {
   content: "";
   display: block;
   width: 50px;
   height: 50px;
   background-color: #141414;
}
This example uses one kind of pseudo-element, the :before pseudo-element. As the name suggests, this selector inserts an imaginary element into the page, inside the targeted element, before its contents.  

Frequently Asked Questions (FAQs) about CSS Selectors

What are the different types of CSS selectors and how are they used?

CSS selectors are patterns used to select the elements you want to style. There are several types of CSS selectors, each with a unique purpose. The most basic ones are the element selector, the id selector, and the class selector. The element selector selects elements based on the element name. The id selector uses the id attribute of an HTML element to select a specific element. The class selector selects elements with a specific class attribute. There are also more advanced selectors like the attribute selector, pseudo-class selector, and pseudo-element selector. These allow for more specific and complex selections.

How can I combine CSS selectors?

CSS selectors can be combined to create more specific selections. For example, you can combine an element selector with a class selector to select all elements of a certain type that also have a certain class. This is done by writing the element name followed by a dot and the class name. For example, “p.red” would select all paragraph elements with the class “red”. You can also combine selectors in other ways, such as selecting elements that are descendants of another element, or selecting elements that are adjacent to another element.

What are pseudo-classes and pseudo-elements in CSS selectors?

Pseudo-classes and pseudo-elements are special types of selectors that allow you to style specific parts of an element or elements in certain states. Pseudo-classes are used to select elements based on their state, such as whether they are being hovered over, or whether they are the first child of their parent element. Pseudo-elements, on the other hand, allow you to style specific parts of an element, such as the first letter or line of a text block.

How do I use attribute selectors in CSS?

Attribute selectors in CSS allow you to select elements based on their attributes. For example, you can select all elements with a certain attribute, or all elements where the attribute has a certain value. This is done by writing the attribute name in square brackets after the element name. For example, “input[type=’text’]” would select all input elements with the type attribute set to “text”.

What is the difference between a class selector and an id selector?

The main difference between a class selector and an id selector is that a class can be used on multiple elements, while an id should be unique and used on only one element. This means that you can use a class to style multiple elements in the same way, while an id is used to style a specific element. Another difference is that an id has a higher specificity than a class, which means that if both are applied to the same element, the styles from the id will override the styles from the class.

How does CSS selector specificity work?

CSS selector specificity is a set of rules that determine which styles are applied when multiple conflicting styles are applied to the same element. The basic rule is that the more specific a selector is, the higher its specificity, and the more likely it is to override other styles. For example, an id selector has a higher specificity than a class selector, and a class selector has a higher specificity than an element selector.

Can I use CSS selectors to select elements based on their content?

Yes, you can use the :contains() pseudo-class to select elements based on their content. This pseudo-class selects elements that contain a certain text. For example, “p:contains(‘Hello’)” would select all paragraph elements that contain the word “Hello”.

What are the performance implications of using complex CSS selectors?

Using complex CSS selectors can have performance implications, as it takes more time for the browser to match these selectors to the elements on the page. However, in most cases, the impact on performance is negligible and should not be a concern unless you are dealing with very large and complex web pages.

How can I test my CSS selectors?

You can test your CSS selectors using the browser’s developer tools. Most modern browsers have a feature that allows you to inspect an element and see which CSS rules are applied to it. You can also use this tool to experiment with different selectors and see how they affect the selected element.

Can I use CSS selectors to select elements in other languages like SVG?

Yes, you can use CSS selectors to select elements in other languages that are embedded in your HTML document, like SVG. The syntax is the same as for HTML elements. However, not all CSS properties are applicable to SVG elements, so you need to be aware of the specific styling capabilities of SVG.

Adam RobertsAdam Roberts
View Author

Adam is SitePoint's head of newsletters, who mainly writes Versioning, a daily newsletter covering everything new and interesting in the world of web development. He has a beard and will talk to you about beer and Star Wars, if you let him.

css selectors
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week