MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Selectors d'atributs

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,