&
Misol
Nesting (&) selektoridan foydalanish:
.box {
border: 2px solid green;
background-color: beige;
font-family: monospace;
font-size: 20px;
& > a {
color: green;
&:hover {
color: white;
background-color: salmon;
}
}
}
O‘zingiz sinab ko‘ring »
Ta’rif va qo‘llanilishi
CSS nesting (&) selektori boshqa element konteksti ichidagi element uchun uslublarni qo‘llash uchun ishlatiladi.
Nesting (ichma-ich joylashtirish) bog‘liq elementlar uchun selektorlarni takrorlash zaruratini kamaytiradi.
Misol
Nesting paydo bo‘lishidan oldin har bir selektorni bir-biridan alohida, aniq e’lon qilishingiz kerak edi, masalan:
.box {
border: 2px solid green;
background-color: beige;
font-family: monospace;
font-size: 20px;
}
.box > a {
color: green;
}
.box > a:hover {
color: white;
background-color: salmon;
}
O‘zingiz sinab ko‘ring »
Misol
Nesting bilan selektorlar davom ettiriladi va bog‘liq uslub qoidalari ota qoida ichida guruhlanadi:
.box {
border: 2px solid green;
background-color: beige;
font-family: monospace;
font-size: 20px;
& > a {
color: green;
&:hover {
color: white;
background-color: salmon;
}
}
}
O‘zingiz sinab ko‘ring »
Maslahat: Agar yuqoridagi misoldagi .box uslubini loyihangizdan olib tashlash kerak bo‘lsa, bog‘liq selektorlarni qidirish o‘rniga butun guruhni o‘chirib tashlashingiz mumkin.
| Versiya: | CSS Nesting moduli |
|---|
Brauzerlarda qo‘llab-quvvatlash
| Selektor | |||||
|---|---|---|---|---|---|
| & | 120 | 120 | 117 | 17.2 | 106 |
CSS sintaksisi
parentrule {
css declarations;
& childrule {
css declarations; }
}
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!