CSS Attribútum szelektorok
Az attribútum szelektorok lehetővé teszik, hogy HTML elemeket azok attribútumai alapján válasszunk ki. Ez pontosabb és rugalmasabb stíluskezelést biztosít, különösen űrlapoknál és hivatkozásoknál.
Attribútum szelektor típusok
Az attribútum szelektorok többféle formában használhatók: létezés ellenőrzése, pontos egyezés, illetve részleges illesztések (kezdet, vég, tartalmazás).
| Szelektor | Leírás |
|---|---|
| [attr] | Kiválasztja az összes elemet, amely rendelkezik az adott attribútummal. |
| [attr="value"] | Kiválasztja azokat az elemeket, amelyek attribútuma pontosan megegyezik az adott értékkel. |
| [attr^="value"] | Kiválasztja azokat az elemeket, amelyek attribútuma az adott értékkel kezdődik. |
| [attr$="value"] | Kiválasztja azokat az elemeket, amelyek attribútuma az adott értékkel végződik. |
| [attr*="value"] | Kiválasztja azokat az elemeket, amelyek attribútuma tartalmazza az adott részletet. |
Alap attribútum szelektorok
A legegyszerűbb attribútum szelektorok az attribútum létezésére vagy pontos egyezésére épülnek. Ezekkel gyakran linkeket vagy űrlapmezőket célozunk meg.
Az alábbi példában a hivatkozásokat és szövegmezőket szelektáljuk attribútum alapján:
Mintázat alapú szelektorok
A haladó attribútum szelektorok lehetővé teszik a részleges illesztést. Így például megadhatjuk, hogy egy link https-sel kezdődjön, .pdf-re végződjön vagy tartalmazzon egy adott szót.
Tippek az attribútum szelektorokhoz
Az attribútum szelektorok erőteljesek, de túlzott használatuk ronthatja a teljesítményt. Íme néhány tanács:
- Csak akkor használd a részleges illesztéseket, ha valóban szükséges.
- Űrlapoknál a típus szerinti szelektálás nagyon hasznos a különböző inputok megkülönböztetésére.
- Kerüld a túl általános mintákat, hogy ne válogass túl sok elemet egyszerre.
✨ 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.
© 2025 ReadyTools. Minden jog fenntartva.