Skip to content
Search

CSS:Selectors

lastmod 2025-03-06created 2019-01-1625 edits

Explanation of CSS selectors (Selector)

When consecutive classes appear

.a.b requires both class a and class b to be present: 

.a.b {
  background-color: gold;
}

.c .d finds elements with class b among the descendants of class c: 

.c .d {
  background-color: blue;
}

.e, .f is class e or class f: 

.e, .f {
  background-color: red;
}

CSS Combinators

A combinator (combinators) is something that explains the relationship between selectors (selectors).

A CSS selector can contain one or more simple selectors. Between simple selectors, we can include a combinator (combinator).

Universal Selector

Uses *. Selects all tags in the HTML page. CSS LEVEL is 2. 

* {
  margin: 0;
}

Type Selector

Uses the tag name. CSS LEVEL is 2. 

h1 {
  margin: 0;
}

div {
  margin: 1px;
}

Attribute Selector

  • [attr] - CSS LEVEL 2 - Selects elements with an attribute named attr.
  • [attr=value] - CSS LEVEL 2 - Selects elements whose attribute named attr has a value of exactly value.
  • [attr~=value] - CSS LEVEL 2 - Selects elements whose attribute named attr has a value of exactly value. The attr attribute can contain multiple whitespace-separated values.
  • [attr|=value] - CSS LEVEL 2 - Selects the element if it has an attribute named attr whose value is exactly value, or begins with value immediately followed by a -(U+002D) character. Typically used to check whether language subcodes (en-US, ko-KR, etc.) match.
  • [attr^=value] - CSS LEVEL 3 - Selects the element if it has an attribute named attr whose value contains value as a prefix.
  • [attr$=value] - CSS LEVEL 3 - Selects the element if it has an attribute named attr whose value contains value as a suffix.
  • [attr*=value] - CSS LEVEL 3 - Selects the element if it has an attribute named attr whose value contains at least one occurrence of the string value.
  • [attr operator value i] - Adding i or I before the closing bracket makes the value comparison case-insensitive. (Applies only to characters within the ASCII range)
  • [attr operator value s] - (Experimental) Adding s or S before the closing bracket makes the value comparison case-sensitive. (Applies only to characters within the ASCII range)

ID Selector

Starts with #. CSS LEVEL is 1.

Class Selector

Starts with .. CSS LEVEL is 1.

Descendant Selector

A B (space) - CSS LEVEL 1

Selects all descendants.

Yrkim-140331-selector-descendant.png

Child Selector

A>B - CSS LEVEL 2

Selects only direct children.

Yrkim-140331-selector-child.png

General Sibling Selector

A~B - CSS LEVEL 3

Matches every B that follows A.

Yrkim-140331-selector-general_sibling.png

Adjacent Sibling Selector

A+B - CSS LEVEL 2

B must come immediately after A.

Yrkim-140331-selector-adjacent_sibling.png

Pseudo-elements

Pseudo-class

Multiple class / ID and class selectors

If you want to select the button, gold, and test classes of an a tag, as follows, 

<a href="#" class="button gold test">Test</a>

chain them with . as follows. 

a.button.gold.test {
    color: peachpuff;
}

If you want to select based on ID, as follows, 

<h1 id="one" class="two">This Should Be Red</h1>

you can do the following. 

#one.two { color: red; }

Combined selection like the following is also possible. 

.snippet#header.code.red { color: red; }

See also

Favorite site

References

  1. Understanding_CSS_selectors.pdf ↩

author Zer0 sitemap