Cauta rapid aici ↑

CSS - Element stilizat dupa un anumit atribut

Stilizarea unui element dupa un anumit atribut se poate realiza foarte usor. Sintaxa acestuia este putin diferita si asta pentru ca este nevoie sa adaugam o pereche de paranteze drepte intre selector si acolade. In interiorul parantezelor drepte vom adauga, exact ca in HTML, doar atributul si optional valoarea respectiva pe care acesta o are in codul HTML.

 img[atribut="valoare"]{ /* proprietati cu valori pentru acest element */ } 

Aceasta este setarea de baza, insa putem face mult mai mult cu aceasta modalitate de stilizare a unui element dupa un atribut. In ajutorul nostru vin caracterele → ^ si $ ←, caractere pe care le putem folosi obligatoriu inaintea semnului egal ( = ).

Caracterul → ^ ← ii va spune browser-ului sa caute daca textul valoare pentru acel atribut incepe cu respectivul text dintre ghilimele.

 img[alt^="css"]{ border: 5px solid red; } 

Caracterul → $ ← ii va spune browser-ului sa caute daca textul valoare pentru acel atribut se termina cu respectivul text dintre ghilimele.

 img[alt$="css"]{ border: 5px solid red; } 

Este foarte important ordinea in care stilizati acelasi tag HTML (de exemplu img) si asta pentru ca daca un element are in componenta lui ambele atribute dupa care se face stilzarea si noi stilizam dupa un anumit atribut iar mai jos vom stiliza dupa un alt atribut ce se regaseste si in respectivul element, atunci avem toate sansele sa suprascriem stilul declarat mai sus.