Apply CSS to object, unless followed by paragraph

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.

There isn't a parent selector in css, which is what you'd need. javascript would be your best bet — atmd, Jan 28 '15 at 15:23
Actually, using classes to style certain elements and not others is *in fact* the smooth and intended way to achieve that kind of behavior. That's the whole point of classes :-) — TylerH, Jan 28 '15 at 15:36

rafaeldefazio · Answer 1 · 2015-01-28T15:40:45.687

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>

score 0 · Answer 2 · answered Jan 28 '15 at 15:40

0

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*/
}

answered Jan 28 '15 at 15:40

rajesh

1,475
10
23

score 0 · Answer 3 · edited May 23 '17 at 11:57

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.

score 0 · Answer 4 · answered Jan 28 '15 at 15:54

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>

Apply CSS to object, unless followed by paragraph

4 Answers4

Another possibility: