Gudri izmantojami CSS selektori jeb atlasītāji

Iepriekš jūs droši vien jau zinājāt par dažādiem CSS atlasītāju veidiem. Atcerieties, ka CSS atlasītāji atbilst konkrētiem elementiem vai elementu grupām HTML dokumentā. Šajā rakstā jūs uzzināsiet par papildu bieži izmantotajiem CSS atlasītājiem jeb selektoriem. Bet pirms to izpētīšanas īsi pārskatīsim tos, kuri jau pamatā biežāk zināmi.

Elementu atlasītājs ļauj izstrādātājiem atlasīt html elementus, pamatojoties uz to elementa veidu.

HTML elements

<p>Reiz, sen senos laikos...</p> <!-- HTML paragrāfa elements, kuru iespējams atlasīt -->

<p>Brīnumainā pasaulē...</p> <!-- HTML paragrāfa tags, kuru iespējams atlasīt -->

/* tiek atlasīts HTML paragrāfa elements un izmantojot CSS kodu nokrāsots zils */
p { 

color: blue;

}

HTML ID

ID atlasītāji izmanto html elementa ID atribūtu. Tā kā ID tīmekļa lapā ir unikāls, tas ļauj izstrādātājam izvēlēties konkrētu elementu veidošanai.

<span id="jaunākais">Jauns!</span>

#jaunākais {

color: white;

background-color: blue;

}

HTML klases

Klases atlasītāji ļauj atlasīt elementus, pamatojoties uz tiem piemēroto klases atribūtu. Izmantojot klases atlasītājus, varat lietot noteikumus visiem elementiem ar norādīto klases nosaukumu.

<a class="navigācija">doties atpakaļ</a>

<p class="navigācija">doties uz priekšu</p>

.navigācija {

margin: 20px;

}

Cerams, ka esat pieredzējis, cik tie var būt noderīgi un efektīvi, taču tas vēl nav viss.

Tā kā laika gaitā attīstījās uz CSS koda bāzes, tika pievienoti vairāk atlasītāju, lai uzlabotu CSS dizaina un stila efektu. Izpētīsim dažus no šiem plaši izmantotajiem atlasītājiem.

Atribūtu selektori

Vispirms pievērsīsimies atribūtu atlasītājiem.

[attr=value]{}

[attr~=value]

[attr$=value]

[attr*=value]

Atribūtu atlasītājam ir dažas sintakses variācijas. Atribūtu atlasītāji atbilst noteiktā elementa vērtības atribūtam. Vai varat atcerēties, ko nozīmē atribūti un vērtība?

Īss kopsavilkums, pieņemsim, ka jums ir html attēla tags,

<img src="pirmais.jpg" alt="pirmais attēls">

img ir taga nosaukums, savukārt src un alt ir tā atribūtu nosaukumi.

Attēla faila faktiskais nosaukums pirmais.jpg ir vērtība.

Tagad izpētīsim piemēru, kā var izmantot atribūtu atlasītājus. Pieņemsim, ka jums ir html fails ar trim a tagiem, katrs ar h ref atribūtu, kas norāda uz citu vietnes lapu.

<a href="https://kas.is.lv">Kas.id.lv - mājaslapa</a>

<p>

<a href="https://kas.id.lv/kas-blogs/" class="blogs">Kas?Blogs!</a>

<p>

<p>

<a href="https://ogukaste.kas.id.lv" class="Ogas">Ogu piegādes</a>

<p>

Izmantojot dažādas atribūtu atlasītāju variācijas, varat atlasīt dažādus html atribūtus. Piemēram, varat veidot stilu visiem elementiem, kuriem ir noteikta klase, pievienojot klasi kvadrātiekavās.

a[class] {

color: darkgreen;

}

Šajā gadījumā otrā un trešā saite kļūs zaļa. Varat arī atlasīt mērķauditoriju pēc visiem trim elementiem, ievietojot atribūtu href, zvaigznīti un kopējo vērtību, kas ir daļa no visām saitēm, kuras vēlaties atlasīt.

a[href*="kas"] {

color: darkgreen;

}

Šajā gadījumā tā var būt teksta “kas”. Tagad visas trīs saites būs zaļas, jo katra saite satur vārdu “kas”. Vai arī varat atlasīt mērķauditoriju tikai pirmajā elementā, pievienojot konkrēto saiti kā atribūta href vērtību, kuru vēlaties atlasīt kvadrātiekavās.

a[href="https://kas.is.lv"] {

color: darkgreen;

}

Visur, kur tīmekļa lapā ir atribūts, varat izmantot kādu atribūtu atlasītāja variantu, lai to mainītu. Tas padara atribūtu atlasītājus par ļoti elastīgu veidošanas rīku, taču pāriesim pie diviem citiem plaši izmantotiem atlasītājiem, par kuriem jums jāzina.

N-tā tipa un n-tās atvases atlasītājiem(nth-child un nth-type), šo divu atlasītāju sintakse ir ļoti līdzīga.

/* nth-child sintakse */

element: nth-child(n) {

property: value;

}

/* nth-type sintakse */

element: nth-of-type(n) {

property: value;

}

n-tie VECĀKELEMENTI

Kā norāda to nosaukums, šie atlasītāji ir mērķēti uz norādītā

vecākelementa n-to bērnu vai n-to veidu, bet ko tieši nozīmē vecāks?

Pieņemsim, ka jums ir daži saraksta elementi nesakārtotā saraksta elementā.

<ul> <!-- nesakārtotais saraksts "unordered list" -->

<li> viens </li>

<li> divi </li>

<li> trīs </li>

</ul>

Nekārtotais saraksta elements “<ul>” šajā gadījumā ir vecāktags, un trīs saraksta elementi ir atvasinājumi. Tagad norādīsim, ka otrajam saraksta elementam ir jābūt noteiktam stilam. Šajā gadījumā varat izmantot gan n-tā tipa, gan n-tā bērna atlasītājus, lai to izdarītu.

/* n-tais tips */
li: nth-of-type(2) {

color: aqua;

}

/* n-tais bērns */

li: nth-child(2) {

color: aqua;

}

Abi radīs vienu un to pašu izvadi, kur otrais saraksta elements šajā gadījumā būs aqua krāsā.

Zvaigznes atlasītājs

Vēl viens bieži lietots atlasītājs ir zvaigznītes atlasītājs, tāpat kā daudzās citās programmēšanas valodās, zvaigžņu atlasītājus izmanto visu tīmekļa lapas elementu atlasei.

/* sintakse */

*{

property: value;

}

Tas ietekmēs visus html faila elementus. Tas ir īpaši noderīgi, ja vēlaties atiestatīt noklusējuma iestatījumus un stilus, ko pārlūkprogrammas izmanto, pirms tās lieto jūsu stilu tīmekļa lapai.

Selektoru/Atlasītāju grupēšana

Visbeidzot, vai zinājāt, ka varat grupēt atlasītājus? Ja vēlaties lietot vienu un to pašu stilu vairāk nekā viena veida elementiem, piemēram, virsraksta un rindkopas elementiem, varat izmantot grupu atlasītājus.

Elementu selektora sintakse:

h1 {

color: blue;

text-align: center;

}

p {

color: blue;

text-align: center;

}

Grupu selektori (grupēti elementu selektori)

h1, p {

color: blue;

text-align: center;

}

Tā vietā, lai izmantotu elementu atlasītājus, kur katram elementam izmantojat kārtulu, piemēram, heading1 un P, varat ierakstīt h1, p un pēc tam pievienot CSS rekvizītus. Pēc tam CSS noteikums tiks piemērots visiem pirmās virsraksta un rindkopas elementiem. Grupu atlasītāji var ietaupīt daudz laika, tos sauc arī par atlasītāju stakiem. Šajā rakstā jūs pārskatījāt jums pazīstamos CSS atlasītājus. Jūs arī uzzinājāt par papildu plaši izmantotajiem CSS atlasītājiem, to sintaksi un to, kā tos var izmantot, lai atlasītu konkrētus elementus savās tīmekļa lapās. Atlasītāji aptvēra vietu, atribūtu atlasītājus veidu un n-to bērnu atlasītājus, zvaigžņu atlasītājus un grupu atlasītājus. Ir svarīgi iemācīties izmantot CSS atlasītājus, jo tas ļauj jums būt precīzākam, veidojot tīmekļa lapu stilu.