Ustunlik ierarxiyasi
Specificity ierarxiyasi
Har bir CSS selektor turi spetsifikatsiya ierarxiyasida o‘z o‘rniga ega va selektor turlari har xil "og‘irliklarni" olib yuradi.
| Selector | Misol | Tavsif | Weight |
|---|---|---|---|
| Inline styles | <h1 style="color: pink;"> | Eng yuqori ustuvorlik, boshqa barcha selektorlarni bekor qiladi | |
| Id selectors | #navbar | Second highest priority | 1-0-0 |
| Klasslar, atribut selektorlari va psevdoklasslar | .test, [type="text"], :hover | Third highest priority | 0-1-0 |
| Elementlar va psevdoelementlar | h1, ::before, ::after | Low priority | 0-0-1 |
| Universal selektor va :where() | *, where() | No priority | 0-0-0 |
Vazn yozuvini tushunish
Og‘irlik yozuvi uchta raqamdan foydalanadi (X-Y-Z):
- X - ID selektorlari soni
- Y — Klass selektorlari, atribut selektorlari va psevdo-klasslar soni
- Z — Element selektorlari va psevdo-elementlar soni
Chapdagi raqami kattaroq bo‘lgan selektor g‘alaba qozonadi. Teng bo‘lsa, keyingi raqam solishtiriladi va hokazo.
Specificity vaznini hisoblash
Eng yuqori spetsifikatsiya/og‘irlik qiymatiga ega deklaratsiya elementga qo‘llanadi.
Misol
Spetsifikatsiya ierarxiyasi va og‘irlik:
<html>
<head>
<style>
#demo {color: blue;} /* weight: 1-0-0 */
p#demo {color:
orange;} /* weight: 1-0-1 WINS! */
.test {color: green;}
/* weight: 0-1-0 */
p.test {color: green;} /* weight:
0-1-1 */
p {color: red;} /* weight: 0-0-1 */
</style>
</head>
<body>
<p id="demo" class="test">Hello World!</p>
</body>
</html>
CSS More Specificity misollari
Ustunlik (specificity) turli vaziyatlarda qanday ishlashini tushunib oling:
Teng specificity: oxirgi qoida g‘olib chiqadi
Agar bir xil qoida tashqi uslublar jadvalida ikki marta yozilsa, oxirgi qoida g‘alaba qozonadi:
ID selektorlar atribut selektorlaridan ustun turadi
Quyidagi kod qatorlariga qarang — Bu yerda birinchi qoidaning spetsifikatsiyasi ikkinchisidan yuqori va shu sababli u qo‘llanadi:
Misol
#myDiv {background-color: yellow;}
div[id=myDiv] {background-color: blue;}
Klass selektori element selektorlaridan ustun turadi
.intro kabi klass selektori h1, p, div va hokazolardan ustun turadi:
Universal selektor (*)
Universal selektorda (*) spetsifikatsiya og‘irlik qiymati yo‘q:
Inline uslub va tashqi stillar jadvali
Ichki (embedded) uslublar jadvali ushlanadigan elementga yaqinroq turadi. Shu sababli quyidagi vaziyatda oxirgi qoida qo‘llanadi:
Misol
/*From external CSS file:*/
#content h1 {background-color: red;}
/*In HTML file:*/
<style>
#content h1 {background-color:
yellow;}
</style>
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!