I have a structure like this on my site: <div class = box> <h3 class=inside box>title</h3> content <h3 class=inside box>title</h3> content </div> css: box: border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc;} h3.insidebox {border-top: 1px solid #cccccc;} The box has a top and bottom border. Also the h3 titles have a top border to separate each one. I am trying to make the first h3 to not have a border so it doesn't double up with the box border. I was using section 5.7 here to help me: http://www.w3.org/TR/CSS2/selector.html by putting div.box + h3.insidebox {border: 0px;} I thought it would stop the border doubling up, but it doesn't. Could someone help me with this? thanks.
Hi, From having a quick read (i've never heard of it before), it seems that it would add something between the two elements. So in your example for any .insidebox appearing immediatly after .box it would add something, as if there was an imaginary element there. What you might want to try is: .insidebox:first-child {border:none;} More info:http://www.w3schools.com/CSS/pr_pseudo_first-child.asp I'm not 100% of it's browser compatability.