I want to target an adjacent sibling but only if the first sibling has a particular descendant class.
This is different from "Is there a previous sibling selector?" In this question I'm asking how to target the adjacent sibling. In that question they are asking how to target the previous sibling.
What makes this question different from basic sibling functionality is that I want the selector to only apply IF the previous sibling has a certain descendant class nested in it.
I have a dynamic web site where a particular html page may display in one of two ways (see code block below).
I want to write a css selector that will target the section tag, but only when the previous div has "george" as a descendant class.
Page 1
<div>
<p class="joan">
</p>
</div>
<section>
</section>
Page 2
<div>
<p class="george">
</p>
</div>
<section>
</section>
my css that does not work:
div .george + section {
}
Is there a way to do this with css only? Or do I have to resort to javascript?
I know this would be simple to do if I restructured the html so that <section> was nested inside <div>. This is not the answer that I am looking for because the html structure of the page is not changeable.
