10 CSS selectorov, ktoré by nemali chýbať vo vašom CSS

css-10-selectors

Zakaždým, keď sa píšeme akékoľvek CSS – používame selektory. Ale aj napriek tomu, CSS selektory sú jedným z najviac zanedbávaných častí špecifikácie.

Hovoríme o veľkej transformácii v CSS3, ale až príliš často zabúdame základy. Dobré využitie selektorov robí naše každodenné kódovanie jednoduchšie a elegantné. Dnes spomeniem 10 CSS selektorov, ktoré sú účinné a veľmi užitočné.

*

Selector * môže byť ten, ktorý si zapamätáme najľahšie, ale nie až tak často ho dostatočne využívame. Určuje pravidlo pre všetky štýly na stránke a je to skvelý nástroj pre vytváranie reset atribútov a tiež pre tvorbu niektorých stránok v základe, ako napr.: font-family alebo veľkosti, ktoré chcete mať.

* {
   margin: 0;
   padding: 0;
   font-family: helvetica, arial, sans-serif;
   font-size: 16px;
}

A + B

Tento selector sa nazýva susediaci selector a urobí to, že vyberie prvok, ktorý je hneď po prvom prvku. Ak by ste chceli vybrať prvý div po header, napísali by ste:

header + div {
   margin-top: 50px;
}

A > B

Tento selektor vyberie iba „priame deti“ (children) – na rozdiel od A B, ktorý vyberie „nejaké deti“ na úrovni A. Tento selektor sa odporúča pri práci s „deťmi“ na prvej úrovni z nadradeného prvku. Napríklad: ak chcete vybrať prvú úroveň položiek zoznamu, ktorý vyzerá takto:

<ul>
    <li>List Item With ul
        <ul>
            <li>Sub list item</li>
            <li>Sub list item</li>
            <li>Sub list item</li>
        </ul>
    </li>
    <li>List Item</li>
    <li>List Item</li>
</ul>

Môžeme použiť tento selector, pretože zvyčajne AB selector bude tiež vybraný zo zoznamu položiek vo vnútri vnoreného zoznamu.

ul > li {
   background: black;
   color: white;
}

A[href*=”nieco”]

Toto je naozaj dobrý selector, keď potrebujete, aby štýl určitého odkazu bol odlišný ako zvyšné odkazy – v úvodzovky sa budú porovnávať hodnoty z href odkazu. Napríklad: ak chceme definovať štýl pre všetky odkazy na Facebook a aby boli modrej farby – použili by sme:

a[href*="facebook"] {
   color: blue;
}

Môžeme použiť aj verziu bez *, ktorá zodpovedá presnej URL adrese, ktorú môžeme použiť na presne definované odkazy.

A:not(B)

Tento selektor je obzvlášť užitočný, pretože to je to negácia klauzuly, ktorá vám umožní vybrať ľubovoľnú skupinu prvkov, ktoré sa nezhodujú a sú umiestnené v B. Ak chcete vybrať každý DIV s výnimkou .footer – práve toto potrebujete:

div:not(.footer) {
   margin-bottom: 40px;
}

A:first-child  / A:last-child

First-child a last-child nám umožňujú vybrať „prvé a posledné dieťa“ nadradeného prvku. To môže byť veľkým prínosom, pokiaľ ide napr. o zoznam položiek a odstránenie margin-right alebo border. Ak chceme odstrániť border v prvej položke zoznamu a margin v poslednej položke zoznamu – zapíšeme to takto:

ul li:first-child {  
   border: none;  
}     
ul li:last-child {  
   margin-right: 0px;
}

A:nth-child(n)

Nth-child je jednoduchý spôsob, ako vybrať ľubovoľné „dieťa“ elementu podľa požiadavky. Ak by sme napríklad chceli tretiu položku v zozname – definovali by sme to nasledovne:

ul li:nth-child(3) {
   background: #ccc;
}

Môžeme použiť nth-child na výber každého násobku čísla pomocou premennej N, napríklad: keď dáme 3N – zvolíme čísla položiek v zozname: 3, 6, 9, 12 a tak ďalej.

A:nth-last-child(n)

Nth-last-child funguje ako nth-child, ale namiesto počítanie od prvej položky zoznamu začne počítať od poslednej, takže ak ho použijeme s číslom dva, bude vyberaná položka zoznamu, ktorá prichádza pred poslednou a jej použitie je rovnaké ako selector nth-child:

ul li:nth-last-child(2) {
   background: #ccc;
}

A:nth-of-type(n)

Tento selektor robí presne to, čo si myslíte že robí – pozrie sa, aký typ prvku sme umiestnili za neho, a ten vyberie. Napríklad: tretí prvok na stránke, ktorý zodpovedá tomu, čo sme zadali. Pre výber tretieho odstavca P v DIV by sme použili kód:

div p:nth-of-type(3) {
   font-style: italic;
}

A:visited

Všimli ste si niekedy, že pri hľadaní nejakých vecí na google sú navštívené odkazy (stránky) v inej farbe? To je presne to, čo tento selector robí – zmení štýl navštívených odkazov.

a:visited {
   color: blue;
}

Podľa mojich skúseností – s použitím týchto druhov selectorov pri kódovaní CSS si môžete ušetriť veľa času. A to je len taký malý základ CSS selectorov: existuje veľa ďalších, ktoré sú nemenej užitočné.