Cant target element using css first-child/nth-child?


Please refer to this page:

if you look at the middle column, the first 4 boxes are grey and after that in white.

What I want to do is add a horizontal line btween the grey and the white rectangle but i cant seem to target it.

Problem courtesy of: Vincent Chua


This will make any white box preceded by br and a gray box will have a (black) border on top of it.

.mbaBox+br+.mbaBox-white {
    position: relative;

.mbaBox+br+.mbaBox-white:after {
    content: " ";
    background: #000; /* your color */
    width: 100%;
    height: 1px;
    position: absolute;
    top: -10px;
    left: 0;
Solution courtesy of: Armel Larcier


With selector .mbaBox+br+.mbaBox-white you will get the first white box after gray box, custom your css for this element :).

Have fun !

Read more here

Discussion courtesy of: StupidDev

This recipe can be found in it's original form on Stack Over Flow.