Menu
I also want to change the background-color of "three" to "lightblue", but only if the class-combination "one current" exists on the page. Note: "three" can't get an additional class. I know, you can do this with JavaScript, but is there also a native CSS solution?
Here's my example:
<!DOCTYPE html>
<html>
<head>
<style>
.one.current {background-color: lightblue;}
</style>
</head>
<body>
<header>
<p class="one current">The first paragraph.</p>
</header>
<main>
<p class="two">The second paragraph.</p>
<p class="three">The third paragraph.</p>
<p class="four">The fourth paragraph.</p>
</main>
</body>
</html>
972
asked Oct 26 '25 09:10
In your case you could use .one.current in the <header>
Then style .three with:
.one.current ~ main .three
And the <p> element inside the header with:
.one.current p
Documentation about the
~operator: general sibling selector (MDN).
178
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
