Mi az a szelektor a CSS-ben?

A CSS-ben a szelektor egy minta, amely meghatározza, hogy mely HTML elemekre alkalmazódnak a stílusok. Megmutatja a böngészőnek, hogy mely egy vagy több elemet kell kiválasztani.

Különböző típusú szelektorok léteznek:

Elem szelektorok (Type selectors): Minden HTML elem példányát kiválasztják.
```
p { /* Minden bekezdést kiválaszt */
  color: blue;
}
```
Osztály szelektorok (Class selectors): Olyan elemeket választanak ki, amelyeknek adott értéke van az class attribútumban.
```
.highlight { /* Minden "highlight" osztállyal rendelkező elemet kiválaszt */
  background-color: yellow;
}
```
Azonosító szelektorok (ID selectors): Egyetlen elemet választanak ki, amelynek adott értéke van az id attribútumban.
```
#header { /* Az "header" id-vel rendelkező elemet választja ki */
  font-size: 2em;
}
```

Univerzális szelektor (Universal selector): Minden elemet kiválaszt.

* { /* Az összes elemet kiválasztja az oldalon */
  margin: 0;
  padding: 0;
}

Attribútum szelektorok (Attribute selectors): Az elemeket attribútumaik jelenléte vagy értéke alapján választják ki.
```
[type="text"] { /* Minden type="text"-ű inputot kiválaszt */
  border: 1px solid gray;
}
```
Pseudo-osztályok (Pseudo-classes): Az elemek állapota alapján választanak.
```
a:hover { /* A link fölé húzva */
  text-decoration: underline;
}
```
Pseudo-elem (Pseudo-elements): Az elem bizonyos részeit választják ki vagy "kitalált" elemeket hoznak létre.
```
p::first-line { /* Az első sorát választja ki a bekezdésnek */
  font-weight: bold;
}
```

Kombinátorok (Combinators): A szelektorok közötti kapcsolatokat határozzák meg.

Kombinátor	Leírás	Példa
Szóköz ( )	Leszármazott szelektor (Descendant selector)	`div p`
`>`	Gyermek szelektor (Child selector)	`div > p`
`+`	Szomszédos testvér szelektor (Adjacent sibling selector)	`h1 + p`
`~`	Általános testvér szelektor (General sibling selector)	`h1 ~ p`

A szelektorokat kombinálhatjuk a pontosabb elemek meghatározásához.