Apply CSS to object, unless followed by paragraph - css

Question

I was wondering how I could apply CSS to an h2, except when it's directly followed by a paragraph. In that case, apply the CSS to the paragraph.
I've got a few sections, each with it's own title. However, sometimes it's followed by a subtitle. I'm applying a bottom margin to each title, but if there is a subtitle, there shouldn't be a margin between. In that case that bottom margin should be applied to the paragraph beneath the h2.
But.. how do I fix that?
I could give each h2 with a subtitle a class with "gotSubtitle" so I can keep them apart, but that's not the 'smooth' way to do this.

Answer 1

Just did it.
article h2:not(.gotsubtitle){
color: red;
}
<article>
<h2 class='gotsubtitle'>Oi</h2>
<p>Test</p>
</article>
<article>
<h2>Oi</h2>
</article>
Added the class and the :not selector. ;)
Not too smooth, but... Is what we can do with pure CSS.
Another possibility:
With jQuery...
$('article').has('p').addClass('title');
article.title h2{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article>
<h2>Oi</h2>
<p>Test</p>
</article>
<article>
<h2>Oi</h2>
</article>

Answer 2

Try this it will work:
h2.gotSubTitle{
/*apply CSS to an h2*/
}
p + h2.gotSubtitle{
/*apply CSS to an h2 which is directly followed by a paragraph*/
}

Answer 3

Adding class="..." to each element would sure work, but I think the easiest (and still clean) solution would be to pack both the h2 and the paragraph into a div and apply the bottom margin to the div. No condition checking and it should work just as well.
And as asked many times, there is an adjacent sibling selector, but you can't select preceding elements with it, only following ones. However, it is possible to apply the bottom margin to every h2 and then apply the same bottom margin and a negative top margin to the following paragraph element.
While to me that is everything but clean, it requires no modification of your html code.
Here's an example.

Answer 4

var headerTag = document.querySelectorAll("h2");
for(var i = 0; i < headerTag.length; i++){
var nextELement = headerTag[i].nextSibling.nextSibling;
if( (/P/).test(nextELement.tagName)) {
headerTag[i].classList.add("no")}
}
h2{
background:red
}
h2.no{
background: none
}
<section>
<h2>header is following</h2>
<h2>paragraph is following</h2>
<p>i am a paragraph :-)</p>
</section>