CSS atribut selektorlari

CSS atribut selektorlari ma’lum atribut yoki atribut qiymati (yoki ikkalasi) ega HTML elementlarini tanlash va uslublash uchun ishlatiladi.

Atribut selektorlari kvadrat qavslar [] ichiga olinadi.

CSS quyidagi atribut selektorlariga ega:

[attribute] — ko‘rsatilgan atribut ega elementlarni tanlaydi
[attribute="value"] — ma’lum atribut va aniq qiymat ega elementlarni tanlaydi
[attribute~="value"] — atribut qiymati ma’lum so‘zni o‘z ichiga olgan elementlarni tanlaydi
[attribute|="value"] — ma’lum atribut ega elementlardan, qiymati aynan shu qiymat yoki shu qiymat bilan tire (-) bilan boshlanadigan elementlarni tanlaydi
[attribute^="value"] — atribut qiymati ma’lum qiymat bilan boshlanadigan elementlarni tanlaydi
[attribute$="value"] — atribut qiymati ma’lum qiymat bilan tugaydigan elementlarni tanlaydi
[attribute*="value"] — atribut qiymati ma’lum qiymatni o‘z ichiga olgan elementlarni tanlaydi

Maslahat: Atribut selektorlari standart holda katta-kichik harflarga sezgir. Sezgirsiz moslik uchun yopuvchi qavsdan oldin i harfini qo‘shing. Misol: [attribute="value" i].

CSS [attribute] selektori

[attribute] selektori ko‘rsatilgan atribut ega elementlarni tanlash uchun ishlatiladi.

Quyidagi misol target atributi mavjud bo‘lgan barcha <a> elementlarini tanlaydi:

Misol

a[target] {
background-color: yellow;
}

O‘zingiz sinab ko‘ring »

CSS [attribute="value"] selektori

[attribute="value"] selektori ma’lum atribut va aniq qiymat ega elementlarni tanlash uchun ishlatiladi.

Quyidagi misol target="_blank" atributi mavjud bo‘lgan barcha <a> elementlarini tanlaydi:

Misol

a[target="_blank"] {
background-color: yellow;
}

O‘zingiz sinab ko‘ring »

CSS [attribute~="value"] selektori

[attribute~="value"] selektori atribut qiymati ma’lum so‘zni o‘z ichiga olgan elementlarni tanlash uchun ishlatiladi.

Quyidagi misol title atributi probel bilan ajratilgan so‘zlar ro‘yxatini o‘z ichiga olgan — va ulardan biri "flower" — barcha elementlarni tanlaydi:

Misol

[title~="flower"] {
border: 5px solid yellow;
}

O‘zingiz sinab ko‘ring »

Yuqoridagi misol title="flower", title="summer flower" va title="flower new" elementlariga mos keladi, lekin title="my-flower" yoki title="flowers" elementlariga mos kelmaydi.

CSS [attribute|="value"] selektori

[attribute|="value"] selektori ma’lum atribut ega elementlardan — qiymati aynan shu qiymat yoki shu qiymat bilan tire (-) bilan boshlanadigan elementlarni tanlash uchun ishlatiladi.

Eslatma: Qiymat butun so‘z bo‘lishi kerak — yoki yolg‘iz, class="top" kabi, yoki tire ( - ) bilan davom etgan, class="top-text" kabi.

Misol

[class|="top"] {
background: yellow;
}

O‘zingiz sinab ko‘ring »

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish