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é.
Módne trendy sa nám každú sezónu neustále menia, kvety však stále ostávajú! Preto nadčasové a šik kvetinové šaty by nemali rozhodne vo vašom šatníku chýbať. Kvetinové šaty sú vhodné rovnako ako do práce aj na špeciálnu príležitosť ako svadba a preto sa na
prejsť na článokÚdržba našich domácností je záležitosť, ktorej sa nevyhne nikto z nás a práve preto je dôležité byť pripravený. Ak ste stali novým majiteľom nehnuteľnosti, určite vás bude zaujímať, ktoré nástroje je dôležité mať k dispozícii. Pozrite sa na náš zoznam nás
prejsť na článokViete, aké kľúčové prvky by nemali chýbať na webe personálnej agentúry? Ide napríklad o mzdové kalkulačky, ktoré sú užitočným nástrojom pre uchádzačov, newsletter, vďaka ktorému si vás uchádzači o zamestnanie zapamätajú a CV builder, ktorý zjednodušuje pr
prejsť na článokBiela košeľa je absolútna klasika, ktorá vo vašom šatníku rozhodne nemôže chýbať. No ak hovoríme o bielej košeli, máme na mysli tú základnú... dlhý rukáv, gombíky a obyčajný golier. Biela košeľa sa hodí do školy, do práce, na pracovný pohovor, ale aj na k
prejsť na článokPýtate sa aké sú to nadčasové kúsky ? Sú to tie, pri ktorých sa nemusíte báť že by vyšli z módy ani v roku 2021. Jednoducho sú trvácne a elegantné, a viete si ich zladiť k akémukoľvek outfitu. Trendy sa každý rok menia, ale kvalita zostáva. Vieme to aj my
prejsť na článok