Selectors (CSS)

An overview of CSS selectors and how to combine them

Selector types

Type selector

Selects based on HTML element type

h1 {
    color: red;
}

Universal selector

Selects all elements

* {
    color: red;
}

Class selector

Selects elements based on class

.error-text {
    color: red;
}

ID selector

Selects elements based on ID

#main-text {
    color: black;
}

Attribute selector

Select elements based on attributes

[disabled] {
    color: red;
}

Pseudo-class selector

Selects elements that are in a specific state

Typically combined with other selectors (see also below)

a:hover {
    color: red;
}   

Pseudo-classes reference

Special case: the negation pseudo-class

/* matches any element that is not a paragraph */
:not(p) {
  color: blue;
}

Pseudo-element selector

Selects specific part of an element

Typically combined with other selectors

p::first-line {
  text-transform: uppercase;
}

Pseudo-elements reference

Combining selectors

Selector lists using `,`

No effect other than reducing code duplication

Example: before

h1 { 
  color: blue; 
} 

.special { 
  color: blue; 
} 

Example: after

h1, .special { 
  color: blue; 
} 

Same-element combinations

Combine multiple selectors that all need to apply to the same element

Example: select all hyperlinks with class test that the user hovers over

a.test:hover {
    color: red;
}

Descendant combinator

Typically represented by a single space ( ) character

Elements matched by the second selector are selected if they have an ancestor matching the first selector

Example: select all spans that are directly or indirectly inside a div with class test

div.test span {
    color: red;
}

Child combinator

Represented by the > sign

Same as descendant combinator, but only considers the direct parent of an element

Example: select all spans that are a direct child of a div with class test

div.test > span {
    color: red;
}

Adjacent sibling combinator

Represented by the + sign

Matches an element matching the second selector if that element immediately follows an element matching the first selector and they both have the same parent

Example: select all paragraphs that immediately follow an image

img + p {
  color: red;
}

General sibling combinator

Represented by the ~ sign

Matches an element matching the second selector if that element follows an element matching the first selector (but not necessarily immediately) and they both have the same parent

Example: select paragraphs that come after any image with the same parent

img ~ p {
  color: red;
}

#Selector types

#Type selector

#Universal selector

#Class selector

#ID selector

#Attribute selector

#Pseudo-class selector

#Pseudo-element selector

#Combining selectors

#Selector lists using ,

#Same-element combinations

#Descendant combinator

#Child combinator

#Adjacent sibling combinator

#General sibling combinator

#Resources