CSS выбирает прямых потомков, но не внутри другого вложенного потомка - PullRequest
Новая
       35

CSS выбирает прямых потомков, но не внутри другого вложенного потомка

0 голосов
/ 08 ноября 2019

Итак, если это HTML-код элемента: 

<div class="parent">
    <div class="ignore-me">
        <p class="child">ignore me</p>
        <p class="child">ignore me</p>
        <p class="child">ignore me</p>
        <!-- I don't know how many <p> gonna be here  -->
    </div>
    <p class="child">paint me green</p>
    <p class="child">paint me blue</p>
</div>

Как я могу:

  1. Выбрать дочерние элементы .child но не те, что внутри div.ignore-me?

  2. Выберите их отдельно, исходя из порядка их индексов.

Я пытался использовать сочетание > и :nth-child(n), как это: 

.parent > .child:nth-child(1)

Но это не работает!

Можно ли это сделать только CSS? 

.parent > .child:nth-child(1) {
  background: green;
}

.parent > .child:nth-child(2) {
  background: blue;
}
<div class="parent">
    <div class="ignore-me">
        <p class="child">ignore me</p>
        <p class="child">ignore me</p>
        <p class="child">ignore me</p>
        <!-- I don't know how many <p> gonna be here  -->
    </div>
    <p class="child">paint me green</p>
    <p class="child">paint me blue</p>
</div>

1 Ответ

2 голосов
/ 08 ноября 2019

Использование div.parent > p.p

> - это дочерний комбинатор . Он соответствует только тем элементам, которые соответствуют второму селектору, которые являются прямыми потомками элементов, соответствующих первому. 

div.parent > p.p {
color:green;
}
<div class="parent">
    <div class="ignore-me">
        <p class="p">don't select me</p>
        <p class="p">don't select me</p>
        <p class="p">don't select me</p>
        <!-- I don't know how many <p> gonna be here  -->
    </div>
    <p class="p">select me</p>
    <p class="p">select me too</p>
</div>
...