CSS selektory sú špecifické CSS štruktúry, ktoré vám umožnia vybrať konkrétny prvok v HTML kóde a štylizovať ho. Každý z nich má svoju vlastnú špecifickosť, to znamená, že sa môže prekrývať s vlastnosťami iných, viac "slabých".

Volič CSS podľa značky a triedy

Najjednoduchšie voliče - podľa značky a triedy. Volič na značke je najbežnejší a vyberá všetky prvky s určenou značkou. Môžete napríklad napísať vlastnosti kódu CSS nasledujúceho formulára: p {color: blue} ", kde" p "je značka odseku a farba: modrá vlastnosť označuje farbu textu. V dôsledku toho bude text v odsekoch modrej farby. Selektory podľa značky sa dajú započítavať čiarou, potom nebudete musieť zapisovať vlastnosť dvakrát.


Ak sú niektorým triedam priradená určitá trieda, napríklad "modrá", volič CSS môže byť nastavený ešte presnejšie. Ale jeho vstup do nehnuteľností bude iný - bod sa objaví pred názvom triedy. To znamená, že vybrať všetky odseky, ktoré sú priradené modrej triede a modrú farbu je potrebné zapísať takto: ".blue: {color: blue}". Tento volič je špecifickejšie ako volič CSS podľa značky a je silnejší než ten, ale je to najjednoduchší. Existujú zložitejšie pravidlá, ktoré vám umožňujú vybrať malé skupiny prvkov.

Vlastnosti selektorov s identifikátorom

Výbery pre id alebo id sú špecifickejšie ako trieda a atribút. To znamená, že keď sa používajú v kaskáde, budú "prevážiť" iné podobné selektory. Identifikátory vám tiež pomôžu presne vybraťurčitý prvok v kóde, ale ich použitie v dizajne stránok je považované za zlú prax medzi plánovačmi. Iba vo veľmi zriedkavých prípadoch, ako je napríklad vytvorenie jazdca na CSS, je táto prax neprijateľná. Faktom je, že na jednej stránke môže byť iba jeden prvok s určitým identifikačným číslom. Preto, vzhľadom na jedinečnosť selektora id CSS, môže byť použitý len pre jeden prvok. V tomto prípade je oveľa logickejšie používať triedy, nie identifikátory.

Rôzne myšlienky týkajúce sa selektora podľa id

Ale existuje aj opačný názor, že identifikátor pomáha identifikovať útržok kódu na stránke, ktorá by mala byť v jedinej inštancii. V tomto prípade, aj keď triedy prepínače môžu nahradiť, mali by byť použité pre veľké skupiny prvkov, a na tých miestach, kde je potrebná presnosť, je lepšie použiť id. Každá remeselníčka má právo rozvíjať vlastný osobný názor na túto tému a napísať kód v jeho vlastnom štýle. Pri písaní selektora pomocou id sa pred ním použije symbol "#". To znamená, že riadok kódu bude vyzerať takto: "#blue: {color: blue}". S touto položkou bude položka s ID #blue namaľovaná modrou farbou.

Použitie kaskády

Pri použití voličov HTML CSS na id môžete použiť aj vlastnosť kaskády. Ak napríklad v značke s identifikátorom chcete vybrať podradnú značku a zmeniť jej vlastnosti, musíte najprv zaznamenať meno id s mriežkou, potom podradenou značkou a jej vlastnosťami.Tieto voliče sa nazývajú vnorené. To znamená, že riadok kódu bude vyzerať takto: #id p {color: blue}. Potom sa farba textu vo vnútri nadradeného prvku s týmto identifikátorom v odseku podriadený zmení na modrý.

Použitie voličov detských prvkov

Ďalšia možnosť použitia kaskády na zmenu vlastností podradených prvkov sa používa, ak potrebujete vybrať len určitú časť kódu. Volá sa aj selektor potomkov. Ak napríklad chcete vybrať odsek v riadku tabuľky, použije sa nasledujúca položka voliča CSS: "ul li & gt; p: {color: blue} ". Stojí za to venovať pozornosť tomu, že čím dlhšie je záznam, tým vyššia je pravdepodobnosť, že bude možné zmeniť určitú vlastnosť prvku, pretože sa stane prioritou pre kaskádu. Napríklad prvky s inými vlastnosťami nadradeného selektora CSS nemenia svoje vlastnosti v plnom rozsahu. Iba určitá časť textu v zozname je namaľovaná.

Výber sesterských prvkov

Ďalším zaujímavým spôsobom využitia kaskádových - nasledujúcich voličov CSS. Sú zaznamenané ako súčet výberov: "span + a {color blue}". V tomto prípade je susedom ten, pod ktorým je iný, zodpovedajúci požadovaným parametrom. Ak teda v kóde existujú tri prvky, majetok sa nevzťahuje na prvý, pretože nemá sused a na všetky nasledujúce - tak. Stane sa to pomocou ikony sumy, keď sa vytvoria nasledujúce voľby, nie predchádzajúce. Táto položka pomáha redukovať kód a nezaznamenáva viac výberov CSS pre inéznačky, ktoré im majú rovnaké vlastnosti. Ak je druhá položka zoznamu určiť ďalšiu triedu a zmeniť vstupné «.class + výške {} modrú farbu», zatiaľ čo počítanie bude trvať od nej a meniť vlastnosti týchto prvkov sa zmestili pravidlo, a prvé dva zostávajú rovnaké.

Teraz predpokladajme, že v našom kóde sú tri identické štítky s rôznymi triedami a musíte vyberať všetky prvky po nejakej definícii. V tomto prípade nebude fungovať iba výber značiek CSS. Pre tento účel sa používa selektor nasledujúceho typu: ".class ~ div". Tým sa vyberajú položky s tagom div, ktoré idú za danou triedou. Ak zvolíme nie len položky so značkou div, ale všetky tieto namiesto tagu po tilda znamení by mal klásť hviezdička - "*". Takýto záznam bude znamenať, že vyberiete všetko, čo nasleduje po danej triede. Môžete si vybrať všetky položky na stránke, ak necháte hviezdičku rovnako ako výber.

voliča na CSS atribútu

Predpokladajme, že v našom kóde obsahuje prvky s určitými atribútmi, ale všetky sú odlišné od seba navzájom a sú písané s pomlčkou, a musíme vybrať tie s názvom triedy začína určité slová napríklad "selektor" a triedy sú oddelené znakom "-". Čo mám robiť v tomto prípade? Volič rekord začína s držiakmi, kde prvý zaznamenaný názov atribútu, potom vertikálne lomítko znak "=" a «voliča»: «Dátové | = selektor». Ďalej napíšeme požadovanú vlastnosť, ktorú chcete zmeniť. V dôsledku toho sa položka vyberie s danými položkamiParametre. Zmenou tried môžete zmeniť vlastnosti určitých častí kódu. Ak názvy triedy nie sú napísané pomlčkou, ale len jedným slovom, môžu sa vybrať aj pomocou trochu iného záznamu. V tomto prípade sa vertikálna lomka nahradí symbolom "^": "data ^ = selektor". Tento volič vyberie podreťazec s začiatkom názvu triedy.

Ako vybrať položku s určitým konci v názve triedy

Teraz robiť inak a vybrať tie časti kódu od začiatku opisy triedy a posledné písmeno svojho mena. Aby sme to dosiahli, potrebujeme dolárový odznak. Zaviedli sme začiarknutie a po označení rovnosti napíšeme koniec názvu triedy: "data $ = ctor". Teraz budú vybrané prvky s touto kombináciou písmen a na nich budú aplikované určité vlastnosti. Môžete si vybrať ľubovoľný atribút. Poďme sa správať, ako by musíme nájsť nejaký prvok bukvosochetanyem uprostred slova. V tomto prípade zmeníme znak dolára na hviezdičku a po rovnomennom znamení napíšeme písmená: "data * = ct".

Pseudo - špeciálna selektory

Zvláštne odkazy bežne používaných CSS štýlu selektory, ktoré odrážajú ich rôzny podmienku: pokojný, sústredené, aktívne cestoval - Nazývajú sa pseudotried. Pseudotrieda pre aktívny odkaz, na ktorom je zobrazený kurzor, je napísaný ako "a: active". Ďalšie sú niektoré vlastnosti, najčastejšie zmeny na pozadí alebo pridaný tieň. Ak pridáte túto vlastnosť na odkaz a kliknete na ne, zmení sa jej farba na danú. Ďalšie pseudotrieda ukazuje, že odkaz už prešiel.Zaznamenáva sa ako "a: hover".

Funkcie aktívnych a zaostrových stavov

Aktívne sú často zamieňané s iným stavom - zameraním. Zaznamenáva sa nasledovne: "a: focus" a indikuje aktívny stav tlačidla pri práci s klávesnicou. To znamená, že ak použijete tlačidlo TABLES, aktívny odkaz bude zvýraznený v špeciálnej farbe. Táto vlastnosť musí byť použitá, pretože myšou na navigáciu na lokalite nemusí byť všetci používatelia. Niektorí z nich môžu mať zlé videnie alebo iné zdravotné obmedzenia, takže sa môžu pohybovať po stránke pomocou kľúčov alebo špeciálnych gadgetov. Ignorovanie tlačidlo stavu v centre pozornosti je hlavný nevýhodou pre tento parameter v dizajne webu ako prístupné a má významný vplyv na jeho účasti osobitných kategórií užívateľov. Pri bežnej navigácii pomocou myši sa prepojenie stáva aktívne aj zaostrené. Preto je pri stylingových prvkoch dôležité venovať pozornosť tomu.

Pseudo-elementy

Pseudo-elementy umožňujú špecifikovať špeciálne štýly bez toho, aby ste ich definovali v samotnej štruktúre HTML. Sú zaznamenané nasledovne: názov selektora, znak "::", názov pseudo-elementu. Najbežnejšie prvky "pred" a "po". Majú vlastnosť "obsahu", nemôžu byť aplikované na interné štýly. Po začiarknutí textu je potrebné po pridaní určitého obsahu pridať nejaký obsah. Čo presne vložiť, je zapísané do vlastníctva obsahu. Podobne pseudo-element "pred" pridáva obsah do obsahu elementu. Použitie týchto špeciálnych voličov vám umožňuje skrátiť kód a nie zakaždým zapísať novýštruktúru pre niektorú jeho časť, ak chcete pridať malý detail na konkrétne miesto kontajnera. Často sa používajú pri stylingových stránkach a pri pridávaní niektorých dekoratívnych prvkov. Kombinácie všetkých týchto možností pomáhajú vytvárať nezvyčajné efekty na stránke a výrazne pomáhajú remeselníkom.