Gestionarea stilurilor pentru linkuri este un element central în designul web. Dacă dorești ca linkurile care fac trimitere la propriul tău site să beneficieze de o culoare sau un aspect distinct față de legăturile externe, selectorul de substring din CSS (*=) oferă o soluție elegantă și flexibilă.
Cum funcționează selectorul de potrivire parțială X[href*=”…”]
Selectorul de atribut [atribut*=valoare] verifică dacă valoarea atributului conține secvența de caractere specificată oriunde în interiorul textului său. Spre deosebire de ^= (care verifică doar începutul) sau $= (care verifică doar sfârșitul), operatorul *= caută subșirul în orice poziție.
/* Toate linkurile care conțin în adresă dexblog.ro primesc culoarea verde */
a[href*="dexblog.ro"] {
color: #1f6053;
font-weight: 500;
text-decoration: underline;
}Practic, această regulă CSS se va aplica oricărui link ce include textul indicat, indiferent dacă URL-ul este scris ca http://dexblog.ro, https://www.dexblog.ro/articole sau chiar un subdomeniu de tip forum.dexblog.ro.
Exemple practice de utilizare
Operatorul de substring este foarte util în diverse scenarii de design:
1. Evidențierea linkurilor către secțiuni specifice din site
/* Evidențiază legăturile către secțiunea de contact sau formulare */
a[href*="/contact/"] {
background-color: #f0f7f4;
padding: 2px 6px;
border-radius: 4px;
}2. Stilizarea descărcărilor de documente
/* Semnalarea linkurilor către directoare de documente */
a[href*="/fisiere/"],
a[href*="/descarcari/"] {
font-weight: 600;
color: #2c3e50;
}Comparație: *= versus ^= și $= în CSS
Pentru a alege selectorul potrivit nevoilor tale, iată o scurtă recapitulare a celor trei operatori de bază pentru atribute:
[atribut^="valoare"]: potrivește dacă șirul începe cu acea valoare (prefix).[atribut$="valoare"]: potrivește dacă șirul se termină cu acea valoare (sufix).[atribut*="valoare"]: potrivește dacă șirul conține acea valoare oriunde (subșir).
Atenționări privind potrivirile neintenționate
Deoarece *= caută subșirul oriunde în valoarea atributului, trebuie să fii atent la situațiile în care șirul apare ca parametru într-o adresă externă (de exemplu, https://alt-site.ro/?referral=dexblog.ro). Dacă dorești o delimitare strictă, se recomandă folosirea regulilor combinate sau a claselor CSS dedicate.
