Pseudo-class

CSS Pseudo-classlar

Pseudo-classlar nima?

Pseudo-class elementning maxsus holatini belgilash uchun ishlatiladi.

Masalan, bu quyidagilarni amalga oshirish uchun ishlatilishi mumkin:

Foydalanuvchi ustiga sichqoncha olib borganida elementni uslublash
O'tgan va o'tmagan havolalarni boshqacha uslublash
Elementga diqqat markazi olinganda uslublash

Mouse Over Me

Click Me To Get Focus

Sintaksis

Pseudo-classlarning sintaksisi:

selector:pseudo-class {
  property: value;
}

Ulanish Pseudo-classlari

Havolalar turli yo'llar bilan ko'rsatilishi mumkin:

Misol

/* o'tilmagan havola */
a:link {
  color: #ff0000;
}
 
/* o'tilgan havola */
a:visited {
  color: #00ff00;
}
 
/* havola ustiga kelsa */
a:hover {
  color: #ff00ff;
}
 
/* tanlangan havola */
a:active {
  color: #0000ff;
}

E'tibor bering: a:hover a:link va a:visited CSS ta'rifida samarali bo'lishi uchun keyin kelishi kerak! a:active a:hover dan keyin kelishi kerak! Pseudo-class nomlari katta-kichik harfga sezgir emas.

Pseudo-classlar va HTML classlari

Pseudo-classlar HTML classlari bilan birlashtirilishi mumkin:

Agar siz havola ustiga kelsangiz, u rangini o'zgartiradi:

Misol

a.highlight:hover {
  color: #ff0000;
}

`<div>` Ustida Hover

<div> elementi ustida :hover pseudo-classini ishlatish misoli:

Misol

div:hover {
  background-color: blue;
}

<div> elementi ustiga olib borganingizda <p> elementini ko'rsatish (tooltip kabi):

Hover over me to show the <p> element.

Misol

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}
 
div:hover p {
  display: block;
}

CSS - `:first-child` Pseudo-class

:first-child pseudo-class boshqa elementning birinchi bolasi bo'lgan belgilangan elementni mos keladi.

Birinchi `<p>` elementini moslashtirish

Quyidagi misolda tanlovchi har qanday elementning birinchi bolasi bo'lgan har qanday <p> elementini mos keladi:

Misol

p:first-child {
  color: blue;
}

Har qanday `<p>` elementlarida birinchi `<i>` elementini moslashtirish

Quyidagi misolda tanlovchi barcha <p> elementlarida birinchi <i> elementini mos keladi:

Misol

p i:first-child {
  color: blue;
}

Har qanday birinchi bola `<p>` elementlaridagi barcha `<i>` elementlarini moslashtirish

Quyidagi misolda tanlovchi boshqa elementning birinchi bolasi bo'lgan <p> elementlaridagi barcha <i> elementlarini mos keladi:

Misol

p:first-child i {
  color: blue;
}

CSS - `:lang` Pseudo-class

:lang pseudo-classini turli tillar uchun maxsus qoidalarni belgilash imkonini beradi.

Quyidagi misolda, :lang lang="no" bo'lgan <q> elementlari uchun o'zaro qavslarni belgilaydi:

Misol

<html>
  <head>
    <style>
      q:lang(no) {
        quotes: '~''~';
      }
    </style>
  </head>
  <body>
    <p>Ba'zi matn <q lang="no">Bir sitatani bir paragrafda</q> Ba'zi matn.</p>
  </body>
</html>

Tanlovchi	Misol	Misol Tavsifi
:active	a:active	Faol havolani tanlaydi
:checked	input:checked	Har bir belgilanadigan `<input>` elementini tanlaydi
:disabled	input:disabled	Har bir o'chirilgan `<input>` elementini tanlaydi
:empty	p:empty	Har bir bola yo'q bo'lgan `<p>` elementini tanlaydi
:enabled	input:enabled	Har bir yoqilgan `<input>` elementini tanlaydi
:first-child	p:first-child	Ota-ona elementining birinchi bolasi bo'lgan har bir `<p>` elementini tanlaydi
:first-of-type	p:first-of-type	Ota-ona elementining birinchi `<p>` elementi bo'lgan har bir `<p>` elementini tanlaydi
:focus	input:focus	Diqqat markazi olingan `<input>` elementini tanlaydi
:hover	a:hover	Sichqoncha ustida havolalarni tanlaydi
:in-range	input:in-range	Belgilangan diapazonda qiymatga ega `<input>` elementlarini tanlaydi
:invalid	input:invalid	Har bir noto'g'ri qiymatga ega `<input>` elementini tanlaydi
:lang(language)	p:lang(it)	"it" bilan boshlanuvchi lang atributiga ega har bir `<p>` elementini tanlaydi
:last-child	p:last-child	Ota-ona elementining oxirgi bolasi bo'lgan har bir `<p>` elementini tanlaydi
:last-of-type	p:last-of-type	Ota-ona elementining oxirgi `<p>` elementi bo'lgan har bir `<p>` elementini tanlaydi
:link	a:link	Barcha o'tilmagan havolalarni tanlaydi
:not(selector)	:not(p)	Har bir `<p>` elementi bo'lmagan har bir elementni tanlaydi
:nth-child(n)	p:nth-child(2)	Ota-ona elementining ikkinchi bolasi bo'lgan har bir `<p>` elementini tanlaydi
:nth-last-child(n)	p:nth-last-child(2)	Oltinchi bolasi bo'lgan har bir `<p>` elementini tanlaydi, oxirgi boladan hisoblaganda
:nth-last-of-type(n)	p:nth-last-of-type(2)	Ota-ona elementining ikkinchi `<p>` elementi bo'lgan har bir `<p>` elementini tanlaydi, oxirgi boladan hisoblaganda
:nth-of-type(n)	p:nth-of-type(2)	Ota-ona elementining ikkinchi `<p>` elementi bo'lgan har bir `<p>` elementini tanlaydi
:only-of-type	p:only-of-type	Ota-ona elementining yagona `<p>` elementi bo'lgan har bir `<p>` elementini tanlaydi
:only-child	p:only-child	Ota-ona elementining yagona bolasi bo'lgan har bir `<p>` elementini tanlaydi
:optional	input:optional	"required" atributiga ega bo'lmagan `<input>` elementlarini tanlaydi
:out-of-range	input:out-of-range	Belgilangan diapazondan tashqari qiymatga ega `<input>` elementlarini tanlaydi
:read-only	input:read-only	"readonly" atributi belgilangan `<input>` elementlarini tanlaydi
:read-write	input:read-write	"readonly" atributi belgilangan bo'lmagan `<input>` elementlarini tanlaydi
:required	input:required	"required" atributi belgilangan `<input>` elementlarini tanlaydi
:root	:root	Hujjatning ildiz elementini tanlaydi
:target	#news:target	Hozirgi faol #news elementini tanlaydi (shu anchor nomi bo'lgan URLga bosilganda)
:valid	input:valid	Har bir to'g'ri qiymatga ega `<input>` elementlarini tanlaydi
:visited	a:visited	Barcha o'tilgan havolalarni tanlaydi

Barcha CSS Pseudo Elementlar

Tanlovchi	Misol	Misol Tavsifi
::after	p::after	Har bir `<p>` elementidan keyin mazmun qo'shadi
::before	p::before	Har bir `<p>` elementidan oldin mazmun qo'shadi
::first-letter	p::first-letter	Har bir `<p>` elementining birinchi harfini tanlaydi
::first-line	p::first-line	Har bir `<p>` elementining birinchi qatorini tanlaydi
::marker	::marker	Ro'yxat elementlarining belgilari tanlaydi
::selection	p::selection	Foydalanuvchi tomonidan tanlangan elementning qismini tanlaydi

CSS Pseudo-classlar

Pseudo-classlar nima?

Sintaksis

Ulanish Pseudo-classlari

Pseudo-classlar va HTML classlari

`<div>` Ustida Hover

Oddiy Tooltip Hover

CSS - `:first-child` Pseudo-class

Birinchi `<p>` elementini moslashtirish

Har qanday `<p>` elementlarida birinchi `<i>` elementini moslashtirish

Har qanday birinchi bola `<p>` elementlaridagi barcha `<i>` elementlarini moslashtirish

CSS - `:lang` Pseudo-class

Qo'shimcha Misollar

Havolalarga turli uslublar qo'shish

`:focus` Foydalanilishi

Barcha CSS Pseudo-classlar

Barcha CSS Pseudo Elementlar

Ushbu sahifada