pseudo selectors

Question

Is there a pseudo selector or method to detect a <section> tag with an id. IE <section id="no_display"> ?

I have a header and it has a bottom margin of 35px. However, I don't want to apply the bottom margin on one page, but I want to apply it on all others.

Is there a method to detect an id and not apply the margin?

<header>
    //stuff here
</header>
<section id="no_display">
    //other stuff here
</section>

So, if <header> is immediately followed by section id="no_display" , don't apply the bottom margin

Hopefully that makes sense.

Answer 1

You can use negative margin for your section to compensate margin-bottom of its previous sibling element:

#no_display {
    margin-top: -35px;
}

Answer 2

You don't usually use pseudo-classes to express relationships between two or more elements; you use combinators . In this case, you want a preceding-sibling combinator. Unfortunately, that doesn't exist .

What does exist are following-sibling combinators. Since you really only want the margin to be there if section doesn't have that ID, you can switch the bottom margin on header out for a top margin on section , and use an override rule for when it does have the ID to remove the margin from it:

header + section {
    margin-top: 35px;
}

header + section#no_display {
    margin-top: 0;
}

(You really don't need a selector like header + section#no_display since the ID alone is specific enough, but doing this helps me tell at a glance that the second rule is related to the first.)