Zahiriddin muhammadbobur nomidagi andijon davlat universiteti

Psevdoelement Selektorlar

Selektor sifatida psevdoelementlardan ham foydalanish mumkin. Psevdoelementlar boshlang'ich hujjatda yoki hujjat shajarasida ko'rinmaydi. Birinchi harf yoki birinchi so'zni belgilaydigan teglar (elementlar) mavjud emas. Bunday holda ularga alohida stil belgilash uchun psevdoelementlardan foydalaniladi.
⇒ :first-letter - birinchi harfga stil belgilaydi.
CSS da:
p:first-letter { font-size: 150%; font-weight: bold; color: #cc0066; }
HTML da:

Birinchi harfiga stil berilgan abzats

Natija:
Birinchi harfiga stil berilgan abzats
⇒ :first-line - birinchi qator uchun stil belgilaydi.
CSS da:
p:first-line { font-weight: bold; color: #cc0066; }
HTML da:

... matn ...

Natija:
Aflotunga: - Falon kishi seni maqtab, haqqingga duo qildi, - deyishsa, u xafa bo'lib debdi: - Men nima nojo'ya ish qilibmanki, u ahmoqqa ma`qul kelib, meni shunchalik maqtabdi. Biror ahmoqlik qilmay ahmoqning maqtoviga sazovor bo'lmaysan kishi.
⇒ :before va :after - Element boshida yoki oxirida matn qo'shish imkonini beradi. Qo'shiladigan matn content parametrida ko'rsatiladi.
CSS da:
p:before { content: "Oldindagi Matn "; color: #cc0066; }
p:after { content: " Oxiridagi Matn"; color: #cc0066; }
HTML da:

Abzatsdagi asosiy matn.

Natija:
Abzatsdagi asosiy matn.

Psevdoklass selektorlar

Psevdoklasslar stillarni elementning nomiga, atributiga yoki kontentiga to'g'ridan-to'g'ri bog'lab bo'lmaydigan hollarda, ularning xossalariga nisbatan stil qo'llash imkonini beradi. Ko'pincha Giperbog'lanish(link)larga stil belgilashda psevdoklasslardan foydalaniladi.
⇒ a:link - o'tilmagan (непосещённый) giperbog'lanish ko'rinishi.
⇒ a:visited - o'tilgan giperbog'lanish ko'rinishi.
⇒ a:active - aktiv giperbog'lanish ko'rinishi.
⇒ a:hover - sichqoncha bilan ko'rsatilayotgan giperbog'lanish ko'rinishi.
Misol:
a:link { color: blue; text-decoration: none; }
a:visited { color: maroon; text-decoration: none; }
a:active { color: #66cc99; text-decoration: underline; }
a:hover { font-size: 120%; color: #66cc99; text-decoration: underline; }
Giperbog'lanish ko'rsatkichi
Eslatma: ikki nuqtadan oldin va keyin probel qoldirilmaydi.
Stillarni butun hujjatga nisbatan emas, balki ma`lum bir klassga nisbatan ham qo'llash mumkin:
a.class1:hover { color: #66FF99; text-decoration: underline; }
⇒ :first-child - ma`lum bir ajdod elementga birinchi darajali avlod hisoblangan elementning birinchisiga stil belgilaydi.
li { text-decoration: overline; }
li:first-child { text-decoration: none; }

• 
  Ro'yxatning birinchi qatori
  
• 
  Ro'yxatning ikkinchi qatori
  
• 
  Ro'yxatning uchinchi qatori
  

Bu misolda ul elementiga nisbatan avlod element hisoblangan li elementining birinchisiga nisbatan ishlatilgan stil uning tepa chizig'ini bekor qiladi va go'yoki qatorlar orasidan chiziq o'tkazilgandek ko'rinadi.