pseudo selectors

Question

Is there a pseudo selector or method to detect a <section> tag with an id. I.E. <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.

In this case you want a preceding sibling selector, not a pseudo-class. And no, that doesn't exist. — BoltClock, Nov 10 '12 at 01:53
@BoltClock - ok, thanks. Any other CSS ideas for a workaround? — Paul Dessert, Nov 10 '12 at 01:54

score 2 · Accepted Answer · answered Nov 10 '12 at 01:55

2

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

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

answered Nov 10 '12 at 01:55

Marat Tanalin

13,927
1
36
52

That is an obvious answer that I completely overlooked. Thanks! – Paul Dessert Nov 10 '12 at 02:05

score 2 · Answer 2 · edited May 23 '17 at 11:43

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.)

Haven't read all the way. My bad. Your answer is the right one so I take down my imaginary hat :) — iMoses, Nov 10 '12 at 01:58

pseudo selectors

2 Answers2