Ilg‘or atribut selektorlari

Ilg‘or atribut selektorlari maxsus operatorlar yordamida qisman atribut qiymatlariga asoslanib elementlarga mos keladi.

CSS [attribute^="value"] selektori

[attribute^="value"] selektori ma’lum atribut ega elementlardan — qiymati ma’lum qiymat bilan boshlanadigan elementlarni tanlash uchun ishlatiladi.

Quyidagi misol class atribut qiymati "top" bilan boshlanadigan barcha elementlarni tanlaydi:

Misol

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

O‘zingiz sinab ko‘ring »

CSS [attribute$="value"] selektori

[attribute$="value"] selektori atribut qiymati ma’lum qiymat bilan tugaydigan elementlarni tanlash uchun ishlatiladi.

Quyidagi misol class atribut qiymati "test" bilan tugaydigan barcha elementlarni tanlaydi:

Misol

[class$="test"] {
background: yellow;
}

O‘zingiz sinab ko‘ring »

CSS [attribute*="value"] selektori

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

Quyidagi misol class atribut qiymati "te" ni o‘z ichiga olgan barcha elementlarni tanlaydi:

Misol

[class*="te"] {
background: yellow;
}

O‘zingiz sinab ko‘ring »

Shakl elementlarini atribut selektorlari bilan uslublash

CSS atribut selektorlari shakl elementlarini input turi bo‘yicha uslublash uchun foydali bo‘lishi mumkin:

Misol

input[type="text"] {
width: 150px;
padding: 6px;
margin-bottom: 10px;
background-color: pink;
}

input[type="button"] {
width: 100px;
padding: 6px;
background-color: lightgreen;
}

O‘zingiz sinab ko‘ring »

Maslahat: Formalarni CSS bilan bezash bo‘yicha ko‘proq misollar uchun bizning CSS Forms darsligimizga tashrif buyuring.

Barcha CSS atribut selektorlari

Selector	Tavsif
[attribute]	Muayyan atributga ega elementlarni tanlash
[attribute=value]	Muayyan atributi aniq qiymatga ega bo‘lgan elementlarni tanlash
[attribute~=value]	Atribut qiymatida muayyan so‘z mavjud bo‘lgan elementlarni tanlash
[attribute\|=value]	Qiymati berilgan qiymatga teng yoki undan keyin defis keladigan elementlarni tanlash
[attribute^=value]	Qiymati muayyan qiymat bilan boshlanadigan elementlarni tanlash
[attribute$=value]	Qiymati muayyan qiymat bilan tugaydigan elementlarni tanlash
[attribute=value*]	Qiymatida muayyan qiymat mavjud bo‘lgan elementlarni tanlash

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish