Выберите каждый элемент <p>, который не является первым дочерним элементом его родителя. - PullRequest
Новая
       1

Выберите каждый элемент <p>, который не является первым дочерним элементом его родителя.

0 голосов
/ 08 мая 2018

Какой правильный CSS-селектор, если я хочу выбрать каждый <p>, который не является первым элементом его родителя?

Как этот фрагмент ниже, только наоборот! (поэтому «второе», «третье», «четвертое» - красные, «первое» - нормально) 

p:first-of-type {
  background: red;
}
<body>
  <p>The first paragraph.</p>
  <p>The second paragraph.</p>
  <p>The third paragraph.</p>
  <p>The fourth paragraph.</p>
</body>

Ответы [ 3 ]

0 голосов
/ 08 мая 2018

Очень просто: 

p + p {
  background: red;
}
<body>
  <p>The first paragraph.</p>
  <p>The second paragraph.</p>
  <p>The third paragraph.</p>
  <p>The fourth paragraph.</p>
</body>

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

Таким образом, в этом случае выбираются только элементы p, следующие за p. Это исключает первое p.

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

0 голосов
/ 08 мая 2018 

.text p:not(:first-child) {
  background: green;
}
<div class="text">
  <p>The first paragraph.</p>
  <p>The second paragraph.</p>
  <p>The third paragraph.</p>
  <p>The fourth paragraph.</p>
</div>
0 голосов
/ 08 мая 2018

Вы можете использовать псевдокласс класса :not. Обратите внимание, что при объединении псевдоклассов вы должны поместить второй псевдокласс внутри скобок как :not(:first-of-type): 

p:not(:first-of-type) {
  background: red;
}
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>

Обратите внимание, что если вы специально хотите выбрать каждый элемент, отличный от первого потомка элемента, вы можете использовать :not(:first-child). Обратите внимание, что в этом случае селектор идет на элемент child , а не на родительский: 

.parent p:not(:first-child) {
  background: red;
}
<div class="parent">
  <p>The first paragraph.</p>
  <p>The second paragraph.</p>
  <p>The third paragraph.</p>
  <p>The fourth paragraph.</p>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...