Is there a way to select an element only when two Selector true without javascript?

Question

I need to know if, with CSS, you can use two selectors at the same time as an if condition.

For example, I would like to change color of a element only when that is :active at the same time as a sibling element is :hover.

Unfortunately I need to do it only with CSS, I hope it is possible.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

More or less what you said, specifically if <p> is an .inner sibling node, .inner should change only when it had :active meanwhile you hovered on the <p> tag

:active is applied upon clicking so click the text

.container {
  padding-top:30px;
  width:300px;
  height:100px;
  border:1px solid grey;
}

.inner {
  width: 150px;
  height:70px;
  border:1px solid green;
  margin:0 auto;
  display:block;
  text-align:center;
}

.inner:active p:hover { 
  color:red;
  cursor:pointer;
}

<div class="container active"> 
 <div class="inner">
  <p> I am some text, click me </p>
 </div>
</div>

Is there a way to select an element only when two Selector true without javascript?

Sign up