Selektorlar — attribute, pseudo-class, pseudo-element

~20 daq · CSS · CSS Asoslari

Muammodan boshlaylik

Uchta vazifa:

1. Tugma ustiga sichqoncha kelganda rangi o'zgarsin
2. Ro'yxatning faqat birinchi elementi qalin bo'lsin
3. Tashqi saytlarga olib boradigan havolalar yonida ↗ belgisi chiqsin

Bularning hech biri uchun HTML ga yangi class qo'shish shart emas. CSS elementlarni holati, joyi va atributlari bo'yicha ham topa oladi.

Attribute selektorlari

Atribut bo'yicha — kvadrat qavs [ ] ichida:

input[type="email"] {
  border-color: #2563eb;
}

[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

Darsning boshidagi 3-vazifa:

a[href^="http"]::after {
  content: " ↗";
}

a[href$=".pdf"]::before {
  content: "📄 ";
}

Tashqi havolalar va PDF fayllar — HTML ga tegmasdan belgilandi. (::after — pastda.)

Formalarda juda qulay:

input[type="text"],
input[type="email"],
input[type="password"] {
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}

Pseudo-class — holat va joy

Pseudo-class — elementning holati yoki o'rni bo'yicha. Bitta ikki nuqta : bilan.

Foydalanuvchi harakatlari

.btn:hover {
  background: #1d4ed8;          /* sichqoncha ustida */
}

.btn:active {
  transform: scale(0.97);       /* bosilib turganda */
}

input:focus {
  outline: 2px solid #2563eb;   /* fokusda (klaviatura yoki bosish) */
}

a:visited {
  color: #7c3aed;               /* ochilgan havola */
}

Havolalar uchun tartib muhim (keyingisi ustun — 1-dars): :link → :visited → :hover → :active. Eslab qolish: LoVe HAte.

:focus-visible — klaviatura uchun

.btn:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 2px;
}

:focus — sichqoncha bilan bosganda ham ramka chiqadi (ko'pchilikka yoqmaydi). :focus-visible — faqat klaviatura (Tab) bilan kelganda. Ko'zi ojiz va klaviaturadan foydalanuvchilar uchun ramka zarur — uni hech qachon butunlay olib tashlamang.

[!WARNING] *:focus { outline: none; } — tez-tez uchraydigan yomon odat. Klaviatura foydalanuvchilari sahifada qayerda ekanini ko'ra olmay qoladi. Ramka xunuk tuyulsa — uni chiroyli qiling, o'chirmang.

Forma holatlari

input:disabled { background: #f1f5f9; }
input:checked + label { font-weight: 600; }
input:required { border-left: 3px solid #f59e0b; }
input:invalid { border-color: #dc2626; }
input:placeholder-shown { font-style: italic; }

Tartib bo'yicha

li:first-child  { font-weight: 700; }   /* birinchisi — 2-vazifa hal */
li:last-child   { border-bottom: none; }
li:nth-child(2) { color: red; }          /* ikkinchisi */
tr:nth-child(odd)  { background: #f8fafc; }   /* toq satrlar — "zebra" jadval */
tr:nth-child(even) { background: #fff; }
li:nth-child(3n)   { color: blue; }      /* har uchinchisi: 3, 6, 9... */

nth-child formulasi an+b: 2n+1 = toq, 3n = har 3-chi, -n+3 = birinchi uchtasi.

:first-of-type, :nth-of-type() — shu turdagi elementlar orasida sanaydi (aralash elementli konteynerlar uchun).

Mantiqiy pseudo-class lar

.btn:not(.btn-primary) { background: #e2e8f0; }   /* asosiy bo'lmagan tugmalar */

:is(h1, h2, h3):hover { color: #2563eb; }         /* guruhni qisqa yozish */

.card:has(img) { padding-top: 0; }                /* ICHIDA rasm bor kartochka */

:has() — "ota selektor": ichidagi narsaga qarab ota elementni tanlash. Uzoq yillar CSS da imkonsiz edi, endi barcha zamonaviy brauzerlarda ishlaydi.

form:has(input:invalid) .submit-btn {
  opacity: 0.5;    /* formada xato bo'lsa — tugma xira */
}

Pseudo-element — elementning bir qismi

Pseudo-element — elementning qismi yoki HTML da yo'q qo'shimcha element. Ikki nuqta :: bilan.

::before va ::after

Element ichiga — boshiga yoki oxiriga — CSS orqali "virtual" element qo'shadi:

.required::after {
  content: " *";
  color: #dc2626;
}

<label class="required">Email</label>
<!-- Ko'rinishi: Email * -->

• content — majburiy (bo'sh bo'lsa ham: content: ""), aks holda pseudo-element umuman chizilmaydi
• Bezak uchun juda qulay: ikonkalar, chiziqlar, qo'shtirnoqlar, "badge" lar

.badge-new::before {
  content: "YANGI";
  font-size: 10px;
  background: #dc2626;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 6px;
}

[!INFO] ::before/::after dagi matnni foydalanuvchi belgilay olmaydi va u qidiruv tizimlari uchun "haqiqiy" kontent emas. Muhim ma'lumotni (narx, ogohlantirish) u yerga yozmang — faqat bezak uchun.

Boshqa pseudo-element lar

p::first-line   { font-weight: 600; }               /* birinchi qator */
p::first-letter { font-size: 2em; float: left; }    /* bosh harf — gazeta uslubi */
::selection     { background: #fde68a; }            /* belgilangan matn */
input::placeholder { color: #94a3b8; }              /* placeholder matni */
li::marker      { color: #2563eb; }                 /* ro'yxat nuqtasi/raqami */

Pseudo-class yoki pseudo-element?

Birlashtirish mumkin:

.btn:hover::after {
  content: " →";    /* sichqoncha ustida o'q paydo bo'ladi */
}

Nima uchun shunday?

Nima uchun holat va bezaklar uchun CSS da maxsus selektorlar bor — JavaScript bilan class qo'shib-olib tashlash ham mumkin-ku?

Mumkin, lekin bu sekinroq, murakkabroq va ishonchsizroq. :hover va :focus ni brauzer o'zi, eng optimal tarzda kuzatadi — JavaScript yuklanmagan bo'lsa ham, xato bilan to'xtagan bo'lsa ham ishlaydi. :nth-child element qo'shilsa yoki o'chirilsa o'zi qayta hisoblanadi — JavaScript da buni har safar qo'lda qilish kerak edi. ::before esa HTML ni bezak elementlari bilan ifloslantirmaydi. Qoida: ko'rinish va holatga bog'liq narsa — CSS da; ma'lumot va mantiq — JavaScript da. Shunda har biri o'z ishini eng yaxshi qiladi.

Xulosa

Eslab qoling:

• Attribute: [type="email"], [href^="http"] (boshlanadi), [href$=".pdf"] (tugaydi), [class*="x"] (bor)
• Pseudo-class : — holat va joy: :hover, :active, :focus-visible, :checked, :disabled
• Tartib: :first-child, :last-child, :nth-child(odd/2n/3n)
• Mantiq: :not(), :is(), :has() — ota selektor
• Pseudo-element :: — ::before/::after (content majburiy!), ::placeholder, ::selection, ::marker
• Fokus ramkasini o'chirmang — :focus-visible bilan chiroyli qiling

Keyingi dars

4-dars: Kombinatorlar — descendant, child, sibling