Как выбрать на основе атрибута родителя

Question

Есть ли способ выбрать DOM only_child, n-th-child и т. Д.?Я знаю, что есть селекторы типа some_tag:only-child, .some_class:only-child, #some_id:only-child, но они выбираются на основе тега или атрибутов (class, id и т. Д.) Самого .Я хочу сделать выбор на основе тега или атрибута parent .

Например, я могу выбрать only-child из .some_class, который является div с id B ниже, а не only-child, который равен .some_class, что A.

<div>
  <div class="some_class" id="A">
    <div id="B">
    </div>
  </div>
</div>

Answer 1

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

Учитывая вашHTML, вы захотите использовать дочерний комбинатор >, чтобы ограничить его единственным элементом, который непосредственно вложен в .some_class:

.some_class > :only-child

Answer 2

Если вы выбираете элемент, вы можете использовать атрибуты и селектор nth-child либо для родительского элемента, либо для самого элемента:

section div:nth-child(1) { /*
  any div that is a first child under the section
*/ }

.some_class > :nth-child(5) { /*
  any element that is the fifth immediate child of .some_class
*/ }

section[title] > :nth-child(5) { /*
  any element that is the fifth immediate child of a section tag
  where the section tag has a title attribute
*/ }

Answer 3

Вы можете выбрать дочерний элемент определенного типа, перечислив его после родительского типа с помощью дочернего селектора (>).Например, вы можете найти n-й дочерний элемент (любого типа) элемента с некоторым классом, используя .someclass > *:nth-child(N), который будет искать во всех .someclass элементах и ​​найти любой элемент, который является nth-child(N).

* 1005.* Важно отметить, что вы должны использовать дочерний селектор (>), а не дочерний селектор (просто пробел), чтобы убедиться, что он не выбирает n-й дочерний элемент каждого дочернего элемента (и их дочерних элементов, и их,и т. д.).

Обратите внимание, что более старые версии IE и некоторых других браузеров не поддерживают такие селекторы.

Answer 4

Проверьте W3 на селекторах атрибутов .

* 1005 Е.Г. *

div[lang=nl] span { 
    color: red; 
}

Это сделает все span теги внутри <div lang='nl' /> красного цвета.

Я сделал скрипку здесь , чтобы увидеть это в действии.