Pokaždé, když používáme CSS, používáme voliče. Ale navzdory tomu jsou selektory CSS jednou z více zanedbaných částí specifikace.
Mluvíme o velkých změnách v CSS3, ale všichni příliš často zapomínají na základy. Dobré používání selektorů činí naše každodenní kódování jednodušší a elegantnější. Dnes se chystám zakrýt deset selektorů, které často sklouzejí, ale jsou efektivní a velmi užitečné.
Volič * může být ten, který si nejlépe zapamatujete, ale často se nevyužívá. Co to dělá, je styl všechno na stránce a je skvělé pro vytvoření resetování a také pro vytvoření některých výchozích nastavení stránky, jako je rodina písma a velikost, kterou chcete mít.
* {margin: 0;padding: 0;font-family: helvetica, arial, sans-serif;font-size: 16px;}Tento volič se nazývá sousední volič a jeho volba vybírá prvek, který je bezprostředně za prvním prvkem. Pokud jste chtěli vybrat první div po naší záhlaví, zadejte:
header + div {margin-top: 50px;}Tento volič vybere pouze přímé děti na rozdíl od AB, které vyberou všechny děti z úrovně A. Tento volič se doporučuje, když pracujete s dětmi první úrovně nadřazeného prvku. Například pokud chcete vybrat položky seznamu první úrovně v neřízeném seznamu, který vypadá takto:
- List Item With ul
- Sub list item
- Sub list item
- Sub list item
- List Item
- List Item
Tento přepínač byste použili, protože obvyklý selektor AB také vybírá položky seznamu uvnitř vnořeného neuspořádaného seznamu
ul > li {background: black;color: white;}To je opravdu dobrý selektor, když chcete stylovat určitý odkaz jiným způsobem, ať je to, co je v uvozovkách, porovnáno s hrefem odkazu. Například ke stylu všech odkazů na facebook s modrou barvou byste použili:
a[href*="facebook"] {color: blue;}K dispozici je také verze bez *, která odpovídá přesné adrese URL, kterou můžete použít pro přesné odkazy.
Tento volič je užitečný zejména kvůli jeho klauzuli o vyloučení, která umožňuje vybrat libovolnou skupinu prvků, které neodpovídají tomu, co umístíte v B. Chcete-li vybrat každou divu s výjimkou zápatí, stačí:
div:not(.footer) {margin-bottom: 40px;}První dítě a poslední dítě nám umožňují vybrat první a poslední dítě nadřazeného prvku. To může být skvělá pomoc, pokud jde o seznam položek a odstranění okraje vpravo nebo okrajů. Chcete-li odstranit okraj v první položce seznamu a okraj v poslední položce seznamu, potřebujete:
ul li:first-child {border: none;}ul li:last-child {margin-right: 0px;}Nt-dítě je jednoduchý způsob, jak si vybrat libovolné dítě prvku podle jeho pořadí. Pokud jste např. Chtěli třetí položku seznamu v neusporiadaném seznamu, tak by to bylo způsob, jak jít:
ul li:nth-child(3) {background: #ccc;}Můžeme použít nth-dítě pro volbu každého multiplikátoru číslem pomocí proměnné n, například když dáváme 3n, že vybere číslo položky 3, 6, 9, 12 a tak dále.
Nth-last-child pracuje jako nth-dítě, ale namísto počítání z první položky seznamu začne počítat od posledního, takže pokud jej použijete s druhým číslem, vybere se položka seznamu, která je před posledním a jeho použití je stejně jako selektor n-dětí:
ul li:nth-last-child(2) {background: #ccc;}Tento volič dělá přesně to, co si myslíte, že to dělá; vidí, jaký typ prvku jste umístili a zvolí například třetí prvek na stránce, který odpovídá zadanému textu. Pro výběr třetího odstavce v div byste použili:
div p:nth-of-type(3) {font-style: italic;}Už jste si všimli, že když hledáte něco na Google, stránky, které jste již viděli, se zobrazují v jiné barvě? To je přesně to, co navštívil. To je skvělý doplněk pro uživatele, ale je to někdy zapomenuto a podle mých zkušeností je to užitečné pokaždé, když hledám google.
a:visited {color: blue;}Podle mých zkušeností s používáním těchto druhů selektorů při kódování nám může ušetřit spoustu času a také se vyhnout tomu, že je zapotřebí mnoho ID, které překrývají naši značku. A to je jen začátek selektorů CSS, existuje spousta dalších selektorů, které jsou opravdu užitečné, ale někdy zapomenuty.
Používáte voliče CSS ve svých listinách stylů? Je snadnější spadnout na ID a třídy? Dejte nám vědět v komentářích.