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

Zdroj fotky: Mika Baumeister

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. ::before —pseudo(element) umístěný před obsahem uvnitř elementu,
  2. ::first-letter — první písmeno v elementu,
  3. ::first-line — první řádek v elementu,
  4. ::selection — obsah vybraný (kurzorem) uživatelem.

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. > — selektor přímý potomek. Vybere všechny přímé potomky elementu,
  2. + — sousední selektor "sourozenec". Vybere první následující sousední element,
  3. ~ — všeobecný selektor "sourozenec". Vybere všechny následující sousední elementy.

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

Student at Brno University of Technology, Czech Republic, frontend, webdesign 🐼 https://pandacode.cz | IG: @sarkaaa.ch

Student at Brno University of Technology, Czech Republic, frontend, webdesign 🐼 https://pandacode.cz | IG: @sarkaaa.ch