Интихобгарҳо

Ин барои чӣ лозим аст

Қоидаи p { color: red; } ҳамаи сархатҳоро ранг мекунад. Агар танҳо якеро ранг кардан лозим бошад-чӣ? Ё танҳо истинодҳои менюро? Ё ҳар сатри дуюми ҷадвалро? Барои ин интихобгарҳо ҳастанд — роҳҳои дақиқ нишон додани унсурҳое, ки услуб ба онҳо татбиқ мешавад. Дар сайти ҳақиқӣ бе онҳо кор намешавад.

Интихобгар аз рӯи тег

Аллакай шинос: номи тег бе қавсҳо.

h2 { color: teal; }

Натиҷа: ҳамаи <h2>-ҳо дар саҳифа — фирӯзаранг.

Синф

Синф — нишонаест, ки ту худат бо атрибути class ба унсурҳо меовезӣ. Дар CSS синф бо нуқта навишта мешавад:

<style>
  .price { color: green; font-weight: bold; }
</style>
<p>Чой — <span class="price">5 сомонӣ</span></p>
<p>Қаҳва — <span class="price">9 сомонӣ</span></p>

Натиҷа: ҳарду нарх сабз ва ғафс, матни боқимонда оддӣ.

Як синфро ба ҳар қадар унсур овехтан мумкин, ва унсур метавонад якчанд синф бо фосила дошта бошад: class="price sale". Он гоҳ ба он қоидаҳои ҳам .price ва ҳам .sale татбиқ мешаванд.

Номҳои синфҳоро аз рӯи маъно гузор: .price, .error, .card — на .red-text (шояд пагоҳ хатоҳо норанҷӣ шаванд).

Муайянкунандаи id

id — номи ягонаи унсур (яке дар саҳифа). Дар CSS бо панҷара навишта мешавад:

<style>
  #logo { font-size: 30px; }
</style>
<div id="logo">CodeWithMe</div>

Натиҷа: навиштаҷоти калони «CodeWithMe».

Барои услубҳо бештар синфҳоро истифода мебаранд: id хеле «қавӣ» аст (ниг. поён) ва такрор намешавад. id барои лангарҳо (href="#logo") ва барои JavaScript лозим аст.

Гурӯҳҳо ва омезишҳо

h1, h2, h3 { font-family: Georgia, serif; }  /* гурӯҳ: бо вергул */
nav a { color: white; }                      /* насл: a дар ҳар ҷои дохили nav */
ul > li { list-style: square; }              /* фарзанд: li мустақиман дар дохили ul */
p.note { font-style: italic; }               /* p, ки синфи note дорад */

• Вергул — «ҳам ин, ҳам он»: як қоида барои якчанд интихобгар.
• Фосила — «дар дохил»: nav a истинодро дар ҳар чуқурии дохили <nav> меёбад.
• > — «мустақиман дар дохил»: танҳо фарзандони бевосита.
• Бе фосила — «ҳамзамон»: p.note — сархат бо синфи note (.note дар <div> мувофиқ намеояд).

Псевдосинфҳо

Псевдосинф — ҳолат ё мавқеи унсур. Бо ду нуқта навишта мешавад:

a:hover { color: orange; }          /* зери курсори муш */
input:focus { border-color: blue; } /* майдоне, ки курсор дар он аст */
li:first-child { font-weight: bold; } /* фарзанди якуми волид */
li:last-child { color: gray; }      /* охирин */
tr:nth-child(even) { background: #eee; } /* ҷуфтҳо: 2, 4, 6… */
tr:nth-child(odd) { background: white; } /* тоқҳо: 1, 3, 5… */
li:nth-child(3) { color: red; }     /* танҳо сеюм */

Натиҷа: истинодҳо ҳангоми овардани муш норанҷӣ мешаванд, ҷадвал бошад «гӯрахар»-рах мешавад, ки сатрҳои ҷуфташ хокистарӣ.

:nth-child(3n) ҳар унсури сеюмро интихоб мекунад — 3, 6, 9…

Қуввати интихобгар (махсусият)

Агар қоидаҳо баҳс кунанд, интихобгари дақиқтар ғолиб мешавад — новобаста аз он ки кадомаш дертар навишта шудааст:

<style>
  #main { color: red; }
  .text { color: green; }
  p { color: blue; }
</style>
<p id="main" class="text">Ман чӣ ранг дорам?</p>

Натиҷа: сурх. Қуввати интихобгарҳо: id > синф (ва псевдосинф) > тег. Тартиби «дертар — қавитар» танҳо ҳангоми қуввати баробар кор мекунад.

Қувватро бо «хол»-ҳо тахмин кардан мумкин: ҳар #id — сад, ҳар .синф ё :псевдосинф — даҳ, ҳар тег — як. nav a = 2, .menu a = 11, #top a = 101.

Дар дохил чӣ тавр кор мекунад

Браузер интихобгарро аз рост ба чап месанҷад: барои nav a вай ҳар истинодро гирифта мепурсад «оё дар байни аҷдоди ман <nav> ҳаст?». Бинобар ин қисми ростатарини интихобгар асосӣ аст: он мегӯяд, ки кадом унсур ранг мешавад.

Хатоҳои маъмул

1. Нуқта ё панҷараро фаромӯш карданд. warning { … } теги <warning>-ро меҷӯяд, на синфро.
2. Нуқта дар HTML. class=".warning" — нодуруст. Дар HTML бе нуқта навишта мешавад: class="warning".
3. Фосилаи зиёдатӣ. p .note (насл бо синф дар дохили сархат) ва p.note (худи сархат бо синф) — чизҳои гуногунанд.
4. Қоида аз сабаби қувват «кор намекунад». Агар услуб татбиқ нашуд, санҷ, ки интихобгари қавитар нест.
5. !important дар ҳама ҷо. Калимаи !important ҳама чизро мағлуб мекунад, аммо баъд онро ҳеҷ чиз мағлуб карда наметавонад. Дар ҳолати охирин истифода бар.

Ёддошт

Интихобгар	Чиро интихоб мекунад
p	ҳамаи <p>
.card	унсурҳо бо class="card"
#logo	унсур бо id="logo"
h1, h2	ҳам <h1>, ҳам <h2>
nav a	<a> дар ҳар ҷои дохили <nav>
ul > li	<li> мустақиман дар дохили <ul>
p.note	<p> бо синфи note
a:hover, input:focus	зери муш, дар фокус
:first-child, :last-child	фарзанди якум, охирин
:nth-child(even / odd / 3)	ҷуфтҳо, тоқҳо, сеюм
#id > .синф > тег	қуввати интихобгарҳо