Being on an summer break, I thought it could be nice to revive some very old questions answering to something with a today perspective.
That's the case here:
In a similar situation, nowadays, you can obtain what you need without using javascript and leaving the html structure in your document just as it is by simply adding a new CSS rule,
making use of the [`:has()` relational pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) which is being supported by all major browsers since the end of 2023 at least ([see](https://caniuse.com/css-has)).
<!-- begin snippet: js hide: false console: true babel: false babelPresetReact: false babelPresetTS: false -->
<!-- language: lang-css -->
/* second-span red when first-span is present */
[first-span] ~ [second-span] {
color: red;
}
/* first-span blue ONLY when second-span is present */
[first-span]:has( ~ [second-span]) {
color: blue;
}
<!-- language: lang-html -->
<p>
<span first-span="">I am #1</span><br>
<span second-span="">I am #2</span>
</p>
<p>
<span first-span="">I am #1</span>
<!-- no second span -->
</p>
<p>
<span second-span="">I am #2</span>
</p>
<!-- end snippet -->
So, in the end, the only missing CSS rule needed here was:
[first-span]:has( ~ [second-span]) {color: blue;}
That's it, simple like that and very easy (...today!)
Being on an summer break, I thought it could be nice to revive some very old questions answering to something with a today perspective.
That's the case here:
In a similar situation, nowadays, you can obtain what you need without using javascript and leaving the html structure in your document just as it is by simply adding a new CSS rule,
making use of the [`:has()` relational pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) which is being supported by all major browsers since the end of 2023 at least ([see](https://caniuse.com/css-has)).
<!-- begin snippet: js hide: false console: true babel: false babelPresetReact: false babelPresetTS: false -->
<!-- language: lang-css -->
div.ttb-panel { /*base element CSS definitions */ background-color: green; }
div.ccm-page:has( > div.ads-top > div.adsbygoogle) + div.ttb-panel { /*special CSS definitions if adsbygoogle class is present */ background-color: red; }
<!-- language: lang-html -->
<div class="ccm-page">
<div class="ads-top">
<div class="adsbygoogle">ads present</div>
</div>
</div>
<div class="ttb-panel">panel</div>
<!-- end snippet -->
So here the needed CSS rules are:
div.ttb-panel { /*base element CSS definitions*/ }
div.ccm-page:has( > div.ads-top > div.adsbygoogle) + div.ttb-panel { /*special CSS definitions if adsbygoogle class is present */ }
In the first CSS rule put the base definitions to apply when `adsbygoogle` class `<div>` is *not* present, in the second one put those to apply when it is.
That's it, simple like that and very easy (...today!)
