CSS Selectors. Typy selektorů

Jazyk pro popis vzhledu dokumentu CSS se neustále vyvíjí. Časem se nejen rozšiřuje jeho výkon a funkčnost, ale také zvyšuje flexibilitu a snadné použití.

Voliče CSS

Začněme pochopit. Otevřete libovolný tutoriál CSS, alespoň jedna část v něm bude věnována typům voličů. To není překvapující, protože jsou jedním z nejvhodnějších způsobů, jak spravovat obsah stránky. S jejich pomocí můžete komunikovat s absolutně všemi prvky HTML. Nyní existuje 7 druhů voličů:


  • pro značky;
  • pro třídy;
  • pro ID;
  • univerzální;
  • atributy;
  • pro interakci s pseudotřídami;
  • pro ovládání pseudo-prvků.
  • Syntaxe je jednoduchá. Chcete-li se dozvědět, jak používat voliče CSS, stačí o nich číst. Která volba je nejlepší pro kontrolu obsahu ve vašem případě? Pokusíme se to na to přijít.

    Voliče značek

    Jedná se o nejjednodušší volbu, která nevyžaduje speciální znalosti pro psaní. Aby bylo možné značky spravovat, musíte použít jejich jméno. Předpokládejme, že "záhlaví" vašeho webu je zabaleno do značky. Chcete-li jej použít v CSS, musíte použít volič záhlaví {}. Výhody - snadné použití, všestrannost. Nevýhody - úplný nedostatek flexibility. Ve výše uvedeném příkladu budou všechny záhlaví označeny okamžitě. A co když potřebujete spravovat pouze jednu?

    Volič třídy

    Nejčastější varianta. Přiřazenopro správu štítků s atributem třídy. Například jsou ve vašem kódu tři bloky, z nichž každá vyžaduje určitou barvu. Jak to udělat? Standardní voliče CSS nejsou vhodné pro značky, zadávají parametry pro všechny bloky najednou. Výstup je jednoduchý. Přiřaďte prvky třídy. Například první div dostala class = 'červená', druhá - třída = 'modrá', třetí - třída = 'zelená'. Nyní je můžete vybrat pomocí CSS.


    Syntaxe je: bod bod ("."), Po kterém píšeme název třídy. Chcete-li spravovat první blok, používáme návrh .red. Druhá je modrá a tak dále. Důležité! Doporučuje se použít jasné hodnoty atributu třídy. Špatným tónem je použití transliterace (například krasiviy-blok) nebo náhodná kombinace písmen /čísel (ojfh834871). V takovém kódu musíte být zmateni, nemluvě o potížích, s nimiž budete muset čelit těm, kteří se po vás budou účastnit projektu. Nejlepší možností je použít nějakou metodiku, jako je BEM.
    Výhody - poměrně vysoká flexibilita. Nevýhody - v několika prvcích může být jedna a tatáž třída, což znamená, že budou editovány současně. Problém je řešen pomocí metodiky, stejně jako dědičnosti předprocesorů. Ujistěte se, že zvládnete méně, sass nebo nějaký jiný preprocesor, zjednoduší práci.

    Selector podle ID

    Pokud jde o tuto možnost, názory návrhářů a programátorů jsou nejednoznačné. Některé CSS tutoriály obecně nedoporučují používat ID, protože nejsou pečlivě používánymůže způsobit problémy s dědičností. Nicméně, mnoho specialistů je aktivně umísťuje po značku. Rozhodněte se pro vás Syntaxe je: symbol mřížky ("#"), pak název bloku. Například #red.
    ID se liší od třídy pro několik parametrů. Nejprve stránka nemůže mít dvě identické identifikátory. Jsou přidělena jedinečná jména. Za druhé, takový selektor má vyšší prioritu. To znamená, že pokud vložíte třídu do červené třídy a určíte červenou barvu pozadí v tabulkách CSS a pak ji přidělíte modře a zadáte modrou barvu, blok bude modrý. Výhody - Můžete spravovat určitou položku bez ohledu na styl štítků a tříd. Nevýhody se snadno zaměňují s velkým počtem ID a tříd. Důležité! Pokud používáte metodu BEM (nebo její protějšky), obecně nepotřebujete ID. Tato technika rozložení zahrnuje použití jedinečných tříd, což je mnohem pohodlnější.

    Univerzální volič

    Syntaxe: hvězdička ("*") a kudrnaté závorky, tj. {{}. Používá se k přiřazení určitých atributů všem prvkům stránky najednou. Kdy to může být zapotřebí? Například pokud chcete nastavit vlastnost velikostní kódy stránky: rámeček-okraj. Může být použito nejen ke správě všech komponent dokumentu, ale také ke kontrole všech podřízených prvků bloku, například div * {}.
    Výhody - Můžete spravovat velké množství prvků najednou. Nevýhody -není dostatečně flexibilní. Navíc použití tohoto voliče v některých případech zpomaluje práci stránky.

    Podle atributů

    Umožňuje ovládat položku s určitým atributem. Například máte několik vstupních značek s atributem jiného typu. Jeden z nich - text, druhé - heslo, třetí - číslo. Samozřejmě můžete dát každou třídu nebo ID, ale to není vždy výhodné. Voliče CSS poskytují atributy schopnost specifikovat hodnoty pro konkrétní tagy s maximální přesností. Například zde je návod: input [type = 'text'] {} Tento selektor atributů vybírá všechny texty typu vstupu. Nástroj je velmi flexibilní, lze jej použít s jakýmikoli tagy, které mohou mít atributy. Ale to není všechno! Specifikace CSS má schopnost ovládání prvků i při velkém pohodlí!
    Představte si, že vaše stránka má vstup s atributem placeholder = "Zadejte název" a vložte zástupný symbol = "Zadejte heslo". Mohou být také vybrány pomocí voliče! Pro tento účel se používá následující návrh: input [placeholder = "Enter name"] {} nebo input [placeholder = "Enter password"] Flexibilnější práce s atributy. Předpokládejme například, že máte více značek s podobnými názvy atributů (např. "Kaspický" a "Kaspický"). Chcete-li vybrat obě, použijeme následující voliče: [title * = "kaspiisk"] CSS vybere všechny položky v titulku obsahující "Kaspické" znaky, tj. "Caspian" a "Caspian". Můžete také vybrat značky, jejichž atributy začínají určitými znaky: [title ^ = "znak, který chcete"] {} nebo končit s nimi:[title $ = "požadovaný znak"] {}. Výhody - maximální flexibilita. Můžete si vybrat libovolné existující prvky stránky bez jakýchkoli povyků s třídami. Nevýhody - používané poměrně vzácně, pouze ve zvláštních případech. Mnoho plánovačů dává přednost metodice, protože je snadnější zadat třídu než uspořádat více hranatých závorek a znamení "jedna". Navíc tyto voliče nefungují v aplikaci Internet Explorer 7 a níže. Kdo však nyní potřebuje starý Internet Explorer?

    Pseudotřídní selektory

    Pseudotřída označuje stav prvku. Například: ukazatel myši - co se stane s částí stránky, když umístíte ukazatel myši na kurzor ,: navštívený - navštívený odkaz. Patří sem prvky jako první dítě: poslední dítě.
    Tento typ přepínačů se aktivně používá v aktuálním uspořádání, protože umožňuje vytvářet stránku "živě" bez použití javascriptu. Například se chcete ujistit, že když kliknete na tlačítko s třídou btn, změní se jeho barva. Chcete-li to provést, použijte následující návrh: .btn: hover {background-color: red; } Pro krásu můžete v hlavních vlastnostech tohoto tlačítka zadat přechodovou vlastnost, například v 05 s - v tomto případě tlačítko nebude blikat okamžitě, ale na půl sekundy. Výhody - aktivně se používají k "revitalizaci" stránek. Snadné použití. Nevýhody - nejsou. To je opravdu užitečný nástroj. Ovšem nezkušené obsluhy mohou být zaměňovány s velkým počtem pseudotříd. Problém je řešen tréninkem a praxí.

    Pseudoelementové selektory

    "Pseudoelementy" jsou tyČásti stránky, které nejsou v HTML, ale můžete je spravovat. Nerozuměl jsem nic? Všechno je jednodušší, než se zdá. Například chcete učinit první písmeno v řádku velkým a červeným, takže druhý text je malý a černý. Samozřejmě můžete tento dopis provést s určitou třídou, ale je to dlouhé a nudné. Je mnohem jednodušší vybrat celý odstavec a použít pseudoelement :: první písmeno. Umožňuje vám řídit vzhled prvního písmene. Existuje poměrně velký počet pseudoklíčků. Seznamte je s tím, že je nepravděpodobné, že by se jeden článek ukázal. Příslušné informace najdete ve svém oblíbeném vyhledávači. Výhody - umožňují pružně přizpůsobit vzhled stránky. Nevýhody - nováčci jsou s nimi často zaměňováni. Mnoho selektorů tohoto typu pracuje pouze v určitých prohlížečích.

    Zhrněte

    Volič je mocný nástroj pro řízení toku dokumentu. Díky němu si můžete zvolit naprosto všechny komponenty stránky (dokonce i existující pouze podmíněně). Ujistěte se, že prozkoumáte všechny existující možnosti nebo je alespoň zapište. To je zvláště důležité, pokud vytvoříte složité stránky s moderním designem a velkým počtem interaktivních prvků.

    Související publikace