CSS Szelektorok

A CSS szelektorok határozzák meg, hogy mely HTML elemekre vonatkozzanak a stílusok. Segítségükkel pontosan kiválaszthatunk egy elemet, több elemet vagy akár összetett struktúrákat.

Alap szelektorok

Az alap szelektorok közvetlenül egy HTML elemre hivatkoznak, például <p>, <div>, <h1>. Ezekkel egyszerűen azonosíthatjuk a dokumentum adott elemeit.

Az alábbi példában az összes <p> elem szövege kékké válik:

Gyakori szelektor típusok

A CSS-ben többféle szelektortípust használhatunk. Az alábbi táblázat bemutatja a leggyakoribbakat:

Szelektor	Leírás
p	Az összes <p> elem kiválasztása.
.class	Az adott osztályhoz tartozó elemek kiválasztása.
#id	Az adott azonosítóval rendelkező elem kiválasztása.
*	Az összes HTML elem kiválasztása.

Összetett szelektorok

Az összetett szelektorok lehetővé teszik, hogy pontosabb szabályokat hozzunk létre, például kombinálva szülő-gyermek kapcsolatokat vagy állapotokat.

Pszeduo-osztályok

A pszeduo-osztályok speciális állapotokat és helyzeteket céloznak meg, például egy elem fölé vitt egérmutató, vagy a lista első eleme.

Attribútum szelektorok

Az attribútum szelektorok segítségével olyan elemeket célozhatunk, amelyek bizonyos attribútumokkal rendelkeznek, vagy azok értéke megfelel egy mintának.

Kombinátorok

A kombinátorok segítségével meghatározhatjuk az elemek közötti kapcsolatot, például szülő-gyermek, testvér vagy általános hierarchiát.

Tippek a szelektorok használatához

A szelektorok hatékony használata segít tisztán tartani a CSS-t és elkerülni a felesleges kódot. Íme néhány tipp:

Ne használj túl általános szelektorokat (*), mert teljesítményproblémákat okozhatnak.
Az ID szelektorokat ritkán használd, inkább osztályokat alkalmazz a rugalmasság érdekében.
Ügyelj a specifitásra: a pontosabb szelektor felülírja az általánosabb szabályokat.