"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", figure: "figure", h3: "h3", img: "img", p: "p", pre: "pre", span: "span", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "CSS has evolved a lot over the years. It introduces many new powerful tools that make lives easier. From these tools, today I have picked three of them. We’ll see how :is(), :has(), and :where() pseudo-classes help simplify code, make it more readable, and reduce repetition." }), "\n", _jsx(_components.p, { children: "This article teaches you, what, how, and why of :is(), :where(), and :has() pseudo-classes. You’ll see how we can use these pseudo-classes to design our website by writing less and more optimized code, which can be an excellent practice in software development." }), "\n", _jsxs(_components.p, { children: ["As we will explore pseudo-classes, here is a basic overview in one sentence. In CSS pseudo-class is a rule that applies to an element based on a certain condition or state. Follow this link to ", _jsx(_components.a, { href: "https://programmingly.dev/everything-about-css-pseudo-classes-elements-and-their-use-cases", children: "learn more about pseudo-classes" }), "."] }), "\n", _jsx(_components.h3, { children: "What problem are we resolving?" }), "\n", _jsx(_components.p, { children: "When designing our website using CSS (cascading stylesheet), one thing we all face is code repetition." }), "\n", _jsx(_components.p, { children: "For Example:" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "css", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "css", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: ".card" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " .title" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: ".card" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " .body-content" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: ".card" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " .footer-action" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ..." }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) })] }) }) }), "\n", _jsx(_components.p, { children: "In this example, I have a .card selector that is repeated for each of its child selectors. But simultaneously, you will also see that the same styling is applied to them." }), "\n", _jsx(_components.p, { children: "This is how group selector works normally in CSS by separating each selector with a comma. This code works fine, but my concern here is to avoid repeating and not organized well." }), "\n", _jsx(_components.p, { children: "Another issue that we face here is a CSS specificity issue. By using code like that and too much repetition, sometimes we forget what styling is used where and on what condition. This is where these pseudo-classes play an important role." }), "\n", _jsx(_components.p, { children: "Let’s see each pseudo-class one by one to understand their purpose." }), "\n", _jsx(_components.h3, { children: "Explaining :is() pseudo-class" }), "\n", _jsx(_components.p, { children: ":is() pseudo-class lets you select multiple elements that share the common styles, without repeating the same code. It simplifies selectors by combining them into a single block, reducing redundancy. It takes a list of selectors as an argument and applies styles to all elements that match any of the selectors within that list." }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "css", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "css", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: ".card" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " :is" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: ".title" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: ".body-content" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: ".footer-action" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ..." }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) })] }) }) }), "\n", _jsx(_components.p, { children: "I have used the above example, and you’ll see how easy it is to reduce repetition in our CSS code by grouping with :is() pseudo-class. It keeps code clean and efficient." }), "\n", _jsx(_components.p, { children: "The above example shows we provide .title, .body-content, and .footer-action as an argument to :is() pseudo-class. Before :is() parent container .card is defined to keep its children’s style separate from other code. This is how :is() applies the same styles on all the arguments that match its list." }), "\n", _jsx(_components.p, { children: ":is() pseudo-class is widely used in all major browsers, below image from caniuse.com shows the detailed overview for different versions of browsers:" }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://iukfpyemhzrbbamzihpp.supabase.co/storage/v1/object/public/assets/blog-thumbnail-1753627090127", alt: "caniuse chart" }) }), "\n", _jsx(_components.p, { children: "..." }), "\n", _jsx(_components.h3, { children: "Explaining :where() pseudo-class" }), "\n", _jsx(_components.p, { children: "The :where() pseudo-class is very similar to :is(). We can group multiple selectors to reduce repetition in our code. It takes selectors as an argument. The major difference between :is() and :where() pseudo-class is that, :where() has zero specificity. This means it’s helpful when you want to style elements without adding extra weight to your CSS selector." }), "\n", _jsx(_components.p, { children: "Style defined with :where() pseudo-class can be easily overridden. It means :where() does not add extra specificity in its selectors, and style inside :where() pseudo-class is based on selector’s own specificity." }), "\n", _jsx(_components.p, { children: "The one good use-case for using :where() pseudo-class is to define the base style for multiple elements and you don’t want that style to affect any more specific rules that may override it later." }), "\n", _jsx(_components.p, { children: "This way :where() allows you to apply styles without making your CSS too opinionated about which rules should win in a conflict." }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "css", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "css", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "/* Applying a default style */" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: ":where" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "h1" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "a" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " color" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "red" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "; " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " font-size" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "20" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "px" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "/* More specific style */" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#85E89D" }, children: "a" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " color" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "blue" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " font-size" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "16" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "px" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) })] }) }) }), "\n", _jsx(_components.p, { children: "In the above example, h1, p and a tags are provided as an argument to :where() pseudo-class for base styling. After that a tag which is used as a standalone tag with its styling can easily override the style defined in :where()." }), "\n", _jsx(_components.p, { children: "Like :is(), :where() is also supported in almost all major browsers. See an image below from caniuse.com to check supported browser versions:" }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kzgy5xbt0d6zt24zqnvh.png", alt: "caniuse.com :where() support" }) }), "\n", _jsx(_components.h3, { children: "Explaining :has() pseudo-class" }), "\n", _jsx(_components.p, { children: ":has() is a parent selector. This means it allows you to select a parent element based on the children it contains. This a a huge deal because CSS didn’t allow this kind of behavior before. You can also say that :has() as the if statement of CSS because it fulfills the conditional need." }), "\n", _jsx(_components.p, { children: "Let’s say you want to style a div only if it contains an img. This was not possible with traditional CSS but :has() made it possible." }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "html", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "html", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "<" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "div" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " class" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"card\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "img" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " src" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"https://placeholderjs.com/300x300\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "h1" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Card With Image" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, accusantium." })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "<" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "div" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " class" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"card\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "h1" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Card With Image" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, accusantium." })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "a" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " href" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"#\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Call to Action" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] })] }) }) }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "css", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "css", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: ".card:has" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "a" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " background-color" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "#e6e6e6" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: ".card:has" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "img" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " background-color" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "#979759" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) })] }) }) }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://iukfpyemhzrbbamzihpp.supabase.co/storage/v1/object/public/assets/blog-thumbnail-1753627150508", alt: "card design image" }) }), "\n", _jsx(_components.p, { children: "In this example, you see I have created two div elements with the same .card class, in CSS by using :has() pseudo-class. By using the same .card with :has() pseudo-class, two conditions are given with different styling that you can able to see in the image output." }), "\n", _jsx(_components.p, { children: ":has() is also supported in almost all major browsers. See an image below from caniuse.com to check supported browser versions:" }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xoofkv2yxymqycebibcn.png", alt: "caniuse :has() pseudo-class" }) }), "\n", _jsx(_components.h3, { children: "Conclusion" }), "\n", _jsx(_components.p, { children: "As new features are introduced in CSS, the more power it gains, and allows writing code more readable, efficient, and optimized code. You have learned :is(), :where() and :has() pseudo-classes in this article, and you see how useful they are. These pseudo-classes make our job much easier, they can be easily maintained, and the code is optimized." }), "\n", _jsx(_components.p, { children: "This article is to show you how powerful these features are, and we’re one step closer of using these features in our project. I highly suggest you use features like these to increase your productivity." }), "\n", _jsxs(_components.p, { children: ["This post is originally posted at ", _jsx(_components.a, { href: "https://programmingly.dev", children: "programmingly.dev" }), ". Read full article by following this link: ", _jsx(_components.a, { href: "https://programmingly.dev/write-less-css-with-is-has-where-pseudo-classes/", children: "write less CSS by using :is(), :where(), :has() pseudo-classes" })] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };