This translation is incomplete. Please help translate this article from English.

Els selectors d'atributs són un tipus especial de selector que coincidirà amb elements basats en els seus atributs  i els valors d'atribut. La seva sintaxi genèrica consta de claudàtors ([]) que contenen un nom d'atribut seguit d'una condició opcional per a que coincideixi amb el valor de l'atribut. Els selectors d'atributs es poden dividir en dues categories segons la forma en què coincideixen amb els valors de l'atribut: selectors d'atributs de presència i valor i selectors d'atributs de valor de subcadena..

Selectors d'atributs de presència i valor

Aquests selectors d'atributs intenten coincidir amb un valor d'atribut exacte :

  • [attr]Aquest selector seleccionarà tots els elements amb l'atribut attr, independentment del seu valor .
  • [attr=val]Aquest selector seleccionarà tots els elements amb l'atribut attr, però només si el seu valor és val.
  • [attr~=val]Aquest selector seleccionarà tots els elements amb l'atribut attr, però només si el valor val és d'una llista de valors separada per espais continguda en el valor d'attr's , per exemple una única classe en una llista separada per espais de classes.

Vegem un exemple amb el següent fragment HTML :

Ingredients for my recipe: <i lang="fr-FR">Poulet basquaise</i>
<ul>
  <li data-quantity="1kg" data-vegetable>Tomatoes</li>
  <li data-quantity="3" data-vegetable>Onions</li>
  <li data-quantity="3" data-vegetable>Garlic</li>
  <li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li>
  <li data-quantity="2kg" data-meat>Chicken</li>
  <li data-quantity="optional 150g" data-meat>Bacon bits</li>
  <li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li>
  <li data-quantity="25cl" data-vegetable="liquid">White wine</li>
</ul>

I una simple fulla d'estil:

/* All elements with the attribute "data-vegetable"
   are given green text */
[data-vegetable] {
  color: green;
}

/* All elements with the attribute "data-vegetable"
   with the exact value "liquid" are given a golden
   background color */
[data-vegetable="liquid"] {
  background-color: goldenrod;
}

/* All elements with the attribute "data-vegetable",
   containing the value "spicy", even among others,
   are given a red text color */
[data-vegetable~="spicy"] {
  color: red;
}

El resultat és el següent :

NotaEls atributs data-* vistos en aquest exemple s'anomenen atributs data. Proporcionen una manera d'emmagatzemar dades personalitzades en un atribut HTML, de manera que es pugui extreure i utilitzar fàcilment . Consulteu Com utilitzar atributs data per obtenir més informació .

Selector d'atributs de valor de subcadena

Els selectors d'atributs d'aquesta classe també es coneixen com a "RegExp-like selectors", perquè ofereixen una adaptació flexible de manera similar a la regular expression (però per ser clars, aquests selectors no són expressions regulars veritables):

  • [attr|=val] : Aquest selector seleccionarà tots els elements amb l'atribut attr pel qual el valor és exactament val o comença amb val- (compte, el guió aquí no és un error, això és per manejar els codis d'idiomes).
  • [attr^=val] : Aquest selector seleccionarà tots els elements amb l'atribut attr per al qual el valor comença amb val.
  • [attr$=val] : Aquest selector seleccionarà tots els elements amb l'atribut attr pel qual el valor finalitza amb val.
  • [attr*=val] : Aquest selector seleccionarà tots els elements amb l'atribut attr per al qual el valor conté la cadena val (a diferència de [attr~=val], aquest selector no tracta els espais com a separadors de valors, sinó com a part del valor de l'atribut.)

Continuem amb el nostre exemple anterior i afegiu les següents regles CSS:

/* Classic usage for language selection */
[lang|=fr] {
  font-weight: bold;
}

/* All elements with the attribute "data-quantity", for which
   the value starts with "optional" */
[data-quantity^="optional"] {
  opacity: 0.5;
}

/* All elements with the attribute "data-quantity", for which
   the value ends with "kg" */
[data-quantity$="kg"] {
  font-weight: bold;
}

/* All elements with the attribute "data-vegetable" containing
   the value "not spicy" are turned back to green */
[data-vegetable*="not spicy"] {
  color: green;
}

 

Amb aquestes noves regles, obtindrem això:

Aprenentatge actiu: Donar estil els resultats del futbol

En aquest aprenentatge actiu, ens agradaria que provéssiu la vostra mà per afegir selectors d'atributs a algunes regles per tal de donar estil a una llista de resultats de futbol senzilla. Hi ha tres coses per intentar fer aquí:

  • Les tres primeres regles afegeixen una icona de bandera al Regne Unit, Alemanya i Espanya, respectivament, a la part esquerra dels elements de la llista. Heu d'omplir els selectors d'atributs adequats perquè els equips rebin les seves banderes de país correctes, que coincideixin amb l'idioma.
  • Les regles 4-6 afegeixen un color de fons als elements de llista per indicar si l'equip ha pujat ( inc ) a la lliga (verd, rgba(0,255,0,0.7)), ha baixat ( dec ) (vermell, rgba(255,0,0,0.5)), o s'ha quedat en el mateix lloc ( same ) (blau, rgba(0,0,255,0.5). Ompliu els selectors d'atributs adequats perquè coincideixin amb els colors correctes amb els equips correctes, coincidents amb les cadenes inc, same i dec que apareixen en els valors de l'atribut data-perf.
  • Les regles 7-8 fan que els equips que s'estableixin per ser promoguts siguin en negreta, i equips que estan en perill de ser relegats en cursiva i grisa. Completeu els selectors d'atributs adequats per fer coincidir aquests estils amb els equips correctes, que coincideixin amb les cadenes pro i rel que apareixen en els valors de l'atribut data-perf.

Si cometeu un error, sempre podeu restablir-lo mitjançant el botó Reset. Si esteu realment atrapats, premeu el botó Show solution per veure una resposta potencial.

Properament

A continuació avançarem amb coses a un nivell superior, mirant Pseudo-classes i pseudo-elements.

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,