What is happeningI am running into a problem. I have a menu like this:\[code\]<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>\[/code\]I style this with CSS (I only show the border and background properties here):\[code\].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;}\[/code\]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 ProblemThis 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 QuestionIs there a way in CSS to check if the next element is of a certain class, so I can set \[code\]border-bottom\[/code\] to \[code\]solid 1px #000\[/code\], 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.
The ProblemThis 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):