Ghid CSS: cum țintești elementele cu atribut specific folosind selectorul X[title]

În dezvoltarea paginilor web, proprietățile CSS sunt aplicate în mod tradițional prin intermediul claselor (.clasa) sau identificatorilor (#id). Cu toate acestea, CSS oferă posibilitatea de a selecta elementele direct pe baza existenței atributelor HTML, fără a depinde de clase suplimentare. Cel mai simplu exemplu de acest tip este selectorul de prezență a atributului: X[title].

Ce reprezintă și cum funcționează selectorul X[title]

Selectorul [atribut] verifică strict dacă atributul respectiv este declarat pe elementul HTML, indiferent de valoarea pe care o conține. Atunci când aplicăm regula a[title], browserul va viza toate linkurile care au definit atributul title:

/* Stilizează toate linkurile care au definit atributul title */
a[title] {
    color: #27ae60;
    text-decoration: underline dotted;
    cursor: help;
}

Dacă un element ancoră nu are atributul title specificat în codul HTML, această regulă CSS nu îl va afecta.

Cazuri practice de utilizare

1. Marcarea elementelor cu indicii textuale (Tooltips native)

Atributul title este adesea folosit pentru a oferi informații suplimentare la trecerea cursorului (hover). Prin aplicarea unei sublinieri punctate și a cursorului specific help, transmiți utilizatorului că există un indiciu util:

abbr[title],
span[title] {
    border-bottom: 1px dotted #7f8c8d;
    cursor: help;
}

2. Audit vizual și verificarea accesibilității

În timpul dezvoltării unei teme sau al unei revizuiri de conținut, poți folosi selectoarele de atribute împreună cu pseudo-clasa :not() pentru a descoperi rapid elementele cărora le lipsesc atribute esențiale de accesibilitate:

/* Evidențiază imaginile cărora le lipsește atributul esențial alt */
img:not([alt]) {
    outline: 3px solid #e74c3c;
}

/* Evidențiază linkurile fără titlu explicativ */
a:not([title]) {
    border-bottom: 2px dashed #f39c12;
}

Diferența dintre verificarea prezenței și verificarea valorii

Este util să reții distincția dintre cele două forme de selectare prin atribute:

• element[title]: selectează elementul atâta timp cât atributul title există, indiferent de conținutul acestuia.
• element[title="Text Exact"]: selectează elementul numai dacă valoarea atributului coincide cu textul menționat.

Selectorul de prezență reprezintă o modalitate curată și semantică de a stiliza componente HTML în funcție de rolul și atributele lor structurale.