Что такое родительские селекторы в препроцессоре LESS и зачем они нужны в LESS
Согласно правилу CSS, те или иные свойства применяются к последнему элементу. Благодаря родительскому селектору, такой порядок может быть нарушен.
Оператор &
ссылается на родительский селектор вложенного правила и чаще всего используется, когда требуется присоединить (модифицировать) псевдо-класс, или класс к существующему селектору:
a {
color: blue;
&:hover {
color: green;
}
}
В результате наш CSS имеет вид:
a {
color: blue;
}
a:hover {
color: green;
}
Обратите внимание, что без &
в приведенном выше примере в селекторе появится пробел a :hover
(потомок элемента a), а это вовсе не то, что мы ожидаем получить от псевдо-класса :hover.
У оператора Родительский селектор множество применений. Например, чтобы объединить группу правил одного элемента, имеющего различные состояния. Вот типичный пример использования &
- создание повторяющихся названий класса:
.button {
&-ok {
background-image: url("ok.png");
}
&-cancel {
background-image: url("cancel.png");
}
&-custom {
background-image: url("custom.png");
}
}
Получим следующий CSS код:
.button-ok {
background-image: url("ok.png");
}
.button-cancel {
background-image: url("cancel.png");
}
.button-custom {
background-image: url("custom.png");
}
&
можно использовать несколько раз в одном селекторе. Это позволяет повторно обратиться к родительскому селектору, не повторяя его имя.
.link {
& + & {
color: red;
}
& & {
color: green;
}
&& {
color: blue;
}
&, &ish {
color: cyan;
}
}
В результате получим:
.link + .link {
color: red;
}
.link .link {
color: green;
}
.link.link {
color: blue;
}
.link, .linkish {
color: cyan;
}
Обратите внимание, что &
представляет все родительские селекторы, а не только ближайшего предка.
Пример:
.grand {
.parent {
& > & {
color: red;
}
& & {
color: green;
}
&& {
color: blue;
}
&, &ish {
color: cyan;
}
}
}
Вот, что мы получим:
.grand .parent > .grand .parent {
color: red;
}
.grand .parent .grand .parent {
color: green;
}
.grand .parent.grand .parent {
color: blue;
}
.grand .parent,
.grand .parentish {
color: cyan;
}
Изменение порядка селекторов
Иногда бывает полезно поставить селектор перед родительским селектором. Это можно сделать, поставив после текущего селектора &
. Например, при использовании библиотеки Modernizr, вы, возможно, захотите указать различные правила, основанные на поддерживаемых функциях:
.header {
.menu {
border-radius: 5px;
.no-borderradius & {
background-image: url('button-bgr.png');
}
}
}
Селектор .no-borderradius &
будет добавляеть .no-borderradius
родителю .header .menu
так, что на выводе получается .no-borderradius .header .menu
:
.header .menu {
border-radius: 5px;
}
.no-borderradius .header .menu {
background-image: url('button-bgr.png');
}
Комбинирование селекторами
&
также может быть использован для создания списка различных комбинаций селекторов:
p, a, ul, li {
border-top: 2px dotted #366;
& + & {
border-top: 0;
}
}
Результат - все возможные комбинации (16) указанных элементов:
p,
a,
ul,
li {
border-top: 2px dotted #366;
}
p + p,
p + a,
p + ul,
p + li,
a + p,
a + a,
a + ul,
a + li,
ul + p,
ul + a,
ul + ul,
ul + li,
li + p,
li + a,
li + ul,
li + li {
border-top: 0;
}