Si busques aplicar regles d'estil a la teva pàgina web, aleshores els selectors són el recurs indicat. Hi ha diversos tipus de selectors dins dels quals alguns tenen més popularitat. Per això avui us mostrem què són els selectors d'atribut a CSS, perquè treguis més profit a aquestes eines.
Mitjançant CSS podràs valdre't de diverses opcions, que t'ajudaran fortament amb la presentació de la teva pàgina web. Els selectors d'atribut serviran per delimitar elements, i fer més fàcil la feina de personalització. Encara que aquest tema pot resultar complicat per a persones no vinculades a ell, aprendre'n et pot obrir moltes portes.
Quin significat té CSS?
Si estàs vinculat al món del disseny web, aquest terme ho hauràs escoltat sovint. Les fulles d'estil en cascada (CSS) és un llenguatge de programació que us permet crear i modificar ràpidament i fàcilment un document HTML. Això significa que és un llenguatge amb el qual pots fer la gestió del disseny, fer canvis, presentació, millores i també personalització de pàgines web. El seu nom prové que permet calcular propietats heretades d'un altre en diverses fulles. En disseny web això es diu cascada.
Què són els selectors d'atribut a CSS?
Els selectors de CSS són les eines que utilitzeu per definir l'estil que voleu donar als vostres elements CSS. Hi ha molts tipus de selectors en aquest llenguatge, cadascun amb la seva pròpia sintaxi i utilitat. L'ús de les regles de programació correctes ajuda el navegador a aplicar certes propietats als elements especificats.
Per la seva banda, els selectors d'atributs són un dels tipus de selectors que tenim a CSS. Són molt útils, encara que de vegades no tan coneguts com altres selectors més comuns com els selectors de classes o d'etiquetes. Els selectors CSS s'utilitzen per especificar a quins camps volem aplicar estils.
A CSS els selectors serveixen per delimitar els elements HTML de la nostra pàgina web als quals volem aplicar un estil. CSS té molts selectors que us permeten seleccionar elements amb gran precisió en aplicar estils. Aquests anomenats selectors d'atributs garanteixen que seleccioneu elements HTML en funció dels seus atributs i/o valors.
Quins tipus de selectors són atributs?
[nom_atribut] selecciona elements que tenen l'atribut anomenat nom_atribut establert independentment del seu valor.
[nom_atribut=valor] selecciona elements l'atribut dels quals anomenat nom_atribut s'estableix en un valor igual a valor.
[nom_atribut~=valor] selecciona elements que tenen un atribut anomenat nom_atribut establert i almenys un dels valors de l'atribut és valor.
[nom_atribut|=valor], selecciona elements que tenen un atribut anomenat nom_atribut establert.
[attribute_name$=value] Seleccioneu etiquetes l'atribut de les quals acabi amb aquest valor.
[nom_atribut^=valor] Seleccioneu etiquetes l'atribut de les quals comença amb aquest valor.
Com relacionar les lletres majúscules i minúscules?
Si vols relacionar els valors dels atributs sense distingir entre majúscules i minúscules, podeu utilitzar el valor «i» abans del claudàtor de tancament. Aquest indicador us comunica al navegador que coincideixi amb tots els caràcters ASCII, independentment de si estan en majúscules o minúscules. Sense aquesta marca, els valors es concatenen segons les pautes de llenguatge que distingeixen entre majúscules i minúscules del document. HTML distingeix entre majúscules i minúscules.
Què són els operadors de selectors d'atributs?
podem utilitzar alguns operadors per a selectors d'atributs que no són tan coneguts, i que ens permeten afinar significativament l'aparença de certs valors als atributs consultats.
Aquests són els operadors disponibles als selectors d'atributs
*= (que conté): L'operador * us permet seleccionar elements que tenen una cadena específica com a valor d'un atribut almenys una vegada.
^= (ocorre al principi del valor de l'atribut): Escull elements que tenen un atribut el valor del qual comença amb una cadena específica.
$= (ocorre al final del valor de l'atribut): Selecciona elements que tenen un atribut el valor del qual acaba amb una cadena específica.
~= (conté una paraula exacta o separada per espais): Tria elements el valor d'atribut dels quals té contingut que coincideix exactament amb una cadena especificada, o que conté una paraula separada per espais amb una cadena especificada.
|= (conté la paraula exacta o està separada per guions): Similar a això, però la paraula es pot separar per guions en lloc d'espais.
Com utilitzar selectors a CSS?
Hi ha dues maneres possibles d'utilitzar selectors a CSS. Si tens codi HTML i codi CSS al mateix document, tot el que necessites fer és afegir un selector de CSS a la capçalera (head) del teu lloc.
Per contra, si el teu HTML i CSS estan en documents separats, és possible que tinguis un document anomenat index.html i un altre document anomenat style.css. El fitxer index.html ha d'incloure una línia de codi que truqueu al fitxer CSS perquè els estils es mostrin correctament al vostre lloc web.
Quins altres tipus de selectors trobem a CSS?
Hi ha diferents grups de selectors. Estar al corrent de quin és el tipus de selector que necessites us ajudarà a utilitzar l'eina idònia per al vostre projecte. Per això te'n mostrem alguns a continuació:
Selectors de tipus, classe i identificador
Aquest grup inclou selectors que restringeixen un element HTML, com un fitxer. També conté selectors que restringeixen una classe o un identificador.
Pseudoclasses i pseudoelements
Aquest grup de selectors inclou pseudoclasses, que donen format a estats específics dun element. Per exemple, la pseudoclasse hover selecciona un element només quan el ratolí passa sobre ell. També inclou pseudoelements que seleccionen una part específica d'un element en lloc de l'element en si
Combinadors
Mitjançant aquesta sèrie de selectors es combinen altres selectors, amb l'objectiu de separar diferents elements dels nostres documents.
Selector universal
Automàticament l'asterisc (*) el qual és el símbol de selector universal, escull tots els elements de determinat document.
Selector d'ID
Aquest tipus va ser aconseguit amb l'objectiu de seleccionar els elements que tinguin la base a l'atribut d'ID.
Si busques el control de tot el que passa en un lloc web, definitivament la millor manera d'obtenir-ho és mitjançant el seu propi disseny. Per a ells podeu auxiliar-vos d'eines com els selectors d'atributs. Així que si et preguntaves què són els selectors d'atribut a CSS, en aquest article esperem haver-te donat les respostes. Si consideres que hem deixat d'esmentar alguna cosa important, fes-ho saber als comentaris.
