Example 1: :is() Pseudo-Class

:is(h1, h2, h3) {
  color: darkblue;
  font-family: Arial, sans-serif;
}
  

✅ This will style all <h1>, <h2>, and <h3> headings at once.

Instead of writing:

h1, h2, h3 {
  color: darkblue;
}
  

You save time with :is().

Real-Time Use Case:

nav :is(a, button) {
  padding: 10px;
  cursor: pointer;
}
  

✅ This applies the same style to both <a> and <button> inside navigation.

Example 2: :has() Pseudo-Class

The :has() pseudo-class is known as the “parent selector” in CSS.

article:has(img) {
  border: 2px solid green;
}
  

✅ Any <article> that contains an <img> will have a green border.

Real-Time Use Case:

form:has(.error) {
  background-color: #ffe6e6;
}
  

✅ If the form contains an element with the class .error, it will show a red background.

Example 3: :where() Pseudo-Class

The :where() pseudo-class works like :is() but with zero specificity.

:where(h1, h2, h3) {
  margin: 0;
  padding: 0;
}
  

✅ This resets heading styles but won’t interfere with more specific styles applied later.

Real-Time Use Case:

:where(p, ul, ol) {
  margin: 0;
  padding: 0;
}
  

✅ This resets <p>, <ul>, and <ol> globally without conflicts.

Why These Pseudo-Classes Are Helpful

1. :is() → Reduces code repetition.
2. :has() → Allows parent-based styling (something CSS lacked before).
3. :where() → Provides safe, low-specificity defaults.

They make CSS more powerful, flexible, and maintainable, especially in large-scale projects.