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;}

A + B

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;}

A> B

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;}

A [href * = "příklad"]

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.

A: ne (B)

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;}

A: první dítě / A: poslední dítě

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;}

A: n-dítě (n)

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.

A: n-poslední dítě (n)

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;}

A: n-typ (n)

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;}

A: navštívil

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;}

Konečné myšlenky

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.

Doporučený snímek / náhled, obrázek kódu přes Shutterstock.