Question

What is happening

I am running into a problem. I have a menu like this:

<div id='feeds'>
  <div class='feed'>Super Dense</div>
  <div class='feed'>Everything</div>
  <div class='feed current-feed'>Smashing Magazine Feed</div>
  <div class='feed'>Hot Questions - Stack Exchange</div>
</div>

I style this with CSS (I only show the border and background properties here):

.feed {
  background: -webkit-gradient(linear, left top, left bottom, from(#DDD), to(#CCC));
  border-bottom: solid 1px #AAA;
  border-left: solid 1px #AAA;
  border-right: solid 1px #AAA;
}

.feed:first-child {
  border-top: solid 1px #AAA;
}

.feed.current-feed, .feed:active {
  background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#444));
  border-bottom: solid 1px #000;
  border-left: solid 1px #000;
  border-right: solid 1px #000;
}

.feed.current-feed:first-child, .feed:active:first-child {
  border-top: solid 1px #000;
}

This is the result (view on jsFiddle WebKit only):

_{Yes, Jeff, all the extra Stack Exchange feed traffic comes from me constantly reloading my feed reader. Sorry 🙂}

The Problem

This might look nice, but there is a little problem. There is a #AAA line above a black box, and this does not look nice (pixel perfection):

My Question

Is there a way in CSS to check if the next element is of a certain class, so I can set border-bottom to solid 1px #000, or is there another way to solve my problem?

My web app heavily uses JavaScript, so if this is required, it’s not a problem, but CSS is cleaner in my opinion.

Answer 1

One way I can think of:

Position every .feed relatively:

.feed {
    position: relative;
    /* ... */
}

Then find the next immediate sibling using the + combinator, make it sit above its previous sibling using a greater z-index and a negative margin, and give it the desired border (notice that this is a top border):

.feed + .feed.current-feed, .feed + .feed:active {
    margin-top: -1px;
    border-top: 1px solid #000;
    z-index: 1;
}

The top black border will sit above the previous sibling’s bottom border and thus be visible over it. The W3C box model means that the content height of each .feed isn’t affected, so an equally thick negative margin is all you need to counter the thickness of the added top border.

Take a look at the preview and see if that’s what you’re looking for. Also, a screenshot: