# > . , * + ~ : { } ( ) [ ]

CSS selectors

A visual reference guide

Originally released in 1994, Cascading Style Sheets (CSS) have become a feature-rich language capable of laying out a webpage, creating complex animations, and much more. These patterns allow web designers to dictate how styles apply to specific HTML elements.

There are many different types of CSS selectors, each with their own unique syntax. Together they tell the browser which elements to apply CSS property values to.

CSS is not a conventional programming language. Its more like a to-do list for the browser: You are saying to the browser, here is a list of things I want you to find. Once the browser finds those things, the CSS instructs the browser to go through the subset list and make changes to those things.

Pick me

Selectors can be broadly divided into six categories:

  1. Universal selector (*)
  2. Individual selector (tag name)
  3. Class (.) and Id (#) selector
  4. Group selector (,)
  5. Combined selector (⎵ > + ~)
  6. Pseudo selector (: or ::)

Universal selector: * { }

a
b
c
d

Selects everything. Useful for resetting styles to flatten browser inconsistencies and provide a stable foundation to build on. Typically starts a stylesheet before custom styles are added.

Individual type selector: a { }

a
b
c

Select elements by type (tag name). In this example, we select all a elements.

ID selector: #a { }

#a
#b
#c

IDs shouldn't be used in selectors because these rules are too tightly coupled with the HTML and have no possibility of reuse. It's preferred instead to use classes in selectors and then apply a class to an element in the page.

Class selector: .a { }

.a
.b
.c

Here is a great primer on using class names to add context to your HTML and create more reusable code.

Comma combinator selector: a, c { }

a
b
c
d

You can condense different CSS selectors with identical declarations into one rule using a comma separated list.

Combine universal selector: a * { }

a
b
c
a
b
a
b

CSS is read right to left.

The selector a * { } can be as read "all elements that are descendants of a element".

Child selector: a > b { }

a
b
c
a
b
a
b

The child selector matches only those elements matched by the second selector that are the direct children of elements matched by the first 🤯

Remember that CSS is read right to left, so here we match all b elements that follow an a element.

Descendant selector: a b { }

a
b
c
a
b
a
b

This means “any b element that is a descendant of an a element.”

Combine descendant & ID selector: #a b { }

#a
b
c
a
b
a
b

Combine the class selector: b.x { }

a.x
b.x
c.x

This means “any b element that has a class ofx.”

Adjacent sibling selector: a + b { }

a
b
b
b

Matches the second element only if it immediately follows the first element, and both are children of the same parent element.

General sibling selector: a ~ b { }

a
b
b
c
b

Selects all elements that are siblings of a specified element. Again, both must be children of the same parent element.

Who's there?

Along with traditional CSS selectors, we also have pseudo-classes and pseudo-elements. Pseudo-classes allow us to define styles based on an element's state or its relation to other elements. Think of things like hovering over a button or selecting the first item in a list. Pesudo-classes start with a colon (:) character .

First child pseudo selector: b:first-child { }

b
b
b

or

a
b
b

first-child

* In the second diagram, the first-child is a element, not b element, so there is nothing to be selected.

Only child pseudo selector:

b:only-child { } or a :only-child { }

a
b
a
a
b
a
a
b
c

Last child pseudo selector: b:last-child { }

b
b
b

or

b
b
c

* In the second diagram, the last-child is c element, not b element, so there is nothing to be selected.

Nth child pseudo selector:

b:nth-child(2) { }

1

2

3

b
b
b

or

1

2

3

a
b
b

or

1

2

3

b
a
b

* In the third diagram, the nth-child(2) is a element, not b element, so there is nothing to be selected.

a :nth-child(2) { }

a
a
b
c

Select the nth-child(2) that is a descendent of an a element.

First of type selector: b:first-of-type { }

a
b
a
b

Nth last child selector:

a :nth-last-child(2) { } or c:nth-last-child(2) { }

a
a
b
c
d

4

3

2

1

a:nth-last-child(2) { } or b:nth-last-child(2) { } or d:nth-last-child(2) { }

a
a
b
c
d

4

3

2

1

* In this diagram, nth-last-child(2) is c element, not b element. So there is nothing to be selected.

Nth of type selector:

a:nth-of-type(2) { }

1

2

3

4

a
b
a
b
a
b
a

a:nth-of-type(even) { }

1

2

3

4

a
b
a
b
a
b
a

a:nth-of-type(odd) { }

1

2

3

4

a
b
a
b
a
b
a

a:nth-of-type(2n+1) { }

1

2

3

4

a
b
a
b
a
b
a

2n+1

* n is an every positive integer or zero value.

Only of type selector: b:only-of-type { }

a
b
a
b
b
a
a
b
c

Last of type selector:

b:last-of-type { }

a
b
b

a :last-of-type { }

a
b
b
b

or

a
b
b
c
c
d

.x:last-of-type { }

a
b
c
b.x
c.x
b.x
c.x

or

a
b.x
c.x
b.x
c.x
b
c

* Those items won’t be selected as no .x is presented

Empty selector: a:empty { }

a
a
a
b
b

🤘

* empty indicates no children elements or text.

Negation pseudo-class selector:

a:not(.x) { }

a
b
a.x
b.x

a:not(:last-of-type) { }

a
b
a
a

Attribute selector:

The [attribute] selector is used to select elements with a specified attribute.

[for] { }

a
a[x]
a[y]
a[z]

This means "Select all elements that have the [for] attribute.

a[for] { }

a
a[x]
b[y]
c[z]

This means "Select all a elements that have the [for] attribute.

Attribute value selector: a[for=“x”] { }

a
a[x]
a[y]
a[z]

This means "Select all elements that have a [for] attribute equal to "x".

Attribute starts selector: [for^=“x”] { }

[x]
[xy]
[yz]
[zx]

Now we're getting funky. The [attribute^=value] selector matches every element whose attribute value begins with a specified value.

Attribute ends selector: [for$=“x”] { }

[x]
[xy]
[yz]
[zx]

Same thing as above, but this time we match elements that end with a specified value.

Attribute wildcard selector: [for*=“x”] { }

[x]
[xy]
[yz]
[zx]

Used to select elements whose attribute value contains the specified substring. This example shows how to use a wildcard to select all elements with a class that contains x. This could be at the start, the end or in the middle of the class.