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.
✨ Kérdezd Larát — a tanulási partnered
Fedezd fel a személyre szabott tanulási támogatást. Lara elmagyarázza az anyagot, összefoglalja a témákat és megválaszolja a kérdéseidet — az Go csomagtól elérhető.
Lara segít gyorsabban tanulni — kizárólag a ReadyTools Go, Plus és Max tagoknak.
