ryan's garden

CSS Selectors

3 min read

Universal selector

The universal selector will select elements of any type, hence the name “universal”

* {
  color: purple;
}

Type selector

A type selector (or element selector) will select all elements of the given element type, and the syntax is just the name of the element:

/* styles.css */
p {
  color: white;
}

Class selector

Class selectors will select all elements with the given class, which is just an attribute you place on an HTML element

<!-- index.html -->
<div class="alert-text severe-alert">Please agree to our terms of service.</div>
/* styles.css */
.alert-text {
  color: red;
}
  • Note that we can add multiple classes to a single HTML element, separated by spaces

ID selector

An element can only have one ID. Otherwise similar to Class selector. Use sparingly when specificity is needed

<!-- index.html -->
<div id="title">My Awesome 90's Page</div>
/* styles.css */
#title {
  background-color: red;
}

Grouping selectors

Useful for when groups of elements share some style declarations and we want to reduce repetition. Use a comma-separated list Original

.read {
  color: white;
  background-color: black;
  /* several unique declarations */
}
 
.unread {
  color: white;
  background-color: black;
  /* several unique declarations */
}

Grouped

.read,
.unread {
  color: white;
  background-color: black;
}
 
.read {
  /* several unique declarations */
}
 
.unread {
  /* several unique declarations */
}

Chaining selectors

We can select elements that have all of multiple classes/IDs. Chain without any separating characters

Chaining type selectors

We can’t chain more than one type selector as HTML elements can’t be multiple types

Class selector chaining

Selects any element that has both the subsection and header classes

<div>
  <div class="subsection header">Latest Posts</div>
  <p class="subsection preview">This is where a preview for a post might go.</p>
</div>
.subsection.header {
  color: red;
}

Class and ID chaining 

<div>
  <p class="subsection" id="preview">
    This is where a preview for a post might go.
  </p>
</div>
.subsection#preview {
  color: blue;
}

Combinators

Descendant combinator

Selects elements matching the last selector only if the element has an ancestor that matches the previous selector

.ancestor .child would select an element with the class child if it has an ancestor with the class ancestor

Represented by a single space between selectors

B, C will be selected. D will not be selected 

<!-- index.html -->
<div class="ancestor">
  <!-- A -->
  <div class="contents">
    <!-- B -->
    <div class="contents"><!-- C --></div>
  </div>
</div>
 
<div class="contents"></div>
<!-- D -->
/* styles.css */
.ancestor .contents {
  /* some declarations */
}

Selector order of precedence

When two selectors have the same level of specificity, the rule that is defined last has the most precedence; that is, the last rule overrides any rules before it.

  • task Complete notes on all four combinators

Credit to: The Odin Project

Graph View

Backlinks