:has()
Misol
Bevosita ortidan <p> elementi keladigan <h2> elementlariga uslub bering:
h2:has(+ p) {
color: gray;
background-color: gold;
border: 2px dotted red;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
CSS :has() psevdo-klassi muayyan qo‘shni elementga ega yoki ichida muayyan element bo‘lgan istalgan ota elementga mos keladi.
Foydalanish misollari:
- Muayyan qo‘shni elementlarga yoki ichidagi narsalarga qarab elementlarni yashirish yoki ko‘rsatish
- Muayyan kontent mavjud bo‘lsa, elementlar joylashuvini o‘zgartirish
- Ota elementlar muayyan turdagi qo‘shni elementlarga yoki ichki kontentga ega bo‘lsa, ularni boshqacha ko‘rinishga keltirish
| Versiya: | CSS4 |
|---|
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar psevdo-klassni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Psevdo-klass | |||||
|---|---|---|---|---|---|
| :has() | 105 | 105 | 121 | 15.4 | 91 |
CSS sintaksisi
:has(relative-selector-list) {
css declarations;
}
Ko‘proq misollar
Misol
Ichida <h1> elementi bo‘lgan <section> elementlariga uslub bering, shuningdek ichida class 'funfact' bo‘lgan element mavjud <section> elementlariga ham uslub bering:
section:has(h1) {
background-color: gold;
}
section:has(.funfact) {
color: blue;
}
O‘zingiz sinab ko‘ring »
Misol
Ichida belgilangan (checked) <input> elementi bo‘lgan <li> elementlariga (<ul> ichidagi) uslub bering:
ul li:has(input:checked) {
border:2px solid maroon;
}
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!