Siblings selector - first element?

HTML & CSS
1

I have something like this:

<div class="pagination"></div>
<div class="table"></div>
<div class="pagination">

.pagination { margin:5px 0; }
.table { margin:10px 0; }

This results in “too much” spacing around the table when using a pagination element too, but makes sense in all other cases.

So, I’ve done this:

.pagination + .table { margin-top:0; }

That works lovely - but I can’t do it for the bottom of the table since I don’t think there is a way to style the FIRST element in the sibling selector.

Any ideas?

2 
.table+.pagination {margin-top:-5px}
3

Quick question:

Top is 5 + 10px but I am taking away 10px on table, so its 5.

If I do -5 AFTER the table, shouldn’t it be 10px margin? Even though yes, it appears to be exactly the same when I implement your -5px…

4

Collapsing margins.

You have a 10px bottom margin on .table and when you set a -5px top margin on the following .pagination you get 10px + (-5px) = 5px.

For the top margin you have a 5px bottom margin collapsing with a zero top margin, which yields a 5px result.

Without any special rules you have one 10px margin collapsing with one 5px margin, and the result is 10px.

Paul has written an excellent treaty on collapsing margins in the SitePoint CSS Reference. It’s a tricky concept to grasp at first, but once you ‘get’ it, it’s fairly logical.

5

Thanks for the clarification :slight_smile: