(C) Selektory CSS*

Selektory CSS

Selektory

Selektory elementów

  • Selektor uniwersalny (*) – Obejmuje wszystkie znaczniki HTML na stronie.
  • Selektor typu elementu (Element) – Obejmuje jeden określony znacznik HTML (Np. <q>).
  • Selektor identyfikatora (#<ID>) – Obejmuje znaczniki z określonym Identyfikatorem ID.
  • Selektor klasy (.<CLASS>) – Obejmuje znaczniki z określoną klasą.
  • Selektor potomka (Selektor Selektor) – Obejmuje drugi selektor (Np. span) posiadający pierwszy selektor jako przodka (Np. div span – dotyczy wszystkich znaczników <span> posiadających znacznik <div> jako przodka).
  • Selektor dziecka (Selektor > Selektor) – Obejmuje drugi selektor posiadający pierwszy selektor jako bezpośredniego przodka (Np. div > span).
  • Selektor sąsiadującego brata (Selektor + Selektor) – Obejmuje drugi selektor posiadający pierwszy selektor jako sąsiadującego brata (Obejmuje jedynie jeden selektor) (Np. div + span).
  • Selektor braci (Selektor ~ Selektor) – Obejmuje drugi selektor posiadający pierwszy selektor jako sąsiadującego brata (Obejmuje wszystkich braci) (Np. div ~ span).

Selektory atrybutów

  • Selektor typu atrybutu [Atrybut] – Obejmuje wszystkie znaczniki HTML posiadające wskazany atrybut (NP. [title]).
  • Selektor atrybutu o danej wartości [Atrybut=”Wartość] – Obejmuje wszystkie znaczniki HTML, posiadające atrybut o wskazanej wartości (NP. [title=”description”]).
  • Selektor atrybutu, którego wartość posiada dany wyraz [Atrybut~=”Wartość] – Obejmuje wszystkie znaczniki HTML, posiadające atrybut zawierający wskazaną wartość (NP. [title~=”description”]).
  • Selektor atrybutu, którego wartość rozpoczyna się od danego ciągu znaków [Atrybut^=”Wartość] – Obejmuje wszystkie znaczniki HTML, posiadające atrybut rozpoczynający się od wskazanej wartości (NP. [title^=”description”]).
  • Selektor atrybutu, którego wartość kończy się danym ciągiem znaków [Atrybut$=”Wartość] – Obejmuje wszystkie znaczniki HTML, posiadające atrybut kończący się wskazaną wartością (NP. [title$=”description”]).
  • Selektor atrybutu, którego wartość posiada dany ciąg znaków [Atrybut*=”Wartość] – Obejmuje wszystkie znaczniki HTML, posiadające atrybut zawierający wskazaną wartość (NP. [title*=”description”]).
  • Selektor atrybutu, którego wartość rozpoczyna się od danego ciągu znaków wraz z ewentualnym łącznikiem [Atrybut|=”Wartość] – Obejmuje wszystkie znaczniki HTML, posiadające atrybut rozpoczynający się od wskazanej wartości wraz z ewentualnym znakiem łącznika „-„ (NP. [title|=”description”]).

Selektory pseudoklas

  • selector:link Funkcjonuje w przypadku gdy, w danym momencie znaczniki HTML określane przez wskazany selektor są nieodwiedzonym linkiem (NP. a:link).
  • selector:visited Funkcjonuje w przypadku gdy, w danym momencie znaczniki HTML określane przez wskazany selektor są odwiedzonym linkiem (NP. a:visited).
  • selector:focus Funkcjonuje w przypadku gdy, w danym momencie znaczniki HTML określane przez selektor są aktywne (NP. input:focus).
  • selector:hover Funkcjonuje w przypadku gdy, w danym momencie nad znacznikami HTML określanymi przez wskazany selektor, znajdują się kursor myszy (NP. a:hover).
  • selector:active Funkcjonuje w przypadku gdy, w danym momencie znaczniki HTML określane przez wskazany selektor są naciśnięte lewym przyciskiem myszy (NP. a:active).
  • selector:targetFunkcjonuje w przypadku gdy, w danym momencie znaczniki HTML określane przez wskazany selektor są elementem docelowym linku href, stworzonego na podstawie wartości ID. (NP. p:target). Pseudo klasa zostanie wykonana w sytuacji w której link <a href=”#id”></a> przeniesie użytkownika do znacznika posiadającego wartość ID = „id”.
  • selector:emptyFunkcjonuje w przypadku gdy, w danym momencie znaczniki HTML określane przez wskazany selektor nie zawiera treści (NP. p:empty).
  • selector:root – Obejmuje
  • selector:first-child – Obejmuje znaczniki HTML określane przez wskazany selektor, tylko jeśli są one pierwszymi elementami swojego rodzica (NP. p:first-child).
  • selector:last-child – Obejmuje znaczniki HTML określane przez wskazany selektor, tylko jeśli są one ostatnimi elementami swojego rodzica (NP. p:last-child).
  • selector:only-child – Obejmuje znaczniki HTML określane przez wskazany selektor, tylko jeśli są one jedynymi elementami swojego rodzica (NP. p:only-child).
  • selector:first-of-type – Obejmuje
  • selector:last-of-type – Obejmuje
  • selector:only-of-type – Obejmuje
  • selector:nth-child() – Obejmuje
  • selector:nth-last-child() – Obejmuje
  • selector:nth-last-child() – Obejmuje
  • selector:nth-of-type() – Obejmuje
  • selector:nth-last-of-type() – Obejmuje
  • selector:lang() – Obejmuje
  • selector:not() – Obejmuje
  • selector:enabled – Obejmuje
  • selector:disabled – Obejmuje
  • selector:checked – Obejmuje
  • selector:indeterminate – Obejmuje
  • selector:required – Obejmuje

Selektory pseudoelementów

  • selector::first-lineObejmuje pierwszy wiersz wskazanego selektora (NP. p::first-line).
  • selector::first-letter – Obejmuje pierwszą literę wskazanego selektora (NP. p::first-letter).
  • selector::before – W połączeniu z właściwością content:”Wartość”; umożliwia dodanie wskazanej wartości przed określonym selektorem (NP p::before {content:”Przed”’;}).
  • selector::after – W połączeniu z właściwością content:”Wartość”; umożliwia dodanie wskazanej wartości po określonym selektorze. (NP p::after{content:”Po”’;}).
  • selector::selection – Obejmuje zaznaczony obszar wskazanego selektora (NP. p::selection).
  • selector::placeholder – Obejmuje treść wygenerowaną za pomocą atrybutu placeholder (NP. input::placeholder).

Pozostałe tematy związane z CSS

Kaskadowe arkusze stylów

Inspiracje CSS

PDFPRINT

Robert T Kucharski

Cisco Network Engineer in GPW.

Dodaj komentarz