@scope
Misol
Bu yerda .ex1 va .ex2 klasslari ichidagi <a> elementlarini tanlash uchun ikkita alohida @scope blokidan foydalanamiz. :scope scope ildizlarining o‘zini tanlash va ularga uslub berish uchun ishlatiladi. Ushbu misolda scope ildizlari — shu klasslar qo‘llanilgan <div> elementlari:
@scope (.ex1) {
:scope {
background-color: salmon;
padding: 10px;
}
a {
color: maroon;
}
a:hover {
color: blue;
}
}
@scope (.ex2) {
:scope {
background-color: beige;
padding: 10px;
}
a {
color: green;
}
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
CSS @scope qoidasi muayyan DOM quyi daraxtlaridagi elementlarni tanlash imkonini beradi.
Bu at-qoida yordamida haddan tashqari aniq selektorlar yozmasdan elementlarni aniq nishonga olishingiz mumkin.
Bu at-qoida, shuningdek, selektorlaringiz va DOM tuzilmasi orasidagi bog‘liqlikni kamaytiradi.
Quyidagi HTML’ga qarang:
<div class="container">
<div class="news">
<h2>Some header</h2>
<img src="example.jpg" alt="Some image">
</div>
</div>
Bu yerda bir nechta ichma-ich joylashgan <div> elementlari bor va agar yuqoridagi container/news bo‘limi ichidagi <h2> va <img> elementlariga uslub bermoqchi bo‘lsak, (@scope’dan foydalanmasdan) quyidagicha yozishingiz kerak:
Misol
.container .news h2 {
color: green;
}
.container .news img {
border: 2px solid maroon;
}
O‘zingiz sinab ko‘ring »
@scope qoidasi yordamida haddan tashqari aniq selektorlar yozmasdan elementlarni aniq nishonga olishingiz mumkin, masalan:
Misol
Bu yerda faqat .container komponentidagi <h2> va <img> elementlarini nishonga olamiz — .container’ni @scope at-qoidasining scope ildizi sifatida belgilaysiz:
@scope (.container) {
h2 {
font-size: 30px;
color: green;
}
img {
border: 5px solid maroon;
}
}
O‘zingiz sinab ko‘ring »
@scope qoidasi bir yoki bir nechta qoidalar to‘plamini (ruleset) o‘z ichiga oladi va ikki usulda ishlatilishi mumkin:
- CSS ichida mustaqil blok sifatida — bu holda u scope ildizi va ixtiyoriy scope chegarasi selektorlarini o‘z ichiga olgan kirish (prelude) qismiga ega bo‘ladi; ular scope’ning yuqori va quyi chegaralarini belgilaydi.
- HTML’dagi <style> elementi ichiga kiritilgan ichki uslublar sifatida — bu holda kirish (prelude) qismi tushirib qoldiriladi va ichidagi qoidalar to‘plami avtomatik ravishda <style> elementini o‘rab turgan ota elementga nisbatan scope qilinadi.
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar at-qoidani to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| At-qoida | |||||
|---|---|---|---|---|---|
| @scope | 118 | 118 | Yo‘q | 17.4 | 104 |
CSS sintaksisi
@scope (scope root) {
rulesets
}
or
/* donut scope */
@scope (scope root) to (scope limit) {
rulesets
}
Ko‘proq misollar
Misol
Donut scope faqat ajdodlar daraxtidagi ikki element orasida joylashgan elementlarni nishonga oladi. Mana misol:
@scope (.container) to (.news) {
h2 {
font-size: 30px;
color: green;
}
img {
border: 5px solid maroon;
}
}
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!