Modern Selector Functions CSS Tutorial

Introduction

CSS selectors let you choose which HTML elements to style.

You can use simple selectors such as type, class, and ID selectors:

1p {2  color: #333333;3}4 5.card {6  padding: 24px;7}8 9#main-content {10  max-width: 1000px;11}

CSS also has modern selector functions.

These functions let you write more flexible selectors.

Some of the most useful selector functions are:

1:is()2:where()3:not()4:has()

They are written like pseudo-classes, but they accept selectors inside parentheses.

For example:

1:is(h1, h2, h3) {2  line-height: 1.2;3}

This selects all <h1>, <h2>, and <h3> elements.

Another example:

1.card:not(.featured) {2  border: 1px solid #dddddd;3}

This selects cards that do not have the class featured.

Modern selector functions can make CSS shorter, clearer, and more powerful.

However, they should be used carefully because they can also make selectors harder to read if overused.

What Are Selector Functions?

Selector functions are pseudo-class-like selectors that contain other selectors inside parentheses.

Example:

1:is(h1, h2, h3) {2  color: navy;3}

The function is:

1:is()

The selectors inside it are:

1h1, h2, h3

This rule applies to all matching headings.

Selector functions are useful because they let you combine, simplify, or conditionally match selectors.

They can help you write selectors such as:

1.card :is(h2, p, a) {2  margin-top: 0;3}

This selects <h2>, <p>, and <a> elements inside .card.

The Four Functions in This Article

This article focuses on four modern selector functions:

1:is()

1:where()

1:not()

1:has()

A simple overview:

1:is() helps group selector options2:where() helps group selector options with zero specificity3:not() excludes matching elements4:has() selects elements based on what they contain or relate to

Each function solves a different problem.

The :is() Function

The :is() function lets you provide a list of selectors.

If an element matches any selector in the list, it matches :is().

Example:

1:is(h1, h2, h3) {2  line-height: 1.2;3}

This is similar to writing:

1h1,2h2,3h3 {4  line-height: 1.2;5}

Both examples style <h1>, <h2>, and <h3> elements.

The difference is that :is() can be especially helpful when the grouped selectors are part of a longer selector.

Why :is() Is Useful

Without :is(), longer grouped selectors can become repetitive.

Example:

1.card h2,2.card h3,3.card p,4.card a {5  margin-top: 0;6}

This repeats .card several times.

With :is():

1.card :is(h2, h3, p, a) {2  margin-top: 0;3}

This means:

1inside .card, select h2, h3, p, and a elements

The :is() version is shorter and easier to scan.

:is() with Navigation

Imagine this HTML:

1<nav class=”site-nav”>2  <a href=”index.html”>Home</a>3  <a href=”lessons.html”>Lessons</a>4  <button type=”button”>Menu</button>5</nav>

You might want links and buttons in the navigation to share some styles.

Without :is():

1.site-nav a,2.site-nav button {3  font: inherit;4  padding: 10px 12px;5}

With :is():

1.site-nav :is(a, button) {2  font: inherit;3  padding: 10px 12px;4}

This styles both links and buttons inside .site-nav.

:is() with Components

HTML:

1<article class=”card”>2  <h2>CSS Selectors</h2>3  <p>Selectors choose which elements to style.</p>4  <a href=”selectors.html”>Read more</a>5</article>

CSS:

1.card :is(h2, p, a) {2  margin-top: 0;3}

This selects the heading, paragraph, and link inside .card.

You can also combine it with other selectors:

1.card :is(h2, h3):first-child {2  margin-top: 0;3}

This selects an <h2> or <h3> inside .card if it is the first child of its parent.

:is() and Specificity

The specificity of :is() is based on the most specific selector inside it.

Example:

1:is(h1, .title, #main-title) {2  color: navy;3}

Inside the function, the most specific selector is:

1#main-title

Because ID selectors are highly specific, this can make the whole rule more specific than you might expect.

This matters when trying to override styles later.

Use :is() carefully when mixing type, class, and ID selectors.

The :where() Function

The :where() function is similar to :is().

It also accepts a selector list.

Example:

1:where(h1, h2, h3) {2  line-height: 1.2;3}

This selects <h1>, <h2>, and <h3> elements.

The important difference is specificity.

:where() always has zero specificity.

That makes it useful for base styles that should be easy to override.

:where() vs :is()

These two selectors may match the same elements:

1:is(h1, h2, h3) {2  line-height: 1.2;3}

1:where(h1, h2, h3) {2  line-height: 1.2;3}

Both select headings.

The difference is how strong the selector is.

:is() takes the specificity of the most specific selector inside it.

:where() adds no specificity.

This means styles written with :where() are generally easier to override.

Why :where() Is Useful

:where() is useful when you want to write broad base styles without making them difficult to override.

Example:

1:where(h1, h2, h3, p, ul, ol) {2  margin-top: 0;3}

This removes top margin from several common content elements.

Because :where() has zero specificity, later class selectors can override these styles easily.

For example:

1.article-title {2  margin-top: 2rem;3}

The class selector can override the base style without needing a complicated selector.

:where() for Low-Specificity Components

You can use :where() inside component styles.

Example:

1.card :where(h2, p, a) {2  margin-top: 0;3}

This targets headings, paragraphs, and links inside .card.

The .card part still has class specificity.

The :where(h2, p, a) part adds no extra specificity.

This can help keep component styles easier to override.

A more specific rule can still adjust one part later:

1.card .special-link {2  margin-top: 1rem;3}

The :not() Function

The :not() function excludes elements that match a selector.

Example:

1.card:not(.featured) {2  border: 1px solid #dddddd;3}

This means:

1select elements with class=”card”2but not elements that also have class=”featured”

HTML:

1<article class=”card”>Normal card</article>2<article class=”card featured”>Featured card</article>

The first card matches.

The second card does not match because it has the featured class.

:not() with Links

You can use :not() to exclude certain links.

HTML:

1<a href=”about.html”>About</a>2<a href=”https://example.com” class=”external-link”>External</a>

CSS:

1a:not(.external-link) {2  color: navy;3}

This selects links that do not have class="external-link".

You can also use attribute selectors inside :not():

1a:not([target=”_blank”]) {2  text-decoration: underline;3}

This selects links that do not open in a new tab.

:not() with Form Controls

HTML:

1<input type=”text”>2<input type=”email”>3<input type=”checkbox”>4<input type=”radio”>

CSS:

1input:not([type=”checkbox”]):not([type=”radio”]) {2  width: 100%;3}

This selects inputs that are not checkboxes and not radio buttons.

It can be useful when styling text-like inputs.

However, this selector may be harder to read than a positive selector list:

1input[type=”text”],2input[type=”email”],3input[type=”password”],4input[type=”search”] {5  width: 100%;6}

Use :not() when exclusion makes the selector clearer.

Do not use it when a direct positive selector is easier to understand.

:not() with Multiple Selectors

Modern CSS allows multiple selectors inside :not().

Example:

1button:not(.primary, .secondary) {2  border: 1px solid #cccccc;3}

This selects buttons that do not have primary or secondary.

Another example:

1.article-content :not(h1, h2, h3) {2  line-height: 1.6;3}

This selects descendants inside .article-content that are not headings.

Be careful with broad :not() selectors.

They can match more elements than expected.

:not() and Specificity

Like :is(), :not() takes specificity from the most specific selector inside it.

Example:

1.card:not(#featured-card) {2  border: 1px solid #dddddd;3}

The ID selector inside :not() affects specificity.

This can make the rule harder to override.

A simpler class-based approach is often easier:

1.card:not(.featured) {2  border: 1px solid #dddddd;3}

Avoid putting highly specific selectors inside :not() unless you have a clear reason.

The :has() Function

The :has() function selects an element based on what it contains or relates to.

It is often described as a parent-aware selector.

Example:

1.card:has(img) {2  padding: 0;3}

This means:

1select .card elements that contain an img element

HTML:

1<article class=”card”>2  <img src=”photo.jpg” alt=”Example image”>3  <h2>Card with image</h2>4</article>5 6<article class=”card”>7  <h2>Card without image</h2>8</article>

The first card matches.

The second card does not.

Why :has() Is Powerful

Before :has(), CSS could easily select children based on parents:

1.card img {2  max-width: 100%;3}

But it could not easily select a parent based on whether it contained a child.

:has() changes that.

Example:

1form:has(input:invalid) {2  border: 2px solid red;3}

This selects a <form> if it contains an invalid input.

That is powerful because the form is being styled based on the state of something inside it.

:has() with Cards

HTML:

1<article class=”card”>2  <img src=”lesson.jpg” alt=”CSS lesson preview”>3  <h2>CSS Layout</h2>4  <p>Learn layout techniques.</p>5</article>6 7<article class=”card”>8  <h2>CSS Selectors</h2>9  <p>Learn selector patterns.</p>10</article>

CSS:

1.card:has(img) {2  border-top: 4px solid navy;3}

This styles only cards that contain an image.

You can also be more specific:

1.card:has(> img) {2  border-top: 4px solid navy;3}

This selects cards that have an image as a direct child.

:has() with Forms

HTML:

1<form class=”signup-form”>2  <label for=”email”>Email address</label>3  <input type=”email” id=”email” required>4  <button type=”submit”>Subscribe</button>5</form>

CSS:

1.signup-form:has(input:focus) {2  border-color: #0055cc;3}

This styles the form when an input inside it has focus.

Another example:

1.signup-form:has(input:invalid) {2  border-color: red;3}

This styles the form if it contains an invalid input.

Use validation styling carefully because invalid states can appear before the user has interacted with a field.

:has() with Layout

:has() can be useful for layout decisions.

Example:

1.card:has(.card-image) {2  display: grid;3  grid-template-columns: 1fr 2fr;4}

This applies a grid layout only to cards that contain .card-image.

HTML:

1<article class=”card”>2  <img class=”card-image” src=”lesson.jpg” alt=””>3  <div>4    <h2>Card with image</h2>5    <p>Text content.</p>6  </div>7</article>8 9<article class=”card”>10  <h2>Text-only card</h2>11  <p>Text content.</p>12</article>

Only the first card gets the grid layout.

This avoids adding an extra class such as card-with-image.

:has() with Sibling Relationships

:has() can also work with relationships inside its parentheses.

Example:

1h2:has(+ p) {2  margin-bottom: 0.5rem;3}

This selects an <h2> that is immediately followed by a paragraph.

HTML:

1<h2>Section Title</h2>2<p>Intro paragraph.</p>

The heading matches because it has a next sibling paragraph.

This is different from a normal adjacent sibling selector:

1h2 + p {2  margin-top: 0.5rem;3}

The normal adjacent sibling selector styles the paragraph.

The :has(+ p) selector styles the heading.

:has() Can Style Earlier Elements

Most CSS selectors select elements that come after or inside another selector.

:has() can sometimes let you style an earlier element based on a later one.

Example:

1label:has(+ input:required)::after {2  content: ” *”;3}

HTML:

1<label for=”email”>Email address</label>2<input type=”email” id=”email” required>

This selects the label if it is followed by a required input.

The label can then show an asterisk.

This is powerful, but it depends on the exact HTML structure.

If the input is not immediately after the label, the selector will not match.

:has() and Readability

:has() can make CSS very expressive, but it can also become hard to read.

Example:

1.card:has(.media):not(:has(.badge)) > .content:is(section, div) {2  padding: 24px;3}

This may be valid, but it is difficult to understand quickly.

A clearer approach may be to add a class in the HTML:

1<article class=”card card-with-media”>

CSS:

1.card-with-media .content {2  padding: 24px;3}

Use modern selector functions when they make CSS clearer.

Do not use them only because they are clever.

Combining Selector Functions

Selector functions can be combined.

Example:

1.card:is(.featured, .highlighted):not(.disabled) {2  border-color: navy;3}

This means:

1select .card elements2that are featured or highlighted3but not disabled

HTML:

1<article class=”card featured”>Featured card</article>2<article class=”card highlighted”>Highlighted card</article>3<article class=”card featured disabled”>Disabled featured card</article>

The first two cards match.

The disabled featured card does not.

Combined selector functions can be useful, but keep them readable.

:is() vs Grouped Selectors

These are similar:

1h1,2h2,3h3 {4  line-height: 1.2;5}

1:is(h1, h2, h3) {2  line-height: 1.2;3}

For simple top-level grouping, a normal selector list is often clearer.

:is() becomes more useful when avoiding repetition in longer selectors:

1.article-content :is(h2, h3, h4) {2  margin-top: 2rem;3}

Instead of:

1.article-content h2,2.article-content h3,3.article-content h4 {4  margin-top: 2rem;5}

:where() for Resets and Base Styles

Because :where() has zero specificity, it is useful in resets and base styles.

Example:

1:where(h1, h2, h3, p, ul, ol) {2  margin-top: 0;3}

This creates a broad base.

Later styles can override it easily:

1.article-title {2  margin-top: 3rem;3}

A class selector can override the :where() rule because :where() itself adds no specificity.

This makes :where() useful for low-specificity foundations.

:not() for Exceptions

:not() is useful when most elements should be styled except a specific group.

Example:

1.button:not(.button-secondary) {2  background-color: navy;3  color: white;4}

This selects buttons that are not secondary buttons.

However, consider whether a positive selector would be clearer:

1.button-primary {2  background-color: navy;3  color: white;4}

In many component systems, explicit classes such as .button-primary are easier to understand than exclusion-based selectors.

Use :not() for clear exceptions, not as a replacement for good naming.

:has() for Parent-Aware Styling

:has() is useful when a parent or container should change based on its contents.

Example:

1.field:has(input:required) label::after {2  content: ” *”;3}

HTML:

1<div class=”field”>2  <label for=”email”>Email address</label>3  <input type=”email” id=”email” required>4</div>

This adds an asterisk to labels inside fields that contain required inputs.

Without :has(), you might need to add an extra class to the field:

1<div class=”field field-required”>

Both approaches can work.

:has() can reduce extra classes when the relationship is already clear in the HTML.

A Complete Example

HTML:

1<!DOCTYPE html>2<html lang=”en”>3<head>4  <meta charset=”UTF-8″>5  <title>Modern Selector Functions Example</title>6  <link rel=”stylesheet” href=”styles.css”>7</head>8<body>9 10  <main class=”container”>11    <h1>Modern Selector Functions</h1>12 13    <article class=”card featured”>14      <img src=”selectors.jpg” alt=”CSS selector diagram”>15      <div class=”card-content”>16        <h2>Featured Lesson</h2>17        <p>Learn how modern CSS selectors work.</p>18        <a href=”lesson.html”>Read more</a>19      </div>20    </article>21 22    <article class=”card”>23      <div class=”card-content”>24        <h2>Text-Only Lesson</h2>25        <p>This card does not contain an image.</p>26        <a href=”lesson.html”>Read more</a>27      </div>28    </article>29 30    <form class=”signup-form”>31      <div class=”field”>32        <label for=”email”>Email address</label>33        <input type=”email” id=”email” required>34      </div>35 36      <div class=”field”>37        <label for=”name”>Name</label>38        <input type=”text” id=”name”>39      </div>40 41      <button class=”button” type=”submit”>Subscribe</button>42      <button class=”button button-secondary” type=”button”>Cancel</button>43    </form>44  </main>45 46</body>47</html>

CSS:

1/* Low-specificity base styles */2:where(h1, h2, p) {3  margin-top: 0;4}5 6/* Use :is() to reduce repetition inside cards */7.card :is(h2, p, a) {8  margin-bottom: 1rem;9}10 11/* Style cards that contain images */12.card:has(img) {13  border-top: 4px solid navy;14}15 16/* Style non-featured cards */17.card:not(.featured) {18  border: 1px solid #dddddd;19}20 21/* Add a marker to fields that contain required inputs */22.field:has(input:required) label::after {23  content: ” *”;24}25 26/* Shared button styles */27.button {28  padding: 10px 16px;29}30 31/* Style buttons except secondary buttons */32.button:not(.button-secondary) {33  background-color: navy;34  color: white;35}

This example uses all four selector functions in practical situations.

How the Complete Example Works

This rule uses :where() for low-specificity base styling:

1:where(h1, h2, p) {2  margin-top: 0;3}

This rule uses :is() to style several elements inside cards:

1.card :is(h2, p, a) {2  margin-bottom: 1rem;3}

This rule uses :has() to style cards that contain images:

1.card:has(img) {2  border-top: 4px solid navy;3}

This rule uses :not() to style cards that are not featured:

1.card:not(.featured) {2  border: 1px solid #dddddd;3}

This rule uses :has() to mark fields that contain required inputs:

1.field:has(input:required) label::after {2  content: ” *”;3}

This rule uses :not() to style buttons except secondary buttons:

1.button:not(.button-secondary) {2  background-color: navy;3  color: white;4}

Each function helps express a different selector relationship.

Common Mistake: Using :is() When a Normal Selector List Is Clearer

This is fine:

1:is(h1, h2, h3) {2  line-height: 1.2;3}

But this may be clearer:

1h1,2h2,3h3 {4  line-height: 1.2;5}

Use :is() when it reduces repetition or improves readability.

Do not use it just because it is modern.

Common Mistake: Forgetting the Specificity Difference Between :is() and :where()

These can match the same elements:

1:is(h1, h2, h3) {2  margin-top: 0;3}

1:where(h1, h2, h3) {2  margin-top: 0;3}

But :where() has zero specificity.

That makes it easier to override.

Use :where() for low-specificity defaults.

Use :is() when you want normal selector specificity.

Common Mistake: Making :not() Too Broad

This selector can match many elements:

1:not(.card) {2  box-sizing: border-box;3}

It selects every element that is not .card.

That is probably far more than intended.

Better:

1.article > :not(.card) {2  margin-bottom: 1rem;3}

This limits the selector to direct children of .article that are not cards.

When using :not(), keep the context clear.

Common Mistake: Using :has() Instead of Clear HTML Classes

This can work:

1.card:has(img) {2  display: grid;3}

But sometimes a class is clearer:

1<article class=”card card-with-image”>

1.card-with-image {2  display: grid;3}

Use :has() when the relationship is naturally part of the HTML.

Use a class when it makes the component purpose clearer or easier to manage.

Common Mistake: Writing Hard-to-Read Function Selectors

Less readable:

1main:has(.card:not(.disabled):has(img)) :is(h2, h3):not(.small) {2  color: navy;3}

This may be technically possible, but it is hard to understand.

Better:

1.card-with-image .card-title {2  color: navy;3}

Readable CSS is usually better than clever CSS.

Modern selector functions should simplify your code, not make it more obscure.

Common Mistake: Expecting :has() to Ignore Structure

This selector depends on the child structure:

1.card:has(> img) {2  border-top: 4px solid navy;3}

It matches a card with a direct child image:

1<article class=”card”>2  <img src=”photo.jpg” alt=””>3</article>

It does not match if the image is nested deeper:

1<article class=”card”>2  <div>3    <img src=”photo.jpg” alt=””>4  </div>5</article>

If the image can be nested anywhere inside the card, use:

1.card:has(img) {2  border-top: 4px solid navy;3}

Choose the selector based on the actual HTML structure.

Best Practices

Use :is() to reduce repetition in longer selector lists.

Use :where() for low-specificity base styles and defaults.

Use :not() for clear exclusions.

Use :has() when a container should change based on its contents or related elements.

Keep selector functions readable.

Avoid mixing too many conditions in one selector.

Be careful with specificity, especially inside :is() and :not().

Use :where() when you want styles to be easy to override.

Use classes when they communicate purpose more clearly than a complex selector.

Check your selectors in browser developer tools.

Test structure-sensitive selectors such as :has(> img) against your actual HTML.

Summary

Modern selector functions make CSS selectors more flexible.

The :is() function lets you group selector options:

1.card :is(h2, p, a) {2  margin-top: 0;3}

The :where() function also groups selector options, but adds zero specificity:

1:where(h1, h2, p) {2  margin-top: 0;3}

The :not() function excludes matching elements:

1.card:not(.featured) {2  border: 1px solid #dddddd;3}

The :has() function selects elements based on what they contain or relate to:

1.card:has(img) {2  border-top: 4px solid navy;3}

The main idea is simple:

1:is() groups options.2:where() groups options with low specificity.3:not() excludes matches.4:has() selects based on relationships.

Used carefully, these selector functions can make your CSS more expressive, more maintainable, and less repetitive.