CSS Selectors: Types, Pseudo-classes, Pseudo-elements, and Combinators explained

CSS Selectors

CSS selectors are essential tools for styling HTML elements. They allow precise targeting of elements in the DOM, based on type, class, ID, attributes, state, or position.

Main categories of selectors

Simple selectors – select elements based on name, class, or ID
Attribute selectors – select elements based on attributes and their values
Pseudo-classes – select elements in a certain state (hover, focus, etc.)
Pseudo-elements – select part of the content of an element (::before, ::after, etc.)
Combinators – define relationships between elements (child, sibling, etc.)
Multiple selectors – apply styles to several elements simultaneously

1. Simple selectors

Classic example: selecting all p and div elements.

🔧 Simple selectors example

<p>What kind of chocolate do you prefer?</p>
  <div>Dark chocolate.</div>
  <p>I prefer milk chocolate!</p>
  <div>Milk chocolate is good too, but...</div>

  p {
    color: red;
  }

  div {
    color: blue;
  }

Modern selectors: `:is()` and `:where()`

Allow grouping of selectors. :is() keeps specificity, :where() has zero specificity.

🔧 Example :is() and :where()

<h1>Main title</h1>
  <h2>Subtitle</h2>
  <h3>Sub-subtitle</h3>

  :is(h1, h2, h3) {
    font-weight: bold;
    color: teal;
  }

  :where(section, article) {
    padding: 1rem;
    background-color: #f0f0f0;
  }

2. Attribute selectors

Attribute selectors allow targeting elements based on HTML attributes and their values. They are extremely useful in modern applications, especially when using custom data-* attributes.

2.a Exact match

[atr] – selects all elements that have the attribute “atr”
[atr=val] – selects elements where the attribute value is exactly “val”
[atr~=val] – selects elements where the attribute value contains the word “val” in a space-separated list

🔧 Attribute selectors example – 1

<ul>
  <li data-quantity="1kg" data-vegetable>Tomatoes</li>
  <li data-quantity="3" data-vegetable>Onion</li>
  <li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li>
  <li data-quantity="2kg" data-meat>Chicken</li>
  <li data-quantity="optional 150g" data-meat>Bacon</li>
  <li data-quantity="optional 10ml" data-vegetable="liquid">Oil</li>
  <li data-quantity="25cl" data-vegetable="liquid">White wine</li>
</ul>

[data-vegetable] {
  color: green;
}

[data-vegetable="liquid"] {
  background-color: orange;
}

[data-vegetable~="spicy"] {
  color: red;
}

2.b Partial match (substring)

[atr^=val] – value starts with “val”
[atr$=val] – value ends with “val”
[atr*=val] – value contains “val”
[atr|=val] – value is “val” or starts with “val-” (ideal for lang="en-US")

🔧 Attribute selectors example – 2

<ul>
  <li lang="en">Hello</li>
  <li lang="en-US">Good day</li>
  <li data-quantity="optional 150g">Bacon</li>
  <li data-quantity="1kg">Tomatoes</li>
  <li data-vegetable="not spicy like chili">Pepper</li>
</ul>

[lang|="en"] {
  font-weight: bold;
}

[data-quantity^="optional"] {
  color: red;
}

[data-quantity$="kg"] {
  font-weight: bold;
}

[data-vegetable*="not spicy"] {
  color: green;
}

☞ The data-* attributes are useful for storing custom information in HTML. They can be easily accessed with JavaScript and are often used in modern applications.

3. Pseudo-classes

Pseudo-classes are added at the end of selectors with a colon (:) and allow styling of elements in a certain state (e.g., hover, focus, visited).

🔧 Pseudo-classes link example

<a href="https://google.com" target="_blank">Google</a>

a:link {
  color: blue;
  text-decoration: overline;
}

a:visited {
  color: red;
}

a:hover {
  font-weight: bold;
  text-decoration: underline;
}

a:focus,
a:active {
  color: fuchsia;
  text-decoration: none;
}

The order of applying pseudo-classes for links is important: LVHA – :link → :visited → :hover → :active. Changing the order can lead to unpredictable behavior.

☞ Only :link and :visited are dedicated to links. :hover, :focus, and :active are dynamic pseudo-classes and can be used on any HTML element.

🔧 Dynamic pseudo-classes example

<div class="rectangle">Rectangle</div>

.rectangle {
  width: 200px;
  height: 100px;
  margin: 2em auto;
  text-align: center;
  line-height: 100px;
  background-color: limegreen;
}

.rectangle:hover {
  background-color: yellow;
}

.rectangle:focus,
.rectangle:active {
  background-color: coral;
  transform: rotate(15deg);
  outline: 5px dotted green;
}

.rectangle:focus-visible {
  box-shadow: 0 0 0 3px orange;
}

4. Pseudo-elements

Pseudo-elements are similar to pseudo-classes, but are preceded by double colons (::) and allow styling a specific part of an element, such as the first word, line, or adding content before/after.

🔧 Pseudo-elements list

<div class="container">
  <div class="row">
    <div class="column"><p>::before</p><p>::after</p></div>
    <div class="column"><p>::first-letter</p><p>::first-line</p></div>
    <div class="column"><p>::selection</p><p>::marker</p><p>::placeholder</p></div>
  </div>
</div>

* {
  box-sizing: border-box;
  text-align: center;
  background-color: #ddd;
}
.container {
  width: 90%;
  margin: 0 auto;
  color: darkblue;
}
.column {
  font-size: 1.5rem;
  font-weight: bold;
  float: left;
  width: 33.33%;
  padding: 10px;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}

Classic example with ::before and ::after:

🔧 Pseudo-elements example

<ul>
  <li><a href="https://google.com">Google</a> is a search engine.</li>
  <li><a href="https://bing.com">Bing</a> is another search engine.</li>
</ul>

[href^=http]::before {
  content: "🔗 ";
}
[href^=http]::after {
  content: " ⤴";
}

Example with `::marker` and `::placeholder`

🔧 Marker and Placeholder

<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>
<input type="text" placeholder="Enter text here">

li::marker {
  color: crimson;
  font-size: 1.5em;
}
input::placeholder {
  color: gray;
  font-style: italic;
}

5. Combinators and multiple selectors

Combinators define relationships between HTML elements. Using the letters A and B, we can understand how elements are connected to each other:

Name	Syntax	Selects
Multiple selectors	A, B	All A and/or B elements
Descendant	A B	B elements inside A
Direct child	A > B	B elements directly under A
Adjacent sibling	A + B	B element immediately after A
General sibling	A ~ B	All B elements that follow A

🔧 Combinators examples

<table lang="en-US" class="currency">
  <thead>
    <tr><th>Product</th><th>Quantity</th><th>Price</th></tr>
  </thead>
  <tfoot>
    <tr><th colspan="2">Total:</th><td>1500</td></tr>
  </tfoot>
  <tbody>
    <tr><td>Table</td><td>1</td><td>200</td></tr>
    <tr><td>Fridge</td><td>1</td><td>800</td></tr>
    <tr><td>Stove</td><td>1</td><td>500</td></tr>
  </tbody>
</table>
<p>Updated on 05.09.2019</p>

table td, table th {
  border: 1px solid black;
  padding: 0.5em;
}
table thead th {
  background: black;
  color: white;
}
table tbody td + td {
  background-color: antiquewhite;
}
table tbody td:last-child {
  background-color: aqua;
  text-align: right;
}
table tfoot th {
  background-color: aquamarine;
  text-align: right;
}
table th + td {
  background: red;
  color: white;
}
.currency[lang="en-US"] td:last-child::before {
  content: "USD ";
}
.currency[lang="en"] td:last-child::after {
  content: " USD";
}
table ~ p {
  background-color: white;
}

☞ There are some elements like a, button, input and textarea that have a default focus state. We can extend this state to any HTML5 element using tabindex or contenteditable (with caution). The default focus style (dotted outline) comes from the browser's stylesheet and can be customized with CSS, but it must be kept or replaced carefully to maintain accessibility.

🧠 Best practice recommendations

Use pseudo-elements for decoration, not for essential content.
Respect the LVHA order for links: :link → :visited → :hover → :active.
Do not completely remove outline on focus — replace it with something visible.
Test combinators in real contexts to understand DOM relationships.
Use :is() and :where() for efficient grouping of selectors.
Explore :has() for conditional selections (supported in most modern browsers).

🧠 Final Quiz – CSS Selectors

CSS Values and Units ➔