CSS atribut selektorlari: href, data-* va aria-* bo'yicha tanlash

Qisqacha: Atribut selektori elementni HTML atributi bo'yicha tanlaydi. [required] — shu atributi bor element, [type="email"] — qiymati aniq teng element. Qiymatning bir qismi bo'yicha ham tanlash mumkin: ^= — shu bilan boshlanadi, $= — shu bilan tugaydi, *= — ichida bor, ~= — so'zlar ro'yxatida bor, |= — til kodi. Oxiriga i qo'shilsa, katta-kichik harf farqlanmaydi. aria-* va data-* atributlari bilan element holatini class qo'shmasdan bezash mumkin.

Bu darsda

• Elementni atributi borligi yoki qiymati bo'yicha tanlay olasiz.
• Oltita qiymat operatorini farqlaysiz va keraklisini tanlaysiz.
• i bayrog'i bilan katta-kichik harfga bog'liq bo'lmagan selektor yozasiz.
• Holatni — joriy sahifa, xato maydon, ochiq blok — CSS'da ko'rsatasiz.
• Portfolio'ni bitta ham class qo'shmasdan, mavjud atributlar bilan bezaysiz.

Oldin bilishingiz kerak: Asosiy selektorlar va kombinatorlar, Global atributlar, ARIA asoslari, Maxsus havolalar va rel qiymatlari.

1. Nega bu kerak?

Portfoliongizda bitta ham class yo'q. Lekin HTML'da juda ko'p atribut bor, va ular elementlar haqida ko'p narsa aytadi:

• aria-current="page" — "foydalanuvchi hozir shu sahifada";
• href="mailto:..." — email havolasi, href="https://..." — boshqa saytga havola;
• aria-label="Asosiy menyu" va aria-label="Non yo'li" — ikki xil navigatsiya;
• details name="savollar" — savol-javob bloki, open esa — u ochiqligi.

HTML allaqachon "bu nima" va "hozir qanday holatda" ekanini aytib turibdi. CSS shu yozuvlarni o'qiy oladi. Sayt tuzilmasi darsida "aria-current li havolani CSS boshqa rangda ko'rsatishi mumkin" degan edik — bugun shuni qilamiz.

Kiyim do'konini tasavvur qiling. Sotuvchi "hamma qizil yorliqli kiyimlarga 30% chegirma" deydi. U kiyimni nomi yoki joyi bo'yicha emas, yorlig'i bo'yicha tanladi. Atribut — elementning yorlig'i. Atribut selektori — "shunday yorliqli elementlar" degan tanlov.

2. Atribut bormi: [atribut]

Eng oddiy shakl — kvadrat qavs ichida atribut nomi. U shu atributi bor hamma elementni tanlaydi, qiymatidan qat'i nazar.

details va summary darsida brauzer details ochilganda unga open atributini o'zi qo'shishini ko'rgan edik. O'sha darsda "CSS ochiq blokni boshqacha bo'ya deya oladi" degandik. Mana:

<style>
  details {
    border: 1px solid #2f6b3a;
    padding: 4px 12px;
  }
  details[open] {
    background-color: #fffaf0;
    border-width: 3px;
  }
</style>
<details open>
  <summary>Bronni qanday bekor qilaman?</summary>
  <p>Telefon qiling: +998 90 000 00 00.</p>
</details>
<details>
  <summary>Choyxona necha soatda yopiladi?</summary>
  <p>Har kuni 23:00 da.</p>
</details>

Nimaga qarang: ochiq blok qaymoq fonli va qalin ramkali, yopig'i oddiy. Sarlavhalarni bosib ko'ring: yopiq blok ochilganda uning ko'rinishi ham o'zgaradi. Brauzer open ni qo'shadi yoki olib tashlaydi — CSS esa shunga qarab darhol qayta bo'yaydi.

details[open] — teg va atribut birga, xuddi p.aksiya kabi yopishtirib yoziladi. Faqat [open] deb yozish ham mumkin, lekin u dialog kabi boshqa elementlarga ham tushadi. Teg bilan yozilgani aniqroq.

Boshqa misollar: input[required] — majburiy maydonlar, a[href] — manzili bor havolalar, img[alt] — alt i bor rasmlar.

Tekshirib ko'ring: details va summary darsida Doniyor blokni yopiq qilmoqchi bo'lib open="false" yozgan edi. details[open] qoidasi bu blokka tushadimi?

3. Aniq qiymat: [atribut="qiymat"]

3.1 Joriy sahifani ajratish

[aria-current="page"] — "qiymati aynan page bo'lgan aria-current". «Bahor» menyusida joriy sahifa havolasini ajratamiz:

<style>
  nav a {
    color: #2f6b3a;
  }
  nav [aria-current="page"] {
    color: #1f2a24;
    font-weight: bold;
  }
</style>
<nav aria-label="Asosiy menyu">
  <ul>
    <li><a href="../">Bosh sahifa</a></li>
    <li><a href="./" aria-current="page">Menyu</a></li>
    <li><a href="../bron/">Stol band qilish</a></li>
  </ul>
</nav>

Nimaga qarang: "Menyu" havolasi qalin va to'q rangda — mehmon qaysi sahifada turganini darhol ko'radi. Selektorni o'ngdan o'qing: "aria-current="page" li element — nav ichidagi" (bo'sh joy — o'tgan darsdagi avlod kombinatori). HTML'ga class qo'shilmadi. Ekran o'quvchi uchun yozilgan atribut ko'rinish uchun ham ishladi.

3.2 data-* bo'yicha: achchiq taomlar

Global atributlar darsida kartaga data-achchiq atributini qo'shgan edik. O'sha darsda "data-achchiq="3" bo'lgan kartaga qizil chegara" deb va'da bergandik:

<style>
  article {
    border: 1px solid #5b6660;
    padding: 4px 12px;
  }
  [data-achchiq="3"] {
    border: 3px solid #b4461a;
  }
</style>
<article class="taom-karta" data-achchiq="0">
  <h3>Osh</h3>
</article>
<article class="taom-karta" data-achchiq="3">
  <h3>Lag'mon — achchiq</h3>
</article>

Nimaga qarang: faqat lag'mon kartasida qalin qizg'ish ramka. Qiymat 0 bo'lgan osh kartasiga qoida tushmadi. Achchiqlik belgisini — masalan, qalampir rasmini — karta burchagida chizish ham mumkin. Buni Pseudo-elementlar darsida qilamiz.

3.3 Qiymatni doim qo'shtirnoqqa oling

Qo'shtirnoqsiz yozuv ba'zan ishlaydi ([type=email]), ba'zan esa butun qoidani buzadi:

/* ❌ qiymat raqam bilan boshlangan — selektor noto'g'ri */
[data-achchiq=3] {
  border: 3px solid #b4461a;
}

Chrome'da tekshirdik: bu qoida jimgina tashlandi, VS Code ham ogohlantirmadi. Sababi Asosiy selektorlar darsidagi #1-taom bilan bir xil: qo'shtirnoqsiz qiymat CSS nomi qoidasiga bo'ysunadi, nom esa raqam bilan boshlanmaydi. Qoida: qiymatni doim qo'shtirnoqqa oling.

Qiymat ichida apostrof bo'lsa, qo'shtirnoq " bo'lsin: nav[aria-label="Non yo'li"]. HTML'dagi kabi — ichidagi belgi tashqi qo'shtirnoqni "yopib" qo'ymasin. Qo'shtirnoqsiz yozilsa, apostrof yopilmagan satr boshlaydi va brauzer keyingi qoidalarni ham "yutib" yuborishi mumkin — buni «Atribut detektivi» mashqida ko'rasiz.

O'tgan darsdagi raqamli id muammosining ikkinchi yechimi ham shu yerda: [id="1-taom"] ishlaydi, chunki qiymat qo'shtirnoq ichida. Chrome'da tekshirdik. Lekin eng yaxshi yechim o'zgarmadi — id harf bilan boshlansin.

3.4 "Aniq" — butun qiymat

= qiymatning hammasi mos kelishini talab qiladi. [class="taom-karta"] selektori class="taom-karta mashhur" ni topmaydi — qiymat to'liq teng emas. Class uchun doim .taom-karta ishlating.

Og'irligi bo'yicha atribut selektori class selektoriga teng: to'qnashuvda ikkalasi bir xil kuchli. Buni Specificity darsida hisoblaymiz.

4. Qiymatning bir qismi bo'yicha

Ko'pincha qiymat to'liq emas, faqat bir qismi ma'lum bo'ladi. Masalan, havola https:// bilan boshlanadi — demak, boshqa saytga olib boradi. Buning uchun = oldiga bitta belgi qo'shiladi.

4.1 ^= boshlanadi, $= tugaydi, *= ichida bor

<style>
  a[href^="https://"] { color: #2f6b3a; }
  a[href^="mailto:"] { color: #b4461a; }
  a[href$=".pdf"] { font-weight: bold; }
  a[href*="t.me"] { font-style: italic; }
</style>
<ul>
  <li><a href="menyu/">Menyu</a></li>
  <li><a href="https://example.com/sharh">Sharhlar</a></li>
  <li><a href="https://t.me/sizning_kanal">Telegram kanal</a></li>
  <li><a href="mailto:bahor@example.com">bahor@example.com</a></li>
  <li><a href="assets/files/menyu.pdf">Menyu (PDF)</a></li>
</ul>

Nimaga qarang:

• Menyu — oddiy ko'k: uning manzili nisbiy, hech bir qoidaga tushmadi.
• Sharhlar — yashil: https:// bilan boshlanadi (^=).
• Telegram kanal — yashil va qiya: ikki qoidaga birdan tushdi. U https:// bilan boshlanadi va ichida t.me bor (*=). font-style: italic — qiya harf, Shrift asoslari darsida.
• Email — qizg'ish: mailto: bilan boshlanadi.
• PDF — qalin: manzil .pdf bilan tugaydi ($=).

Belgilarni eslab qolish uchun: ^ — "bosh" (tepaga qaragan uchi), $ — hisob oxirida to'lanadigan pul, * — "istalgan joyda". Bu belgilar keyinroq JavaScript'dagi matn qidirish qoliplarida ham xuddi shu ma'noda uchraydi.

Diqqat: *= juda "ochko'z". a[href*="menyu"] faqat menyu/ ni emas, menyular/, bosh-menyu.html va assets/files/menyu.pdf ni ham topadi — Chrome'da tekshirdik. Iloji bo'lsa, aniqroq ^= yoki $= ni tanlang.

4.2 ~= — bo'sh joy bilan ajratilgan so'zlar ichida

Ba'zi atributlarda bir necha so'z bo'sh joy bilan yoziladi. Maxsus havolalar darsidagi foydalanuvchi izohidagi havola:

<a href="https://example.com" rel="ugc nofollow">Mijoz sayti</a>

• a[rel="nofollow"] — topmaydi: qiymat "ugc nofollow", "nofollow" ga to'liq teng emas.
• a[rel~="nofollow"] — topadi: ~= qiymatni bo'sh joylar bo'yicha so'zlarga bo'ladi va ular orasidan aynan nofollow ni qidiradi.

Chrome'da ikkalasini tekshirdik. ~= so'zning bo'lagini topmaydi: [rel~="follow"] "nofollow" ga tushmaydi. class ham so'zlar ro'yxati: [class~="mashhur"] aslida .mashhur bilan bir xil. Lekin class uchun nuqtali yozuv qisqaroq va hamma shuni ishlatadi.

4.3 |= — til kodi

|= bitta maqsad uchun yaratilgan — til kodlari. [lang|="en"] qiymati en ga teng yoki en- bilan boshlanadigan elementni tanlaydi: en, en-GB, en-US.

<style>
  [lang|="en"] {
    font-style: italic;
    color: #5b6660;
  }
</style>
<p>Mehmonlar sharhlari:</p>
<blockquote lang="en">Amazing plov!</blockquote>
<blockquote lang="en-GB">Lovely green tea.</blockquote>
<blockquote>Oshingiz zo'r ekan!</blockquote>

Nimaga qarang: ikkala inglizcha sharh — en ham, en-GB ham — qiya va kulrang. O'zbekcha sharhda lang yo'q, u o'zgarmadi. Ko'p tilli matn darsidagi til kodlari shunday ishlaydi. Chrome'da tekshirdik: [lang|="uz"] uz va uz-Cyrl ni topadi, xato yozilgan uzb ni esa yo'q.

4.4 Qaysi operatorni tanlash kerak?

flowchart LR
  Q{"Qiymatdan<br/>nima ma'lum?"}
  Q -->|"butun qiymat"| E["="]
  Q -->|"boshi"| B["^="]
  Q -->|"oxiri"| T["$="]
  Q -->|"o'rtadagi bo'lak"| I["*="]
  Q -->|"ro'yxatdagi so'z"| S["~="]
  Q -->|"til kodi"| L["|="]

Nimaga qarang: savol har doim bitta — qiymatning qaysi qismini bilasiz. Javobga qarab belgi tanlanadi.

Tekshirib ko'ring: Telefon havolalarini (href="tel:+998900000000") tanlaydigan selektor yozing.

5. Katta-kichik harf va i bayrog'i

5.1 Qaysi joyda farqlanadi

• Atribut nomi — farqlanmaydi. [DATA-ACHCHIQ] ham data-achchiq ni topadi (Chrome'da tekshirdik), lekin kichik harf yozing.
• Atribut qiymati — ko'pincha farqlanadi. href, class, id, data-* qiymatlari aynan yozilganidek solishtiriladi.
• Istisno. HTML standarti ba'zi atributlar ro'yxatini beradi — type, lang, rel shular jumlasidan. Ularning qiymatini brauzer katta-kichik harfsiz solishtiradi. Chrome'da tekshirdik: input[type="EMAIL"] oddiy type="email" maydonni ham topdi.

5.2 i bayrog'i

Fayl nomlari har xil yozilishi mumkin: menyu.pdf, Menyu.PDF. a[href$=".pdf"] ikkinchisini topmaydi. Yechim — qavs ichida, qiymatdan keyin bo'sh joy va i harfi:

<style>
  a[href$=".pdf"] {
    color: #2f6b3a;
  }
  a[href$=".pdf" i] {
    font-weight: bold;
  }
</style>
<p><a href="assets/files/menyu.pdf">Menyu (menyu.pdf)</a></p>
<p><a href="assets/files/Narxlar.PDF">Narxlar (Narxlar.PDF)</a></p>

Nimaga qarang: ikkala havola ham qalin — i li qoida ikkalasini topdi. Yashil esa faqat birinchisi — i siz qoida .PDF ni tanimadi. i — inglizcha insensitive ("sezmaydigan") so'zidan: katta-kichik harfni sezmaydi. Bu imkoniyat hamma zamonaviy brauzerlarda ishlaydi — Baseline'da "widely available" (Veb standartlari).

Uning teskarisi — s bayrog'i ("qat'iy solishtir") ham bor. Lekin u Baseline emas: Chrome va Edge'da yo'q. Chrome'da tekshirdik — s li qoida butunlay tashlandi. Hozircha ishlatmang.

Tekshirib ko'ring: a[href$=".jpg" i] qaysi havolalarni topadi: osh.JPG, osh.jpg, osh.jpeg?

6. Holatni atribut bilan bezash

6.1 aria-* — accessibility holati ko'rinishga ham

Joriy sahifani aria-current bilan ajratdik. Xuddi shunday, Qulay forma darsidagi xatoli maydonni ham ko'rsatamiz. U yerda xato bo'lsa maydonga aria-invalid="true" qo'yilgan edi. O'sha darsda "qizil rang keyinroq CSS bilan qo'shiladi" degan edik:

<style>
  [aria-invalid="true"] {
    border: 2px solid #b4461a;
  }
  span[id$="-xato"] {
    color: #b4461a;
  }
</style>
<label for="telefon">Telefon raqamingiz</label>
<span id="telefon-xato">Xato: raqamni to'liq kiriting.</span>
<input id="telefon" name="telefon" type="tel"
       value="+998 90 12" aria-invalid="true"
       aria-describedby="telefon-xato">

Nimaga qarang: xatoli maydon qalin qizg'ish ramkada, xato xabari ham qizg'ish. Xabarni id'si -xato bilan tugashi bo'yicha topdik ($=) — «Bahor» formasidagi id'lar shunday nomlangan: telefon-xato, ism-xato. Rang yolg'iz emas: xabardagi "Xato:" so'zi ma'noni rangsiz ham aytadi.

Nega class="xato" emas, aynan aria-invalid? Chunki bu atribut ekran o'quvchiga baribir kerak. Ko'rinishni unga bog'lasangiz, holat bitta joyda saqlanadi: atribut qo'yildi — Malika "invalid entry" ni eshitadi, ko'radigan mehmon esa qizil ramkani ko'radi. Dasturchi faqat class qo'yib, atributni unutib qo'yolmaydi.

Bu atributni xato tekshirilgandan keyin JavaScript qo'yadi — buni Atributlar va dataset darsida ko'rasiz. Brauzerning o'zi tekshiradigan holatlar uchun esa CSS'da :user-invalid bor — Holat pseudo-klasslari darsida.

Diqqat: Teskari yo'l — xato. aria-* atributini faqat bezash uchun qo'shmang. Ekran o'quvchi uni e'lon qiladi va noto'g'ri holat haqida gapiradi. ARIA asoslari darsidagi qoida: noto'g'ri ARIA uning yo'qligidan yomonroq. Faqat bezak uchun holat kerak bo'lsa — data-*.

6.2 data-* — o'zingizning holatlaringiz

Global atributlar darsida kartaga yana bir atribut qo'shgan edik: data-porsiya — bugun qolgan porsiyalar soni. Porsiya tugagan ("0") kartani xira qilamiz. Achchiqligi 2 va 3 bo'lgan taomlarni esa guruhlash bilan belgilaymiz (Asosiy selektorlar darsidagi vergul):

<style>
  article {
    border: 1px solid #5b6660;
    padding: 4px 12px;
  }
  [data-achchiq="2"],
  [data-achchiq="3"] {
    border-color: #b4461a;
  }
  [data-porsiya="0"] {
    color: #5b6660;
    border-style: dashed;
  }
</style>
<article data-achchiq="0" data-porsiya="12">
  <h3>Osh</h3><p>35 000 so'm</p>
</article>
<article data-achchiq="3" data-porsiya="4">
  <h3>Lag'mon</h3><p>28 000 so'm</p>
</article>
<article data-achchiq="2" data-porsiya="0">
  <h3>Manti</h3><p>Bugun tugadi</p>
</article>

Nimaga qarang: lag'mon va manti ramkasi qizg'ish — ular achchiq. Manti kartasining ramkasi uzuq-uzuq va matni kulrang — porsiya tugagan. Bitta kartaga ikki qoida birdan tushdi va ikkalasi ham ishladi. Porsiya soni o'zgarganda JavaScript faqat data-porsiya ni yangilaydi, qolganini CSS o'zi qiladi.

Shu yondashuv zamonaviy kutubxonalarda ham keng tarqalgan: komponent holatini data-state="open" kabi atributda saqlaydi, CSS esa [data-state="open"] bo'yicha bezaydi.

Tekshirib ko'ring: Kartada data-achchiq="3" va data-porsiya="0" birga bo'lsa, uning ramkasi qaysi rangda bo'ladi — qizg'ishmi yoki kulrangmi?

7. Ko'p uchraydigan xatolar

7.1 Qo'shtirnoqsiz raqam

[data-achchiq=3] — noto'g'ri selektor, butun qoida jim tashlanadi. Tuzatish: [data-achchiq="3"].

7.2 Qism qidirishda =

a[href="https"] hech narsani topmaydi — = butun qiymatni talab qiladi. Tuzatish: a[href^="https://"].

7.3 Class'ni = bilan qidirish

[class="taom-karta"] ikki class'li kartani o'tkazib yuboradi. Tuzatish: .taom-karta.

7.4 Katta-kichik harf

a[href$=".pdf"] Menyu.PDF ni topmaydi. Tuzatish: a[href$=".pdf" i].

7.5 Atribut nomida xato

[aria-curent="page"] — bitta r tushib qolgan. Brauzer bunday atributni qidiradi, topmaydi va jim turadi. VS Code ham xatoni ko'rmaydi: u HTML'dagi atribut nomlarini CSS bilan solishtirmaydi. Tuzatish: DevTools'da Ctrl + F bilan selektorni sinang (Asosiy selektorlar darsida ko'rgan edik) — "0 of 0" chiqsa, nomni tekshiring.

7.6 Bezak uchun aria-*

aria-selected="true" ni faqat rang uchun qo'yish — ekran o'quvchini aldaydi. Tuzatish: bezak holati uchun data-*.

8. Mashqlar

1-mashq (oson): Nechta havola?

<a href="menyu/">Menyu</a>
<a href="https://t.me/sizning_kanal">Telegram</a>
<a href="mailto:bahor@example.com">Email</a>
<a href="assets/files/menyu.PDF">PDF menyu</a>
<a href="https://example.com/sharh" rel="ugc nofollow">Sharh</a>

Har selektor nechta havolani tanlaydi?

• a[href^="https://"] —
• a[href$=".pdf"] —
• a[href$=".pdf" i] —
• a[href*="menyu"] —
• a[rel="nofollow"] —
• a[rel~="nofollow"] —

2-mashq (o'rta): Bron formasidagi yordam va xato matnlari

«Bahor» bron formasida har maydon yonida ikki xil matn bor: yo'riqnoma (id="...-yordam") va xato (id="...-xato"):

<div>
  <label for="ism">Ismingiz</label>
  <span id="ism-yordam">Pasportdagidek yozish shart emas.</span>
  <input id="ism" name="ism" type="text" required
         aria-describedby="ism-yordam">
</div>
<div>
  <label for="telefon">Telefon raqamingiz</label>
  <span id="telefon-yordam">Masalan: +998 90 000 00 00.</span>
  <span id="telefon-xato">Xato: raqamni to'liq kiriting.</span>
  <input id="telefon" name="telefon" type="tel" required
         aria-invalid="true"
         aria-describedby="telefon-yordam telefon-xato">
</div>

Class qo'shmasdan CSS yozing:

1. Hamma yo'riqnoma matnlari — kulrang (#5b6660).
2. Hamma xato matnlari — qizg'ish (#b4461a).
3. Xatoli maydon — 2px solid #b4461a ramka.
4. Telefon maydoni (type="tel") — raqamlar orasi kengroq: letter-spacing: 1px.

Ishora: id'lar qanday tugashiga qarang — $=. letter-spacing — harflar orasidagi masofa, Qator balandligi va harf oralig'i darsida to'liq.

<style>
  span[id$="-yordam"] {
    color: #5b6660;
  }
  span[id$="-xato"] {
    color: #b4461a;
  }
  [aria-invalid="true"] {
    border: 2px solid #b4461a;
  }
  input[type="tel"] {
    letter-spacing: 1px;
  }
</style>
<div>
  <label for="ism">Ismingiz</label>
  <span id="ism-yordam">Pasportdagidek yozish shart emas.</span>
  <input id="ism" name="ism" type="text" required
         aria-describedby="ism-yordam">
</div>
<div>
  <label for="telefon">Telefon raqamingiz</label>
  <span id="telefon-yordam">Masalan: +998 90 000 00 00.</span>
  <span id="telefon-xato">Xato: raqamni to'liq kiriting.</span>
  <input id="telefon" name="telefon" type="tel" required
         aria-invalid="true" value="+998 90 12"
         aria-describedby="telefon-yordam telefon-xato">
</div>

3-mashq (qiyin): Atribut detektivi

Stajyor menyu sahifasi uchun shunday CSS yozdi. Birortasi ham ishlamadi:

[data-achchiq=3] { border-color: #b4461a; }
a[href="https"] { color: #2f6b3a; }
[class="taom-karta"] { padding: 4px 12px; }
nav[aria-label=Non yo'li] a { font-size: 14px; }
a[href$=".pdf"] { font-weight: bold; }

HTML'da: kartalar class="taom-karta yangi", PDF havolasi href="assets/files/Menyu.PDF", tashqi havolalar https:// bilan boshlanadi.

Har qatorning xatosini toping va tuzating.

Ishora: har qatorni o'ngdan chapga o'qing va HTML'dagi haqiqiy qiymat bilan solishtiring. Qaysi qatorlar sintaksis bo'yicha noto'g'ri, qaysilari to'g'ri, lekin hech narsa topmaydi?

[data-achchiq="3"] { border-color: #b4461a; }
a[href^="https://"] { color: #2f6b3a; }
.taom-karta { padding: 4px 12px; }
nav[aria-label="Non yo'li"] a { font-size: 14px; }
a[href$=".pdf" i] { font-weight: bold; }

4-mashq: Portfolio qadami — atributlar bilan bezash

Portfolio HTML'iga yana tegmaymiz. asosiy.css ga qo'shing:

1. Asosiy menyudagi joriy sahifa havolasi — qalin va matn rangida (#1f2a24). Faqat asosiy menyudagi: non yo'lidagi joriy sahifa bunga tushmasin.
2. Non yo'li (nav — aria-label="Non yo'li") — 14px.
3. Email havolalari — qalin.
4. Aloqa sahifasidagi savol-javob bloklari (details, name="savollar") — 1px solid #c9d6cf ramka va 4px 12px ichki bo'sh joy.
5. Ochiq savol-javob bloki — foni #e8f1ec.

Ishora: 1-band uchun ikki atribut selektori avlod kombinatori bilan birlashadi: nav[aria-label="..."] [aria-current="page"]. Qo'shtirnoq ichidagi qiymat HTML'dagi aria-label bilan harfma-harf bir xil bo'lsin.

/* Asosiy menyudagi joriy sahifa */
nav[aria-label="Asosiy menyu"] [aria-current="page"] {
  color: #1f2a24;
  font-weight: bold;
}

/* Non yo'li */
nav[aria-label="Non yo'li"] {
  font-size: 14px;
}

/* Email havolalari */
a[href^="mailto:"] {
  font-weight: bold;
}

/* Aloqa sahifasidagi savol-javob */
details[name="savollar"] {
  border: 1px solid #c9d6cf;
  padding: 4px 12px;
}

details[name="savollar"][open] {
  background-color: #e8f1ec;
}

<style>
  body {
    font-family: system-ui, sans-serif;
    color: #1f2a24;
    background-color: #f7faf8;
  }
  h1, h2 { color: #1f6f4a; }
  header nav a { color: #1f6f4a; }
  nav[aria-label="Asosiy menyu"] [aria-current="page"] {
    color: #1f2a24;
    font-weight: bold;
  }
  a[href^="mailto:"] { font-weight: bold; }
  details[name="savollar"] {
    border: 1px solid #c9d6cf;
    padding: 4px 12px;
  }
  details[name="savollar"][open] {
    background-color: #e8f1ec;
  }
</style>
<header>
  <nav aria-label="Asosiy menyu">
    <ul>
      <li><a href="../">Bosh sahifa</a></li>
      <li><a href="./" aria-current="page">Aloqa</a></li>
    </ul>
  </nav>
</header>
<main id="asosiy">
  <h1>Aloqa</h1>
  <p>Email: <a href="mailto:aziz@example.com">aziz@example.com</a></p>
  <h2>Ko'p so'raladigan savollar</h2>
  <details name="savollar" open>
    <summary>Qancha vaqtda javob berasiz?</summary>
    <p>Odatda bir kun ichida.</p>
  </details>
  <details name="savollar">
    <summary>Buyurtma olasizmi?</summary>
    <p>Kichik HTML sahifalar uchun — ha.</p>
  </details>
</main>

9. Real ishda

• Dizayn tizimlari holatni ko'pincha atributlarda saqlaydi: aria-expanded="true", aria-current="page", data-state="open". Class nomlari chalkashib ketmaydi, accessibility esa "tekin" keladi.
• Tailwind (tayyor class'lar to'plami, kursda alohida o'rganamiz) aria-* va data-* holatlari uchun maxsus yozuvga ega. Uning ortida aynan shu darsdagi atribut selektorlari turadi.
• JavaScript ham havolalarni shu selektorlar bilan topadi: document.querySelectorAll('a[href^="https://"]') — Elementlarni tanlash darsida.
• Intervyuda so'raladi: "^=, $= va *= farqi?", "Holatni class bilan bezaysizmi yoki atribut bilan — nega?". Ikkinchi savolga yaxshi javob: "haqiqiy accessibility holati bo'lsa — aria-* bo'yicha, bezak holati bo'lsa — data-* bo'yicha".

Xulosa

• [a] — atribut bor; [a="x"] — qiymat aniq teng. Qiymat doim qo'shtirnoqda.
• Qism bo'yicha: ^= boshi, $= oxiri, *= ichida, ~= so'zlar ro'yxatida, |= til kodi.
• Atribut nomi katta-kichik harfni farqlamaydi, qiymati ko'pincha farqlaydi; i bayrog'i buni o'chiradi. s bayrog'i hozircha Baseline emas.
• aria-* bo'yicha bezash ko'rinish va accessibility'ni bitta holatga bog'laydi; bezak holatlari uchun — data-*.
• Atribut selektori class kabi "og'ir" va kombinatorlar bilan birga ishlaydi: nav[aria-label="Asosiy menyu"] [aria-current="page"].

Keyingi dars: Holat pseudo-klasslari — sichqoncha ustida, klaviatura fokusida va to'ldirilgan formada element ko'rinishini o'zgartiramiz.

Manbalar

• MDN: "Attribute selectors" — developer.mozilla.org
• W3C: "Selectors Level 4", "Attribute selectors" bo'limi — w3.org/TR/selectors-4
• HTML Living Standard: "Case-sensitivity of selectors" — html.spec.whatwg.org
• web-features (Baseline ma'lumotlari): "case-insensitive-attributes", "case-sensitive-attributes" — github.com/web-platform-dx/web-features