CSS :has() pseudo-class Selector Last Updated : 14 Jun, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report The CSS :has() pseudo-class is a relatively new feature that allows developers to select elements based on their children. It is a powerful tool for more specific and dynamic styling and can be used in conjunction with other pseudo-classes and selectors. The :has() pseudo-class is used to select parent elements that contain specific child elements. This allows for conditional styling based on the presence or absence of certain children. The :not() pseudo-class can also be used in conjunction with :has() to select elements that do not have certain children. Syntax: :has()Usage ExamplesExample 1: Selecting Elements with Specific ChildrenThis example selects all div elements that have a p element as a child and applies a specific style to them. HTML <!DOCTYPE html> <html> <head> <title>CSS :has() Selector</title> <style> body{ text-align: center; display: flex; justify-content: center; align-items:center; flex-direction: column; } div:has(p) { color: green; border: 2px solid green; width: 20vw; } </style> </head> <body> <div> <p>GeeksforGeeks</p> </div> <div> <h1>GeeksforGeeks</h1> </div> </body> </html> Output: CSS :has() pseudo-class SelectorExample 2: Selecting Elements without Specific ChildrenThis example selects all div elements that do not have a p element as a child and applies a specific style to them. HTML <!DOCTYPE html> <html> <head> <title>CSS :has() Selector</title> <style> body{ text-align: center; display: flex; justify-content: center; align-items:center; flex-direction: column; } div:not(:has(p)) { color: green; border: 2px solid green; width: 20vw; } </style> </head> <body> <div> <p>GeeksforGeeks</p> </div> <div> <h1>GeeksforGeeks</h1> </div> </body> </html> Output: CSS :has() pseudo-class SelectorThe :has() pseudo-class in CSS is a highly useful addition for developers looking to apply styles conditionally based on the presence of child elements. Its ability to work in conjunction with other pseudo-classes and selectors makes it a versatile tool for modern web development. Ensure that the target browsers support this feature to avoid compatibility issues. Supported BrowsersThe :has() pseudo-class is supported by the following browsers: Google Chrome (version 105 and above)Edge (version 105 and above)Opera (version 91 and above)Safari (version 15.4 and above)Firefox (not supported as of the latest update) Comment More infoAdvertise with us Next Article CSS Pseudo-classes M maheshgaikwad Follow Improve Article Tags : Web Technologies CSS CSS-Selectors Similar Reads CSS :scope pseudo-class A scope element forms a context for a block of styles. That element provides a reference point for selectors to be matched against. A scope element is defined using the scoped attribute. Styles declared with scoped attributes will be applied to all elements inside its parent element. Syntax: :scope 1 min read CSS Class Selector CSS class selectors are one of the most versatile tools in your front-end development toolkit. They allow you to apply styles to multiple elements on a webpage, ensuring your design remains consistent and easily maintainable.Syntax.class-name{ property: value;}1. Basic class selectorThe basic class 4 min read CSS :where() Pseudo-Class The :where() pseudo-class is helpful for minimization of longer code in a longer CSS selector list. It avoids repetition, just replace multiple selectors with a single one. In :where() pseudo-class you can also override. Syntax: class_Name :where(html-tages) html-tag { /* CSS code */ } Selector with 2 min read CSS :last-child Selector The CSS :last-child selector targets the last child element within its parent. It applies styles exclusively to the last child based on its position within the parent container, regardless of the element type or class. If the parent element is missing or incorrectly structured, the selector will not 2 min read CSS Pseudo-classes A pseudo-class is a keyword added to a CSS selector, prefixed by a colon (:), to define a specific state or condition of an element. It is used to style elements like a hovered button, the first child of a container, or checked input fields.Syntaxselector:pseudo-class { /* styles */}Interactive/User 6 min read CSS :only-child Selector The:only-child selector in CSS is used to match every element that is the only child of its parent. It represents an element without any siblings. Syntax::only-child { // CSS property} Example 1: html<!DOCTYPE html> <html> <head> <title>:only-child selector</title> < 2 min read Like