CSS tahák — pseudoelementy, kombinátory a atributové selektory

Zdroj fotky: Mika Baumeister

Ačkoliv se to někdy nemusí zdát, pomocí CSS lze provádět spoustu triků a fíglů k docílení požadovaných úprav jednotlivých částí webů bez použití (mnohdy i složitějších) funkcí JavaScriptu. Proto jsem se rozhodla sepsat menší seznam funkcionalit, které Vám můžou (pokud jste začátečníci, ale třeba i pokročilejší) ušetřit čas (a nervy 😊).

Pseudoelementy

Pomocí pseudoelementů je možné vybírat “abstraktní” elementy, které nejsou původně součástí dokumentu. Lze jim určit vlastnosti a dále s nimi pracovat. Já nejčastěji používám ::before a ::after, ale i ostatní stojí za vyzkoušení.

1. ::after — pseudo(element) umístěný za obsahem uvnitř elementu,
2. ::before —pseudo(element) umístěný před obsahem uvnitř elementu,
3. ::first-letter — první písmeno v elementu,
4. ::first-line — první řádek v elementu,
5. ::selection — obsah vybraný (kurzorem) uživatelem.

Demo s příklady všech pseudoelementů jsem vytvořila na CodePen.io.

Kombinátory

Kombinátory pomáhají přesněji definovat elementy, kterým lze dále nastavovat CSS vlastnosti. Typickým příkladem může být výběr specifického elementu nebo více elementů, které nemají přidělený žádný identifikátor ani třídu.

1. ␣ [mezera] — selektor potomek. Vybere všechny své potomky, včetně potomků potomka (potomků 😁),
2. > — selektor přímý potomek. Vybere všechny přímé potomky elementu,
3. + — sousední selektor "sourozenec". Vybere první následující sousední element,
4. ~ — všeobecný selektor "sourozenec". Vybere všechny následující sousední elementy.

Demo s příklady na CodePen.io.

Atributové selektory

S atributovými selektory lze kouzlit. V případě několika elementů stejných typů je lze detailněji odlišit pomocí atributů. Elementy tak můžou být odlišeny podle konkrétní hodnoty, podle toho, zda se v hodnotě objevuje daný textový řetězec, podle jeho umístění apod.

1. [atribut] — Všechny elementy se specifikovaným typem atributu,
2. [atribut="hodnota"] — všechny elementy se specifikovaným typem atributu a jeho hodnotou,
3. [atribut~="hodnota"] — všechny elementy s atributem obsahující specifické slovo,
4. [atribut|="hodnota"] — všechny elementy, jejichž název atributů začíná specifickým a pomlčkou odděleným (-) textovým řetězcem,
5. [atribut^="hodnota"] — všechny elementy, jejichž název atributů začíná specifickým textovým řetězcem,
6. [atribut$="hodnota"] — všechny elementy, jejichž název atributu končí specifickým textovým řetězcem,
7. [atribut*="hodnota"] -- všechny elementy, jejichž název atributu obsahuje textový řetězec.
8. [atribut operátor hodnota i] - Hodnota operátoru nerozlišuje malá a velká písmena.

Dalším možným nastavením je i tzv. case-sensitive vlastnost ([atribut operátor hodnota s]), tzn. nejsou rozlišována velká a malá písmena v řetězci. Nicméně snad až na Firefox není tato vlastnost v prohlížečích podporována (zdroj: MDN Web Docs).

Demo s příklady na CodePen.io.

Vytvořila jsem tahák ve formátu PDF, který je k dispozici na mém webu Pandacode. 🐼 V případě, že mám někde chybu, které jsem si nevšimla, nebo máte tip na vylepšení, budu ráda, když mi dáte vědět na chwastkova.s@gmail.com a případně bych vytvořila aktualizovanou verzi. 😊