CSS :has() pseudo-class Selector
Last Updated :
03 Feb, 2023
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 that allows for more specific and dynamic styling, and can be used in conjunction with other pseudo-classes and selectors.
The :has() pseudo-class is used by placing it before a selector, followed by the children that the parent element should have. It is also possible to use :not() in conjunction with :has() to select elements that do not have certain children.
Syntax:
:has()
Example 1: The following code will select all div elements that have a p element as a child and give it the respective style which is mentioned in the style tag.
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 Selector
Example 2: The following code will select all div elements that do not have a p element as a child and give it the respective style which is mentioned in the style tag.
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 Selector
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...