Как выбрать несколько элементов, которые являются потомками данного элемента?

Question

У меня есть <div id='mydiv'>, и мне нужно выбрать все элементы pre и div, которые являются потомками #mydiv.

Я мог бы сделать это так:

div#mydiv > pre, div#mydiv > div

но можно ли сделать так, чтобы на #mydiv ссылались только один раз?

div#mydiv > pre, div

выберет все div s на странице независимо от того, являются ли они дочерними элементами #mydiv, поэтому запятая не является способом сделать это. Может быть, есть другой вид синтаксиса, о котором я не знаю?

Answer 1

Вам придется ссылаться на #mydiv дважды ...

#mydiv > pre, #mydiv > div

Я удалил посторонний селектор div, поскольку идентификатор достаточно конкретный.

Answer 2

Насколько я знаю, для группировки селекторов нет сокращения.

См. « Группировка селекторов ».

Хотя при МЕНЬШЕ это возможно в разделе «Вложенные правила».

Answer 3

Единственный способ ссылаться на идентификатор только один раз - использовать его с селектором *:

#mydiv > * {

, который будет применяться к всем элементам, которые являются потомками этого div.

В зависимости от того, какие стили вы планируете применить, это может быть работоспособным (я обычно использую это для обнуления полей, отступов и стилей границ), но все же, вероятно, лучше сделать это первым способом, потому что это делаетв будущем легче делать исключения / изменения.