CSS Selector - Target DT только тогда, когда следует DD

Question

Я пытаюсь нацелиться на <dt> только тогда, когда за ним следует <dd>. Я знаю, что есть предыдущий селектор, однако я не могу найти метод CSS нацеливания на <dt>. Я знаю, что это возможно с JavaScript, но я бы предпочел оставить его в CSS-селекторах, если это вообще возможно.

Это не обязательно должно работать в IE6 или ниже.

Answer 1

Я подумал, что, возможно, dt ~ dd будет работать, но на самом деле он работает подобно +, но не совсем так.

Взглянув на документ выбора W3C css http://www.w3.org/TR/CSS2/selector.html,, я могу с большой степенью уверенности сказать, что то, что вы хотите сделать, невозможно только с помощью CSS. Также отсутствует способ получить родительский селектор. Возможно в CSS4 ...

Answer 2

Я ищу подобное решение для аналогичной проблемы. В моем случае я хочу выбрать последний dd в группе dd, поэтому любой dd, за которым следует dt или первый дочерний элемент dl (поскольку по какой-либо причине этот позволено).

Я также не нашел чистого решения CSS. Я возился с множеством правил, так что все, что осталось, было бы (в вашем случае) «пустым» dt, но не все включено.

Если я заставлю это работать, я дам вам знать. В противном случае решение, подобное селектору (таким образом, сохраняющий любой другой синтаксис селектора), является селектором jquery non-css :has(). Итак, в вашем случае:

$("dt:not(:has(+dd))").addClass("empty_def");
$("dt:has(+dd)").addClass("non_empty_def");

Answer 3

Требуется селектор брата:

DT + DD { color : #00f; } 

Не работает в IE6, но работает в других браузерах.