Czym jest selektor w CSS?

Selektor w CSS to wzorzec, który określa, do których elementów HTML mają być zastosowane style. Wskazuje przeglądarce, które jeden lub więcej elementów należy wybrać.

Istnieją różne typy selektorów:

Selektory typu (Type selectors): Wybierają wszystkie instancje elementu HTML.
```
p { /* Wybiera wszystkie akapity */
  color: blue;
}
```

Selektory klas (Class selectors): Wybierają elementy z określoną wartością atrybutu class.

.highlight { /* Wybiera wszystkie elementy z klasą "highlight" */
  background-color: yellow;
}

Selektory ID (ID selectors): Wybierają pojedynczy element z określoną wartością atrybutu id.
```
#header { /* Wybiera element z id "header" */
  font-size: 2em;
}
```

Selektor uniwersalny (Universal selector): Wybiera wszystkie elementy.

* { /* Wybiera wszystkie elementy na stronie */
  margin: 0;
  padding: 0;
}

Selektory atrybutów (Attribute selectors): Wybierają elementy na podstawie obecności lub wartości ich atrybutów.
```
[type="text"] { /* Wybiera wszystkie inputy z type="text" */
  border: 1px solid gray;
}
```

Pseudo-klasy (Pseudo-classes): Wybierają elementy na podstawie ich stanu.

a:hover { /* Wybiera link podczas najechania */
  text-decoration: underline;
}

Pseudo-elementy (Pseudo-elements): Wybierają określone części elementu lub tworzą "fikcyjne" elementy.
```
p::first-line { /* Wybiera pierwszy wiersz akapitu */
  font-weight: bold;
}
```

Kombinatory (Combinators): Określają relacje między selektorami.

Kombinator	Opis	Przykład
Spacja ( )	Selektor potomków (Descendant selector)	`div p`
`>`	Selektor dzieci (Child selector)	`div > p`
`+`	Selektor sąsiednich elementów (Adjacent sibling selector)	`h1 + p`
`~`	Selektor ogólnych sąsiadów (General sibling selector)	`h1 ~ p`

Selektory mogą być łączone, aby precyzyjniej określić elementy.