Question

This is a pretty simple question that I can’t quite get my head around.

I have a series of divs like this:

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<p>Paragraph text</p>

<h2>Heading 3</h2>

<p>Paragraph text</p>

In CSS I can target h2 tags that follow from h1 tags with: h1+h2{}, however I can’t seem to use :not() in this way. For example, I’d like to use:

#text h2:not(h1+h2){
    margin-top:3em;
}

But this doesn’t seem to work. Am I doing some sort of stupid syntax error or is this not possible to do?

Answer 1

As mentioned previously, the CSS :not() selector doesn’t allow combinators inside it, so indeed, it’s a syntax error.

In this case, because of the way the + combinator works, you should be able to simply move + h2 out of the :not() and remove the h2 before it, like so:

#text :not(h1) + h2 {
    margin-top: 3em;
}

In case h2 will ever be the first child (which, given your sample, it shouldn’t be), and you want to match that, you need to extend the selector a bit:

#text h2:first-child, #text :not(h1) + h2 {
    margin-top: 3em;
}

Failing either of those two methods, however, you can always use the good ol’ override, as Joseph Silber demonstrates.