+
называется Adjacent Sibling Selector
.
Например, селектор p + p
, выбирает элементы p
сразу после элементов p
. Его можно рассматривать как селектор looking outside
, который проверяет сразу следующий элемент.
Вот пример фрагмента, чтобы сделать вещи более ясными:
body {
font-family: Tahoma;
font-size: 12px;
}
p + p {
margin-left: 10px;
}
<div>
<p>Header paragraph</p>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<p>This is yet another paragraph</p>
<hr>
<p>Footer paragraph</p>
</div>
Поскольку мы являемся одним из в той же теме стоит упомянуть другой селектор ~
, который является General Sibling Selector
Например, p ~ p
выбирает все p
, которые следуют за p
, не имеет значения, где это, но оба p
должны иметь один и тот же родитель.
Вот как это выглядит с той же разметкой:
body {
font-family: Tahoma;
font-size: 12px;
}
p ~ p {
margin-left: 10px;
}
<div>
<p>Header paragraph</p>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<p>This is yet another paragraph</p>
<hr>
<p>Footer paragraph</p>
</div>
Обратите внимание, что последний p
также соответствует этому образцу.