Выберите элемент по имени класса A, когда рядом с другим элементом имени класса B

Question

У меня есть загрузка <div>, все с именем класса 'a'.

Иногда, смешанные между этими div'ами у меня есть с именем класса 'b'(эти элементы' b 'в основном являются заголовками категорий в моем списке).

<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>

Класс' a 'имеет border-bottom:1px dotted black;

Однако, если один из этих div сза классом «a» сразу же следует div класса «b» (заголовок категории), я не хочу, чтобы класс «a» имел пунктирную нижнюю границу, поэтому я хочу установить его на border:0;

Итак, в приведенном выше примере я хочу удалить свойство стиля пунктирной границы-дна из элементов 3 и 5 (так как за ними сразу следует один из элементов div категории).

Какой селектор CSS будетвыполнить это?

Answer 1

Как насчет переключения вещей и использования border-top вместо этого?Следующее действие удалит псевдо-нижнюю границу из элементов 3 и 5. вашей разметки.

div:last-child {
    border-bottom:1px dotted black;
}

div {
    border-top:1px dotted black;
}

div:first-child, div.a + div.b {
    border:none;
}

Демо

Answer 2

Я не осознавал, что не могу выбрать дальше вниз по DOM.Мой плохой.

Итак, я немного перевернул свою логику, чтобы у 'a' была граница TOP (вместо BOTTOM), если только она не идет сразу после div с классом 'b'.Это дало мне желаемый результат.

Answer 3

Насколько я знаю, это невозможно в CSS.

Вы можете сделать следующее с jQuery, хотя

$('.b').prev('.a').css('border', 'none');

Пример: http://jsfiddle.net/jasongennaro/XUhax/