Selektory i kaskada

CSS (Cascading Style Sheets) to język sterujący prezentacją wizualną. Tworzy się w nim reguły — każda reguła zawiera selektor, który wskazuje elementy, oraz blok deklaracji z parami właściwość–wartość.

Trzy podstawowe selektory: typ wskazuje wszystkie elementy danego tagu (p), klasa wskazuje elementy z daną klasą (.card), a ID wskazuje jeden element za pomocą identyfikatora (#logo). Preferowane są klasy — identyfikatory mają bardzo wysoką specyficzność.

Element można wybrać na podstawie wartości atrybutu za pomocą [type="email"]. Pseudoklasy służą do wskazywania stanu: :hover, :focus, :active, :checked, :nth-child(), :first-child, :last-child.

Kombinatory opisują relacje między elementami: spacja (potomek), > (bezpośrednie dziecko), + (sąsiednie rodzeństwo), ~ (dowolne rodzeństwo).

Gdy wiele reguł wskazuje ten sam element, o wyniku decyduje specyficzność. Selektory identyfikatorów (0,1,0,0) wygrywają z selektorami klas (0,0,1,0), a te z selektorami typów (0,0,0,1). Style wbudowane wygrywają ze wszystkimi. !important wygrywa ze wszystkim — należy używać go w ostateczności.

Należy osobno policzyć identyfikatory, klasy/atrybuty/pseudoklasy oraz typy. Następnie należy porównać poszczególne kolumny. Przykład: #nav .link:hover = (0,1,1,1). .nav a = (0,0,1,1). Pierwszy selektor wygrywa.

Gdy specyficzność jest taka sama, wygrywa reguła znajdująca się później w arkuszu stylów. To właśnie oznacza litera C w CSS — kaskadowość. Znaczenie mają zarówno kolejność importowania, jak i kolejność występowania reguł w kodzie źródłowym.

Niektóre właściwości CSS są domyślnie dziedziczone — elementy potomne otrzymują wartość elementu rodzica bez konieczności jej ustawiania. Dziedziczone są właściwości związane z tekstem, takie jak color, font-family i line-height. Właściwości modelu pudełkowego, takie jak margin, nie są dziedziczone.

:is() i :where() pozwalają tworzyć zwięzłe selektory pasujące do dowolnego elementu z listy. Różnica polega na tym, że :is() dziedziczy najwyższą specyficzność swoich argumentów, a :where() zawsze ma zerową specyficzność.

Selektor uniwersalny * pasuje do każdego elementu. Jest często używany w resetach CSS: *, *::before, *::after { box-sizing: border-box; }, dzięki czemu model pudełkowy staje się znacznie bardziej przewidywalny.

Przeglądarki stosują własny domyślny arkusz stylów (arkusz stylów agenta użytkownika) przed zastosowaniem arkusza użytkownika. Resety CSS, takie jak normalize.css, lub warstwy CSS neutralizują te wartości domyślne, dzięki czemu stylowanie rozpoczyna się od znanej wartości bazowej.

Elementy można wskazywać za pomocą selektorów typów, klas, identyfikatorów, atrybutów i pseudoklas. Specyficzność rozstrzyga konflikty (identyfikatory > klasy > typy). Kaskadowość rozstrzyga remisy na podstawie kolejności w kodzie źródłowym. Dziedziczenie automatycznie przekazuje style tekstu elementom potomnym.