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.