Selektory CSS

Selektor określa, do których elementów stosuje się reguła.

button { font: inherit; }       /* typ */
.primary { color: blue; }      /* klasa */
#menu { padding: 16px; }       /* id */
input[required] { border: 1px solid; }
.card > p { margin: 0; }       /* bezpośrednie dziecko */
nav a { text-decoration: none; } /* potomek */

Doprecyzowanie: przy konflikcie reguł działa kaskada. Znaczenie mają m.in. pochodzenie, ważność, warstwy, specyficzność i kolejność.

Pułapka: „ostatnia reguła zawsze wygrywa” jest uproszczeniem. Unikam mnożenia selektorów ID i !important jako sposobu na każdy konflikt.