CSS Selectors Defined

If you’re just getting started with CSS, it’s good to have a fundamental understanding of what we mean when we refer to CSS selectors. In this post I’ll briefly describe all the most well-known CSS selectors along with some examples.

A “selector” is the instruction in a CSS rule set that tells the browser what elements to ‘select’ for styling. Look at the two examples below:

.box {
  background-color: red;
}

form textarea {
  background-color: blue;
}

In each of those examples, the selector is the part of the rule set that appears before the opening curly brace. “.box” is the first selector and “form textarea” is the second selector.

Selectors Defined with Examples

Here is a brief definition of each type of selector, with examples:

Universal Selector
This selector consists of the asterisk character, like this:

* {
  background-color: red;
}

When used on its own like above, this selects every element on the page.

Element Type Selector
Also called just the “type selector”, this selector matches HTML elements by tag name. Two examples:

h2 {
  background-color: red;
}

div {
  background-color: red;
}

Class Selector
This selects an element that matches a class name defined in a class attribute in the HTML.

.element {
  background-color: red;
}

This is easily my favourite selector, and all good CSS developers should use it abundantly. You can put multiple classes separated by spaces on a single class attribute, which makes this selector quite powerful.

ID Selector
This selects an element that matches an id defined in an id attribute in the HTML.

#element {
  background-color: red;
}

Descendant Selector
This selector is defined with a space character separating two selectors, and represents a child element, but not just immediate children, further nested ones as well.

.parent .child {
  background-color: red;
}

Attribute Selector
This selector targets an element based on an HTML attribute and/or attribute value. Both examples below are valid attribute selectors:

div[style] {
  background-color: red;
}

input[type="text"] {
  background-color: red;
}

The first example targets any <div> element that has a “style” attribute. The second example targets any <input> element that has a “type” attribute with a value of “text”.

Child Selector
This selects an element based on it being an immediate child of another element:

.one > .two {
  background-color: red;
}

So this will not style a “.two” element unless it is an immediate child of a “.one” element. It can’t be nested inside another element, it has to be an immediate child element. And only the child is styled, not the parent.

Adjacent Sibling Selector
This selector, which uses the plus sign, targets elements that are “adjacent” to each other, or immediate siblings, and they must have the same parent element.

h2+p {
  background-color: red;
}

General Sibling Selector
This uses the tilde character and is exactly the same as the adjacent sibling selector except the elements don’t have to be immediate siblings.

h2~p {
  background-color: red;
}

Pseudo-class
While technically falling under the category of “selectors”, these are not normally referred to as “selectors”, but just pseudo-classes. These select an element based on a state the element is in. Here are a few examples:

a:visited {
  background-color: red;
}

input:focus {
  background-color: red;
}

Pseudo-element
Again, not normally referred to as a selector, these actually represent elements in the HTML page that are not really part of the rendered HTML:

p:first-letter {
  background-color: red;
}

p:before {
  content: "";
  background-color: red;
}

The “:before” and “:after” pseudo-elements are unique from other pseudo-elements in that they must be used along with the content property. For more on these, see my article on Smashing Magazine.

If you enjoyed this article, you might also like a post I wrote defining a number of different CSS Terms.