31-mart Reja: css kombinatorlar Psevdo klasslar Psevdo elementlar Kombinatorlar

31-mart

Reja:

• CSS kombinatorlar
• Psevdo klasslar
• Psevdo elementlar

Kombinatorlar

• Kombinator - bu selektorlar orasidagi munosabatni tushuntiruvchi narsa.
• CSS selektori bir nechta oddiy selektorni o'z ichiga olishi mumkin. Oddiy selektorlar orasiga biz kombinatorni kiritishimiz mumkin.
• CSS-da to'rt xil kombinator mavjud:

avlod selektori (bo'sh joy)

bola selector (>)

qo'shni aka-uka selektori (+)

umumiy aka-uka selektori (~)

Kombinatorlar

Avlod selektori belgilangan elementning avlodlari bo'lgan barcha elementlarga mos keladi. Quyidagi misol

elementlari ichidagi barcha
elementlarni tanlaydi:

Kombinatorlar

Bolalar selektori belgilangan elementning bolalari bo'lgan barcha elementlarni tanlaydi. Quyidagi misolda

elementining bolalari bo'lgan barcha
elementlar tanlanadi:

Kombinatorlar

Qo'shni birodar selektori to'g'ridan-to'g'ri boshqa muayyan elementdan keyin joylashgan elementni tanlash uchun ishlatiladi. Qardosh elementlar bir xil asosiy elementga ega bo'lishi kerak va "qo'shni" "darhol ergashish" degan ma'noni anglatadi.
Quyidagi misolda

elementlaridan keyin darhol joylashtirilgan birinchi
​​element tanlanadi:

Kombinatorlar

Umumiy qo’shni selektori belgilangan elementning keyingi qo’shnilari bo'lgan barcha elementlarni tanlaydi. Quyidagi misolda

elementlarining keyingi birodarlari bo'lgan barcha
elementlar tanlanadi:

Psevdo klasslar

• Pseudo-klass elementning maxsus holatini aniqlash uchun ishlatiladi.
• Masalan, u quyidagilar uchun ishlatilishi mumkin: Foydalanuvchi sichqonchani bosganda, elementga stil berishda Stil tashrif buyurilgan va tashrif buyurilmagan havolalar boshqacha

Element aktiv bo'lganda unga stil berishda

Psevdo klasslar

Psevdo klasslar.

• :first-child psevdo-sinfi boshqa elementning birinchi bolasi bo'lgan belgilangan elementga mos keladi.

Psevdo elementlar.

• CSS psevdo-elementi elementning belgilangan qismlarini stilash uchun ishlatiladi.
• Masalan, u quyidagilar uchun ishlatilishi mumkin: Elementning birinchi harfi yoki satriga uslub berishda Tarkibni element tarkibidan oldin yoki keyin kiritishda

Psevdo elementlar.

Psevdo elementlar.

• ::befor pseudo-element element mazmunidan oldin ba'zi tarkibni kiritish uchun ishlatilishi mumkin.
• Quyidagi misolda har bir

  elementi mazmunidan oldin rasm qo'shiladi:

Psevdo elementlar.

• ::after pseudo-element element mazmunidan keyin ba'zi tarkibni kiritish uchun ishlatilishi mumkin.
• Quyidagi misolda har bir

  elementi mazmunidan keyin rasm qo'shiladi:

Psevdo elementlar.

• ::marker psevdoelementi roʻyxat elementlarining markerlarini tanlaydi.
• Quyidagi misol ro'yxat elementlarining markerlarini belgilaydi:

Psevdo elementlar.

• :: selection psevdo-elementi foydalanuvchi tomonidan tanlangan element qismiga mos keladi.
• Quyidagi CSS xususiyatlari ::selection uchun qo'llanilishi mumkin: rang, fon, kursor va kontur.