Ghid CSS: cum stilizezi linkurile către imagini folosind selectorul de atribut X[href$=’.jpg’]

Atunci când construiești o pagină web sau un articol de blog, este adesea util să diferențiezi vizual linkurile care duc direct către fișiere media (cum ar fi imaginile) de linkurile obișnuite care conduc spre alte pagini web. În CSS, poți realiza acest lucru fără a adăuga clase manuale în codul HTML, folosind selectorul de atribut pentru sfârșit de șir ($=).

Cum funcționează selectorul de atribut X[href$=”.jpg”]

Selectorul de atribut cu sufix [atribut$=valoare] a fost introdus în CSS3 și verifică dacă valoarea atributului specificat se termină exact cu șirul de caractere indicat între ghilimele. În cazul elementelor ancoră (<a>), selectorul a[href$=".jpg"] va identifica orice legătură al cărei URL are extensia .jpg.

/* Schimbă culoarea și stilul linkurilor directe către imagini JPG */
a[href$=".jpg"] {
    color: #c0392b;
    font-weight: 600;
}

Adăugarea unei pictograme reprezentative pentru descărcare sau vizualizare

Un caz clasic de utilizare este adăugarea unei mici pictograme (de exemplu, o cameră foto sau o lupă) lângă linkurile către imagini, oferind vizitatorilor un indiciu vizual clar înainte de a face clic:

/* Adăugarea unei pictograme înaintea linkurilor către imagini JPG */
a[href$=".jpg"] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding-left: 20px;
    background: url('/imagini/iconita-imagine.png') no-repeat left center;
    background-size: 16px 16px;
    text-decoration: underline;
}

Extinderea regulii pentru formate multiple de imagine (JPEG, PNG, GIF, WebP)

Deoarece pe web se utilizează multiple formate grafice, poți grupa mai multe selectoare de atribute separate prin virgulă pentru a acoperi toate extensiile frecvente:

/* Stil comun pentru toate formatele populare de imagini */
a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"],
a[href$=".webp"],
a[href$=".svg"] {
    color: #2980b9;
    border-bottom: 1px dashed #2980b9;
}

Bune practici și sensibilitatea la majuscule

Pentru a asigura o compatibilitate completă, ține cont de următoarele aspecte tehnice:

• Sensibilitatea la majuscule (Case Sensitivity): În mod tradițional, potrivirea atributelor în CSS este sensibilă la majuscule (astfel încât un link către .JPG ar putea fi omis). În versiunile moderne de CSS (Selectors Level 4), poți adăuga modificatorul i înainte de paranteza de închidere: a[href$=".jpg" i] pentru a potrivi indiferent de majuscule sau minuscule.
• Parametri URL: Dacă adresele URL ale imaginilor includ parametri de tip query string (de exemplu, imagine.jpg?v=2), selectorul $= nu va mai recunoaște sfârșitul șirului. În astfel de situații, este recomandat selectorul de conținere *= (de exemplu, a[href*=".jpg"]).
• Performanță: Selectoarele de atribute sunt rapide și native în toate browserele moderne, eliminând necesitatea unor scripturi JavaScript suplimentare pentru marcarea legăturilor media.