Что означает селектор CSS "+" (плюс)?
Описание проблемы
Здравствуйте, коллеги!
Столкнулся с трудностями в понимании использования селектора в CSS. У меня есть следующий код:
p + p {
/* Некоторые объявления */
}
Не могу понять, что означает символ + в данном контексте. В чем разница между этим селектором и просто определением стилей для тега p, без использования + p?
Благодарю за помощь!
3 ответ(ов)
Знак + означает выбор "соседнего элемента" (sibling).
Например, этот стиль будет применяться ко второму элементу <p>:
p + p {
font-weight: bold;
}
<div>
<p>Первый абзац</p>
<p>Второй абзац</p>
</div>
Пример
Посмотрите этот JSFiddle, и вы все поймете: http://jsfiddle.net/7c05m7tv/ (Другой JSFiddle: http://jsfiddle.net/7c05m7tv/70/)
Поддержка браузерами
Селекторы соседних элементов поддерживаются во всех современных браузерах.
Узнать больше
"+" — это селектор соседнего элемента. Он выберет любой элемент <p>, который непосредственно следует за другим элементом <p> (но не является дочерним или родительским элементом, а именно родственным).
Это будет соответствовать любому элементу p, который непосредственно соседствует с другим элементом p. См. также: http://www.w3.org/TR/CSS2/selector.html
Существует ли селектор родителя в CSS?
Что означает селектор CSS "~" (тильда/кручёная)?
CSS-селектор для первого элемента с классом
Использование подстановочного знака * в CSS для классов
CSS селектор для элементов с двумя классами