Breaking News: Grepper is joining You.com. Read the official announcement!

CSS :has()

OHIOLee answered on November 16, 2022 Popularity 10/10 Helpfulness 2/10

answer CSS :has()

related css :has

CSS :has()

Comment

/* :has() - This selector simply checks the presence of some element using its class,
	 Id , tagName etc. */
     
<div class="parent">
  <input type="checkbox" />
  <p>Child</p>
</div>

<style>
.parent:has([type="checkbox"]:checked) p{
  color:red
}
  
  /* It will check whether the parent element has an input with type checkbox and it is
	checked , if it is checked , the color of p tag will be red ,
	else it will be default black. */
  /* NOTE - In case of :has() you don't need to provide a space before it ,
  	you can see it in the example above */
</style>

Popularity 10/10 Helpfulness 2/10 Language html

Source: dev.to

Tags: css html

Link to this answer
Share Copy Link

Contributed on Dec 01 2022

OHIOLee

0 Answers Avg Quality 2/10

Closely Related Answers

css :has

Comment

.container:has(.secret-text) {
	background-color: red
 }

Popularity 10/10 Helpfulness 4/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Nov 16 2022

Quaint Quelea

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

CSS :has()

Contents

More Related Answers

CSS :has()

Closely Related Answers

css :has

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.