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

En aquest, el tercer de la nostra sèrie d'articles sobre selectors, parlarem de pseudo-selectors: aquests no seleccionen elements reals, sinó certes parts d'elements o elements en només determinats contextos. Vénen en dos tipus principals: pseudo-classes i pseudo-elements.

Pseudo-classes

Una pseudo-class CSS és una paraula clau precedida de dos punts (:) que s'afegeix al final dels selectors per especificar quin estil volem aplicar als elements seleccionats només quan estiguin en un determinat estat. Per exemple, és possible que vulgueu estilitzar un element només quan està sent voltat pel punter del ratolí, o una casella de verificació quan aquesta està deshabilitada o marcada, o un element que sigui el primer fill del seu pare en l'arbre DOM.

No furgarem en cada pseudo-classe ara mateix-no és l'objecte de l'àrea d'aprenentatge per ensenyar-vos tot amb un detall exhaustiu, i sens dubte pot ser que trobem alguns d'aquests amb més detall més endavant si s'escau.

Un exemple de pseudo classe

De moment, vegem un senzill exemple de com utilitzar-les. Primer, un fragment HTML :

<a href="https://developer.mozilla.org/" target="_blank">Mozilla Developer Network</a>

A continuació, algunes regles CSS :

/*  Aquests estils estilitzaran el nostre enllaç en tots els estats  */
a {
  color: blue;
  font-weight: bold;
}

/* We want visited links to be the same color
   as non visited links */
a:visited {
  color: blue;
}

/* We highlight the link when it is
   hovered (mouse), activated
   or focused (keyboard) */
a:hover,
a:active,
a:focus {
  color: darkred;
  text-decoration: none;
}

i ara anem a jugar amb l'enllaç que acabem de donar-li estil!

Aprenentatge actiu: una llista d'informació amb ratlles de zebra

Al seu torn — en aquest segment d'aprenentatge actiu us agrairíem que afegíssiu algunes ratlles de zebra a una llista d'enllaços d'informació, i que també afegiu les pseudo-classes apropiades per a l'estil dels enllaços de manera diferent quan es planeja sobre ells. Només heu d'editar les tres últimes regles d'aquest exercici. Alguns suggeriments:

  1. Ja hem vist com escriure la segona pseudo classe pels estils de planejar.
  2. Per a les ratlles de zebra, haureu d'utilitzar una pseudo classe com :nth-of-type(), donant a les dues regles de color una versió una mica diferent de la pseudo classe per a l'estil dels elements de llista numerats, parells i imparells. Mireu si podeu consultar com fer-ho.

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.

Pseudo-elements

Els Pseudo-elements són molt semblants a les pseudo-classes, però tenen diferències. Són paraules clau, aquesta vegada precedides per dos dobles (::) — que es poden afegir al final dels selectors per seleccionar una determinada part d'un element.

Tots tenen comportaments i característiques interessants molt específiques, però aprofundir-ne en tot en detall, està més enllà del nostre abast, per ara.

Un exemple de pseudo-element

Aquí només mostrarem un simple exemple de CSS que selecciona l'espai just després de tots els enllaços absoluts i afegeix una fletxa en aquest espai:

<ul>
  <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS">CSS</a> defined in the MDN glossary.</li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML">HTML</a> defined in the MDN glossary.</li>
</ul>

Anem a afegir aquesta regla CSS :

/* Tots els elements amb un atribut "href", els valors dels quals comencen amb "http", s'afegirà una fletxa després del seu contingut (per indicar que és un enllaç extern) */
[href^=http]::after {
  content: '⤴';
}

I aquest és el resultat obtingut:

Active learning: A fancy paragraph

A continuació en l'aprenentatge actiu, tenim un bonic paràgraf per donar-li estil. Tot el que heu de fer aquí és aplicar els dos conjunts de regles a la primera línia del paràgraf i a la primera lletra, utilitzant els pseudo elements ::first-line and ::first-letter. Això hauria de donar estil a la primera línia del paràgraf en negreta i la primera lletra com un bonic capitular, donant-li una sensació d'estil antic.

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.

A continuació

Anem a completar el nostre recorregut pels selectors CSS, mirant els Combinadors i selectors múltiples.

Document Tags and Contributors

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