CSS selektorlari - HTML va CSS

Selektor - CSS ning eng kuchli qismi. U "qaysi elementga" degan savolga javob beradi.

Asosiy selektorlar #

CSS

/* Teg bo'yicha - barcha paragraflar */
p { color: #334155; }

/* Klass bo'yicha - eng ko'p ishlatiladigan */
.karta { border: 1px solid #e2e8f0; }

/* ID bo'yicha - faqat bitta element */
#asosiy-menyu { position: sticky; }

/* Universal - barcha elementlar */
* { box-sizing: border-box; }

/* Bir nechta selektor - vergul bilan */
h1, h2, h3 { font-weight: 700; }

Klassdan foydalaning

Amalda 90% CSS .class selektorlari bilan yoziladi:

Teg selektori juda keng ta'sir qiladi
#id juda kuchli (ustunlik 100) va qayta ishlatib bo'lmaydi
.class esa moslashuvchan va nazorat qilish oson

Birlashtiruvchi selektorlar #

Bo'shliq va > belgisi orasidagi farqni tushunish muhim

CSS

/* Avlod - ichidagi barcha (necha daraja bo'lsa ham) */
.maqola p { line-height: 1.7; }

/* Bevosita bola - faqat birinchi daraja */
.menyu > li { display: inline-block; }

/* Keyingi aka - darhol keyin keladigan */
h2 + p { margin-top: 0; }

/* Barcha keyingi akalar */
h2 ~ p { color: #475569; }

Atribut selektorlari #

CSS

/* Atribut mavjud */
[disabled] { opacity: 0.5; }

/* Aniq qiymat */
input[type="email"] { text-transform: lowercase; }

/* Shu bilan boshlanadi */
a[href^="https"] { color: #16a34a; }

/* Shu bilan tugaydi */
a[href$=".pdf"]::after { content: " (PDF)"; }

/* Ichida bor */
a[href*="softromeda"] { font-weight: 600; }

/* So'zlar orasida bor */
[class~="muhim"] { border-left: 3px solid red; }

Amaliy foyda

CSS

/* Tashqi havolalarga ikonka qo'shish */
a[href^="http"]:not([href*="softromeda.uz"])::after {
    content: " \2197";       /* strelka */
}

/* Fayl turiga qarab belgi */
a[href$=".pdf"]::before { content: "PDF "; }
a[href$=".zip"]::before { content: "ZIP "; }

Psevdo-klasslar #

Element holatini tanlaydi:

CSS

/* Foydalanuvchi harakati */
a:hover        { text-decoration: underline; }
button:active  { transform: translateY(1px); }
input:focus    { border-color: #2563eb; }
a:visited      { color: #7c3aed; }

/* Faqat klaviatura bilan fokus - juda foydali */
button:focus-visible { outline: 2px solid #2563eb; }

/* Forma holatlari */
input:disabled    { background: #f1f5f9; }
input:checked     { accent-color: #2563eb; }
input:required    { border-left: 3px solid #dc2626; }
input:invalid     { border-color: #dc2626; }
input:valid       { border-color: #16a34a; }
input:placeholder-shown { font-style: italic; }

Tartib bo'yicha tanlash #

CSS

li:first-child     { font-weight: bold; }
li:last-child      { border-bottom: none; }
li:nth-child(2)    { color: red; }
li:nth-child(odd)  { background: #f8fafc; }
li:nth-child(even) { background: #ffffff; }
li:nth-child(3n)   { color: #2563eb; }        /* har uchinchi */
li:nth-last-child(2) { color: green; }        /* oxiridan ikkinchi */

p:only-child       { text-align: center; }
p:empty            { display: none; }

nth-child formulasi: an + b ko'rinishida yoziladi

`:not()`, `:is()`, `:where()` #

CSS

/* Bundan tashqari hamma */
li:not(.faol) { opacity: 0.7; }
input:not([type="hidden"]) { display: block; }

/* Bir nechta variantni qisqartirish */
:is(h1, h2, h3) a { color: inherit; }

/* Xuddi shunday, lekin ustunligi 0 */
:where(h1, h2, h3) a { color: inherit; }

:is() va :where() farqi

Ikkalasi ham kodni qisqartiradi, lekin ustunligi har xil:

:is() - eng kuchli argumentning ustunligini oladi
:where() - har doim 0 ustunlik

Kutubxona yoki asosiy (base) uslublar yozayotganda :where() afzal - foydalanuvchi uni osongina bekor qila oladi.

Psevdo-elementlar #

Element ichida yangi qism yaratadi:

CSS

/* Oldiga va keyiniga mazmun qo'shish */
.majburiy::after {
    content: " *";
    color: #dc2626;
}

.iqtibos::before {
    content: "\201C";       /* ochuvchi qo'shtirnoq */
    font-size: 3rem;
    color: #cbd5e1;
}

/* Birinchi harf va satr */
.maqola p:first-of-type::first-letter {
    float: left;
    font-size: 3.5rem;
    line-height: 1;
    padding-right: 8px;
    color: #2563eb;
}

.maqola p::first-line {
    font-weight: 600;
}

/* Tanlangan matn rangi */
::selection {
    background: #dbeafe;
    color: #1e40af;
}

/* Placeholder ko'rinishi */
input::placeholder {
    color: #94a3b8;
    font-style: italic;
}

/* Ro'yxat belgisi */
li::marker {
    color: #2563eb;
    font-weight: bold;
}

::before va ::after da content majburiy

CSS

/* Ishlamaydi */
.karta::before { background: red; width: 20px; }

/* Ishlaydi */
.karta::before {
    content: "";        /* bo'sh bo'lsa ham kerak */
    display: block;
    width: 20px;
    height: 20px;
    background: red;
}

Selektorlar jadvali #

Selektor	Nima tanlaydi
`.klass`	Klassga ega elementlar
`#id`	Yagona element
`A B`	B, A ning avlodi
`A > B`	B, A ning bevosita bolasi
`A + B`	A dan darhol keyingi B
`A ~ B`	A dan keyingi barcha B
`[attr]`	Atributga ega
`[attr="x"]`	Atribut aynan x
`[attr^="x"]`	x bilan boshlanadi
`[attr$="x"]`	x bilan tugaydi
`[attr*="x"]`	x ni o'z ichiga oladi
`:hover`	Sichqoncha ustida
`:focus`	Fokusda
`:nth-child(n)`	n-chi bola
`:not(X)`	X dan tashqari
`::before`	Element oldiga qo'shiladi
`::after`	Element keyiniga qo'shiladi

Amaliy misol: jadval va menyu #

CSS

/* Jadval qatorlarini navbatma-navbat bo'yash */
tbody tr:nth-child(even) {
    background: #f8fafc;
}

tbody tr:hover {
    background: #eff6ff;
}

/* Oxirgi qatorda chegara yo'q */
tbody tr:last-child td {
    border-bottom: none;
}

/* Menyu: elementlar orasida ajratgich, oxirgisidan keyin yo'q */
.menyu li:not(:last-child)::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 14px;
    background: #cbd5e1;
    margin: 0 12px;
    vertical-align: middle;
}

/* Faol havola */
.menyu a[aria-current="page"] {
    color: #2563eb;
    font-weight: 700;
    border-bottom: 2px solid #2563eb;
}

/* Forma: to'ldirilgan va noto'g'ri maydonlar */
input:not(:placeholder-shown):invalid {
    border-color: #dc2626;
    background: #fef2f2;
}

input:not(:placeholder-shown):valid {
    border-color: #16a34a;
}

/* Majburiy maydon yorlig'iga yulduzcha */
.maydon:has(input[required]) label::after {
    content: " *";
    color: #dc2626;
}

:has() - ota elementni tanlash

Uzoq yillar CSS da "ota elementni tanlash" imkonsiz edi. :has() buni hal qildi:

CSS

/* Ichida rasm bo'lgan kartochka */
.karta:has(img) { padding: 0; }

/* Belgilangan checkbox ning otasi */
label:has(input:checked) { background: #dbeafe; }

Bu 2023-yildan barcha zamonaviy brauzerlarda ishlaydi.

Amaliy topshiriq

Jadval yarating: toq qatorlar kulrang, ustiga kelganda ko'k fon.
Menyu yarating: faol element ostida chiziq, elementlar orasida ajratgich (::after).
a[href^="http"] bilan tashqi havolalarga strelka qo'shing.
Formada :focus da chegarani ko'k, :invalid da qizil qiling.
Maqolaning birinchi paragrafi birinchi harfini ::first-letter bilan kattalashtiring.
:nth-child(3n) bilan har uchinchi kartochkani ajratib ko'rsating.

Xulosa #

Amalda asosan .class selektorlari ishlatiladi.
Bo'shliq avlodni, > bevosita bolani tanlaydi - farqni yodda tuting.
Atribut selektorlari (^=, $=, *=) havola va formalar bilan ishlashda kuchli.
Psevdo-klasslar holatni (:hover, :focus, :checked) tanlaydi.
Psevdo-elementlar (::before, ::after) yangi mazmun yaratadi; content majburiy.
:not(), :is(), :has() kodni sezilarli qisqartiradi.

Keyingi bo'limda ranglar va tipografiya bilan ishlashni o'rganamiz.

Asosiy selektorlar #

Birlashtiruvchi selektorlar #

Atribut selektorlari #

Psevdo-klasslar #

Tartib bo'yicha tanlash #

:not(), :is(), :where() #

Psevdo-elementlar #

Selektorlar jadvali #

Amaliy misol: jadval va menyu #

Xulosa #

Xatolik topdingizmi?

`:not()`, `:is()`, `:where()` #