Question

I have a load of <div>‘s, all with the class name of ‘a‘.

Occasionally, mixed inbetween these div’s I have a with the class name of ‘b‘ (these ‘b’ elements are basically category headers within my listing).

<div class='a'>item 1</div>
<div class='a'>item 2</div>
<div class='a'>item 3</div>

<div class='b'>category header</div>

<div class='a'>item 4</div>
<div class='a'>item 5</div>

<div class='b'>another category header</div>

<div class='a'>item 6</div>
<div class='a'>item 7</div>

Class ‘a‘ has a border-bottom:1px dotted black;

However, if one of these div’s with class ‘a’ is immediately followed by a div of class ‘b’ (a category header), I don’t want class ‘a’ to have the dotted bottom border, so I want to set it to border:0;

So, in the example above, I want to remove the dotted border-bottom style property from items 3 and 5 (as they are followed immediately by one of the category divs).

What css selector would accomplish this?

Answer 1

I didn’t realise that I couldn’t select further down the DOM. My bad.

So, I’ve basically flipped my logic around a bit so ‘a’ has a border-TOP (instead of BOTTOM), unless it comes straight after a div with class ‘b’. This has given me the desired result.