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.
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>