CSS, pseudo-třída, pseudo-element: vznášet se, dítě, cíl

Kombinací HTML a CSS můžete spravovat absolutně všechny prvky webové stránky. Pomocí stylů můžete snadno změnit vzhled libovolného bloku nebo čáry. Kodér musí často vykonávat složitější úkol - změnit vzhled samotného prvku, ale jeho jednotlivé části nebo určitého stavu. V tomto případě se pseudo-třídy CSS dostanou k záchraně.

Pseudotřídy pracují stejným způsobem jako běžné třídy v označení, ale na stránce nejsou fyzicky přítomné. S jejich pomocí můžete vybrat položky na základě informací, které nejsou v dokumentu, které nelze vybrat pomocí obvyklého voliče. Zde je jednoduchý příklad: máte červené tlačítko a chcete, aby se změnil na modrý, když jej umístíte. Teoreticky to může být implementováno v jazyce jаvascript, ale proč taková složitost? Je mnohem pohodlnější používat : podržte CSS. S jeho pomocí můžete bloku dát libovolným parametrům, které budou fungovat pouze při pohybu myši.

Seznam pseudotříd CSS je pravidelně aktualizován. Možná, když čtete tento materiál, objeví se několik nových. Nejprve se podívejme na ty, které se objevily ve specifikaci CSS3.

: nth-of-type

Předpokládejme, že máte seznam, ve kterém chcete použít střídání barev, to znamená, že první řádek bude například napsán červeně a druhý řádek bude modrý, třetí červená, čtvrtá opět modrá. Dříve jste museli vytvořit nové třídy pro toto. Dřívější výrobci přidali ke třídě každý prvek seznamu a poté změnili svůj vzhled ve stylovém listu. Nebylo to příliš pohodlné a znečištěné uspořádání.

Nyní je vše jednodušší. Použijte pseudo-třídu CSS: nth-of-type. To poskytne příležitost získat potřebný vizuální efekt, aniž by se změnilo nic v označení. Princip funkce je jednoduchý: zadáte volič a v závorce za jeho jménem napište vzorec nebo klíčové slovo, které naleznou požadované prvky. Například: nth-of-type (sudý) najde všechny rovnoměrné elementy a: nth-of-type (lichý) - lichý. Existuje velké množství vzorců, které se používají pro nejpřesnější kontrolu. V závorkách můžete zadat číslo - v tomto případě budou styly aplikovány na prvek, jehož index se rovná tomuto číslu.

: n-dítě

Tato pseudo-třída CSS je podobná předchozí, ale na rozdíl od toho pracuje výlučně s dětmi vybraného prvku. Chcete-li jej například použít k přizpůsobení vzhledu značek

Pro přesnou kontrolu lze použít vzorce. Jsou pro začátečníky docela obtížné, ale stojí za to trochu vykopnout do syntaxe, jak se věci zjednodušují. Vzorce vypadají takto: an + b, kde a je multiplikátor a b je offset. Pokud například zadáte n v závorkách, pseudotřídou vyberou všechny děti (protože nejsou zadány žádné další podmínky ve tvaru a a b). Pokud zadáte n + 2, budou všechny prvky vybrány s výjimkou prvního (protože posun je dva). Nejlepší je studovat tento bod v praxi. Experimentujte s dětskými komponentami a různými vzorci.

: poslední dítě

Všechno je jednoduché. CSS child pseudotřídy se používají k výběru jednoho konkrétního prvku. Tím se vybírá poslední dítě nadřazené rodiny. Používá se poměrně často například k zvýraznění posledního řádku tabulky nebo k odstranění odsazení z posledního bloku, aby se zabránilo jeho přenesení na další řádek.

: n-poslední dítě

Podle principu akce se podobá výše zmíněnému n-dítěti, ale působí v opačném směru, tj. Při použití prvků se bude pohybovat zdola nahoru. To je užitečné, pokud chcete najít několik posledních prvků.

Možná si myslíte, že tyto pseudo-třídy a Pseudo-prvky CSS jsou zbytečné, protože můžete dosáhnout cíle také pomocí běžných tříd. Není to tak. : nth-dítě, n-poslední dítě a jejich analogy jsou velmi užitečné při práci na velkých projektech - například v případech, kdy má blok obrovský počet dětí. Ruční nastavení tříd je dlouhé a obtížné.

Pseudo-třídy státní správy

Co když potřebujete změnit vzhled prvku v určitém stavu? V tomto případě jsou poskytovány pseudotřídy CSS pro tisk, vedení a další akce. Zvažme je podrobněji.

: odkaz

Jedná se o pseudo-třídu odkazů CSS, nikoliv pouze, ale pouze ty, které dosud nebyly navštíveny. V něm můžete zadat styly pro tyto položky , na které uživatel ještě nezapnul.

: navštívil

Analog předchozí verze, která spravuje pouze navštívené odkazy. Spojením těchto dvou pseudotříd můžete přizpůsobit vzhled značek přesně tak, jak to potřebujete. Vezměte však na vědomí, že stavy jsou vypočítávány pro konkrétní prohlížeče a resetují se po vyčištění historie.

Pseudo-třída: cílová CSS

Jedna z nejzajímavějších pseudo-tříd, která s řádným používáním do jisté míry nahrazuje použití jаvascript. Umožňuje spravovat prvek, jehož identifikátor je určen na panelu adresy stránky. Ano, je to poprvé těžké pochopit. Pokusme se ukázat příklad.

Řekněme, že na stránce máme 3 divky s určitými idy: id1, id2, id3. Máme také tři vazby s odpovídajícími hodnotami href: # id1, # ​​id2, # id3. Po klepnutí na první odkaz v adresním řádku stránky se po zadání odkazu na samotnou stránku zobrazí odpovídající identifikátor.

V CSS pro všechny divové bloky není zadán žádný vlastnost: žádné vlastnosti, tj. Ve výchozím nastavení nejsou zobrazeny. Použijte cíl: div a nastavte jeho vlastnost zobrazení: blokovat. Nyní, když kliknete na odkazy s určitými href, bloky s odpovídajícím id budou přiřazeny display: block, což znamená, že se začnou zobrazovat na stránce! Když kliknete na odkaz s href = "# id1" zobrazí se blok s id1 a tak dále.

Ještě nic není jasné? Pokuste se experimentovat. Vytvořte stránku s výše uvedenými značkami a styly. Za pár minut budete v pohodě ve všem.

Pseudo-třídy, které lze aplikovat na libovolný prvek

Většina výše popsaných pseudo-tříd vyžadovala odkazy na práci. Ne každý však potřebuje prvky . K absolutní části stránky lze použít řadu možností.

• : aktivní je určeno pro prvky stylingu, na které uživatel kliknul levým tlačítkem myši -
• : hover - CSS pro prvky, na které uživatel pohybuje kurzorem -
• : zaostření - pro ty části stránky, které jsou aktuálně zaostřené. Tato pseudotřída se často používá k práci s formuláři. Chcete-li například zvýraznit vstupní řetězec pro jméno uživatele, když návštěvník umístí kurzor do něj a začne psát znaky.

Nezapomeňte, že aktivní je aktivní pouze tehdy, když ji stisknete. Ihned po ukončení práce levého tlačítka myši zmizí přidané styly a element bude zobrazen ve výchozím nastavení. Ve většině případů se tato pseudotřída používá k práci s tlačítky. Můžete je nastavit pro velké množství států. Tlačítko bude například standardně modré, když se vznáší - zelená, pokud je stisknutá - červená a tak dále.

Samozřejmě, pseudotřídy jsou plně podporovány pouze moderními prohlížeči. Například v IE6 a 7 nelze použít zaostření a myši a aktivní v IE6 pracují pouze pro reference. Doufejme, že s takovými prohlížeči nemusíte pracovat, a pokud to potřebujete, použijte podmíněné komentáře.

Další pseudotřídy

Výše uvedený seznam není omezen na seznam. Díky modernímu CSS můžete vybrat pouze přidané prvky (: povoleno) nebo pouze zakázané (: zakázáno), zaškrtnuté políčka a rádio (: zkontrolováno). Stručně popište několik dalších možností, které můžete použít k důslednější kontrole vzhledu obsahu.

• : only-child - schopnost aplikovat styl na prvek, který je jediným podřízeným prvkem -
• : lang - pracovat s prvky, které mají jazyk nastavený pomocí lang-
• : root - slouží k výběru kořenového prvku. V HTML je to tedy značka -
• : ne je velmi účinný nástroj. Umožňuje omezit použití stylů na určité voliče. Zde je příklad: .blue-color: not (span). Tento volič aplikuje styly na všechny prvky s modrou barvou, pokud nejsou .

Úplný seznam pseudotříd lze rozložit na více než jednu stránku. Většina sázečů používá v praxi pouze některé z nich, raději spravuje státy pomocí jazyka jаvascript. Ano, je to pohodlné, ale existuje řada bodů, při kterých lze snadněji dosáhnout efektivnějších výsledků pomocí vhodné pseudotřídky.