Selectors Demo

1. Tag selector

All h2 elements can share one style

This example uses the h2 selector.

h2 {
  color: #7c3f00;
}

2. Class selector

This paragraph uses a class, so the style can be reused anywhere.

.highlight-text {
  color: #2a7f62;
  font-weight: bold;
}

3. ID selector

This line has one unique id for one specific element.

#special-note {
  letter-spacing: 0.5px;
  color: #5b7cfa;
}

4. Descendant selector

.ingredients-demo li {
  margin-bottom: 8px;
}

5. Hover pseudo-class

Hover this link

.demo-link:hover {
  text-decoration: underline;
  color: #a64b00;
}

6. :first-child and :last-child

.child-demo li:first-child {
  color: #7c3f00;
  font-weight: bold;
}

.child-demo li:last-child {
  color: #2a7f62;
  text-decoration: underline;
}

7. ::before and ::after

Generated content can appear before or after an element.

.generated-text::before {
  content: "Before: ";
}

.generated-text::after {
  content: " <- After";
}

8. ::selection

Try selecting this sentence in the browser to see how the selection colors can be styled.

.selection-demo::selection {
  background: #111827;
  color: #ffffff;
}

9. Combined selector

Move the mouse over this card.

.combined-demo:hover li:first-child::after {
  content: " <- hovered card + first item + after";
  color: #d96c6c;
}