Pseudo-Element

CSS Pseudo-elementlari

Pseudo-elementlar nima?

CSS pseudo-elementi - bu elementning belgilangan qismlarini uslubga solish uchun ishlatiladi.

Masalan, u:

• Elementning birinchi harfini yoki satrini uslubga solish
• Elementning mazmunidan oldin yoki keyin mazmun qo'shish

Sintaksis

Pseudo-elementlarning sintaksisi:

selector::pseudo-element {
  property: value;
}

::first-line Pseudo-elementi

::first-line pseudo-elementi matnning birinchi qatoriga maxsus uslub qo'shish uchun ishlatiladi.

Quyidagi misolda, barcha <p> elementlarining birinchi qatori uslubga solinadi:

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

Eslatma: ::first-line pseudo-elementi faqat blok darajasidagi elementlarga tatbiq etilishi mumkin.

::first-line pseudo-elementiga quyidagi xususiyatlar tatbiq etiladi:

• font xususiyatlari
• rang xususiyatlari
• fon xususiyatlari
• so'zlar orasidagi masofa
• harf oralaridagi masofa
• matn bezaklari
• vertikal joylashuv
• matn o'zgarishi
• qator balandligi
• tozalash

Diqqat: ikki nuqta notatsiyasi - ::first-line va :first-line

Ikki nuqtaning qoidasi CSS3da pseudo-elementlar uchun birlamchi nuqta notatsiyasani o'zgartirishga qaratilgan edi. Bu W3C tomonidan pseudo-sinf va pseudo-elementlarni ajratish uchun harakat edi.

Birinchi nuqta sintaksisi CSS2 va CSS1da pseudo-sinf va pseudo-elementlar uchun ishlatilgan.

Orqaga mos kelishi uchun, birinchi nuqta sintaksisi CSS2 va CSS1 pseudo-elementlari uchun qabul qilinadi.

::first-letter Pseudo-elementi

::first-letter pseudo-elementi matnning birinchi harfiga maxsus uslub qo'shish uchun ishlatiladi.

Quyidagi misolda, barcha <p> elementlarining birinchi harfi uslubga solinadi:

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

Eslatma: ::first-letter pseudo-elementi faqat blok darajasidagi elementlarga tatbiq etilishi mumkin.

::first-letter pseudo-elementiga quyidagi xususiyatlar tatbiq etiladi:

• font xususiyatlari
• rang xususiyatlari
• fon xususiyatlari
• chekka xususiyatlari
• ichki joylashtirish xususiyatlari
• chegaralar xususiyatlari
• matn bezaklari
• vertikal joylashuv (faqat "float" "none" bo'lsa)
• matn o'zgarishi
• qator balandligi
• suzish
• tozalash

Pseudo-elementlar va HTML Sinflari

Pseudo-elementlar HTML sinflari bilan birlashtirilishi mumkin:

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

Yuqoridagi misol, class="intro" bo'lgan paragraflarning birinchi harfini qizil va katta o'lchamda ko'rsatadi.

Bir nechta Pseudo-elementlar

Bir nechta pseudo-elementlar ham birlashtirilishi mumkin.

Quyidagi misolda, paragraflarning birinchi harfi qizil, xx-large o'lchamda bo'ladi. Birinchi qatorning qolgan qismi ko'k rangda va small-caps formatida bo'ladi. Paragrafning qolgan qismi esa standart shrift o'lchami va rangida qoladi:

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
 
p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

CSS - ::before Pseudo-elementi

::before pseudo-elementi, bir elementning mazmunidan oldin biror mazmun kiritish uchun ishlatilishi mumkin.

Quyidagi misolda, har bir <h1> elementining mazmunidan oldin rasm qo'shiladi:

h1::before {
  content: url(smiley.gif);
}

CSS - ::after Pseudo-elementi

::after pseudo-elementi, bir elementning mazmunidan keyin biror mazmun kiritish uchun ishlatilishi mumkin.

Quyidagi misolda, har bir <h1> elementining mazmunidan keyin rasm qo'shiladi:

h1::after {
  content: url(smiley.gif);
}

CSS - ::marker Pseudo-elementi

::marker pseudo-elementi ro'yxat elementlarining belgilari ustida ishlaydi.

Quyidagi misolda, ro'yxat elementlarining belgilari uslubga solinadi:

::marker {
  color: red;
  font-size: 23px;
}

CSS - ::selection Pseudo-elementi

::selection pseudo-elementi foydalanuvchi tomonidan tanlangan elementning qismini tanlaydi.

Quyidagi CSS xususiyatlari ::selection ga tatbiq etilishi mumkin: rang, fon, kursor va kontur.

Quyidagi misol, tanlangan matnni qizil va sariq fon bilan ko'rsatadi:

::selection {
  color: red;
  background: yellow;
}

Barcha CSS Pseudo-elementlari

Barcha CSS Pseudo-classlar