Pseudoclasses i pseudoelements

El conjunt següent de selectors que veurem s’anomenen pseudoclasses i pseudoelements. N'hi ha una bona quantitat i sovint serveixen per a propòsits força específics. Un cop que hauràs après a utilitzar-los, pots mirar-te la llista i veure si n’hi ha cap que et serveixi per a la tasca que intentes assolir. Una vegada més afegim que la pàgina de MDN corresponent a cada selector et pot ser útil per a esbrinar-ne la compatibilitat dels navegadors.

Prerequisits:	Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i nocions bàsiques de com funciona el CSS.
Objectiu:	Adquirir més informació sobre els selectors de pseudoclasse i pseudoelement.

Què és una pseudoclasse?

Una pseudoclasse és un selector que selecciona elements que es troben en un estat específic. Per exemple, són el primer element del seu tipus o bé el cursor del ratolí els passa per sobre. Solen actuar com si haguessis aplicat una classe a alguna part del document, i sovint t’ajuden a reduir l'excés de classes en l'etiquetatge i et proporcionen un codi més flexible i fàcil de mantenir.

Les pseudoclasses són paraules clau que comencen amb dos punts (:):

:pseudo-class-name

Un exemple senzill de pseudoclasse

Donem una ullada a un exemple senzill. Si volem que el primer paràgraf d'un article es vegi més gran i en negreta, podem afegir una classe a aquest paràgraf i després afegir CSS a aquesta classe, tal com es mostra en el primer exemple següent:

Tanmateix, això pot resultar molest a l'hora de fer-ne el manteniment; i si afegim un tipus nou de paràgraf a la part superior del document? Hauríem d’incloure la classe en el nou paràgraf. Doncs, en comptes d’afegir la classe, podríem utilitzar el selector de pseudoclasse :first-child; això seleccionarà sempre el primer element fill de l'article i ja no caldria editar l’HTML (que no sempre és possible, perquè de vegades es genera des d'un CMS).

Totes les pseudoclasses es comporten de la mateixa manera. Etiqueten una part del document que es troba en un estat determinat, i es comporten com si haguessis afegit una classe a l'HTML. Pots veure’n més exemples a MDN:

Nota: és vàlid escriure pseudoclasses i pseudoelements sense que les precedeixi cap selector d'element. En l'exemple anterior, podríem escriure :first-child i la regla s'aplicaria a qualsevol element que sigui el primer element d'un element <article>, no només primers paràgrafs. :first-child equival a *:first-child. Però normalment volem més control i cal ser més específics.

Pseudoclasses d'acció d'usuari

Algunes pseudoclasses només actuen quan l'usuari interactua d'alguna manera amb el document. Aquestes pseudoclasses d'acció de l'usuari, de vegades denominades pseudoclasses dinàmiques, actuen com si s'hagués afegit una classe a l'element quan l'usuari hi interactua. Els exemples inclouen:

:hover; ja l’hem esmentada; només actua si l'usuari passa el cursor del ratolí per sobre d'un element, normalment un enllaç.
:focus; només actua si l'usuari selecciona l'element amb controls de teclat.

Què és un pseudoelement?

Els pseudoelements es comporten d’una manera similar, però actuen com si afegissis un element HTML completament nou a l’etiquetatge, en lloc d’aplicar una classe als elements que ja hi ha. Els pseudoelements comencen amb un doble dos punts ::.

::pseudo-element-name

Nota: Alguns pseudoelements originals utilitzaven la sintaxi de dos punts simple, i de vegades encara ho pots veure en algun codi o alguns exemples. Els navegadors moderns admeten els primers pseudoelements amb una sintaxi de dos punts simple o de dos punts doble per a tenir compatibilitat cap enrere.

Per exemple, si volguessis seleccionar la primera línia d’un paràgraf, podries etiquetar-la amb un element <span> i utilitzar un selector d’elements; però això falla si el nombre de paraules que has etiquetat és superior o inferior a l'amplada de l'element principal. Com que no podem saber quantes paraules cabran en una línia perquè això canvia amb l’amplada de la pantalla o la mida de la lletra, no és possible fer-ho només afegint HTML.

El selector de pseudoelements ::first-line ho fa de manera segura: selecciona només la primera línia, encara que el nombre de paraules augmenti o disminueixi.

Actua com si hi hagués una etiqueta <span> màgica en aquesta primera línia que s'actualitza cada cop que canvia la longitud de la línia.

Pots veure que això selecciona la primera línia dels dos paràgrafs.

Combinar pseudoclasses i pseudoelements

Si vols que la primera línia del primer paràgraf es vegi en negreta, pots agrupar els selectors :first-child i ::first-line. Prova d’introduir en l'exemple en viu anterior el CSS següent. Amb això demanem que volem seleccionar la primera línia del primer element <p>, que hi ha dins d’un element <article>.

article p:first-child::first-line {
  font-size: 120%;
  font-weight: bold;
}

Generar contingut amb `::before` i `::after`

Hi ha un parell de pseudoelements especials, que s'utilitzen juntament amb la propietat content per a inserir contingut al document mitjançant CSS.

Pots utilitzar-los per a inserir una cadena de text, com en l'exemple en viu següent. Prova de canviar el valor de text de la propietat content (en-US) i observa com canvia a la sortida. També pots canviar el pseudoelement ::before per ::after i observa que el text s’insereix al final de l'element, en lloc del principi.

Inserir cadenes de text amb CSS, de fet, no es fa gaire sovint a la web, perquè aquest text no és accessible per a alguns lectors de pantalla i pot ser difícil de trobar i editar en el futur.

Un ús més vàlid d'aquests pseudoelements és inserir una icona, per exemple la petita fletxa afegida de l'exemple següent, que és un indicador visual que no volem que un lector de pantalla llegeixi:

Aquests pseudoelements també s'utilitzen amb freqüència per a inserir una cadena buida, a la qual després pots aplicar estil com a qualsevol altre element de la pàgina.

En l'exemple següent hem afegit una cadena buida amb el pseudoelement ::before. L'hem establert en display: block per a poder-hi aplicar una amplada i una alçada. A continuació, utilitzem el CSS per donar-hi estil com a qualsevol altre element. Pots jugar-hi amb el CSS i canviar-ne l’aspecte i el comportament.

L’ús dels pseudoelements ::before i ::after, juntament amb la propietat content, es coneix en CSS com el «contingut generat» i veuràs que aquesta tècnica s’utilitza sovint per a diverses tasques. Un bon exemple és el lloc CSS Arrow Please, que t'ajuda a generar una fletxa amb CSS. Observa el CSS mentre crees la teva fletxa i fixa’t com funcionen els pseudoelements ::before i ::after. Sempre que vegis aquests selectors, cerca en la propietat content (en-US) per esbrinar què s'ha afegit al document.

Secció de referència

Hi ha un gran nombre de pseudoclasses i pseudoelements, i és útil tenir una llista en la qual s’hi faci referència. A continuació es mostren unes taules amb enllaços que apunten a les seves pàgines de referència en MDN. Fes-les servir de referència per veure de quines possibilitats d’etiquetatge disposes.

Pseudoclasses

Paged Media, selecciona les pàgines de l’esquerra.

Selector	Descripció
`:active`	Selecciona un element quan l’usuari l'activa (per exemple, fent-hi clic a sobre).
`:any-link`	Selecciona els estats `:link` i `:visited` d'un enllaç.
`:blank` (en-US)	Selecciona un element `<input>` que té el valor d'entrada buit.
`:checked`	Selecciona un botó d'opció o una casella de selecció en l'estat de seleccionat.
`:current` (en-US)	Selecciona l'element o un antecessor de l'element que es mostra actiu.
`:default`	Selecciona un o diversos elements de la interfície d'usuari que són els elements predeterminats entre un conjunt d'elements similars.
`:dir`	Selecciona un element a partir de la direccionalitat (el valor de l’atribut `dir` en HTML o la propietat `direction` en CSS).
`:disabled`	Selecciona els elements d'una interfície d'usuari que estan deshabilitats.
`:empty`	Selecciona un element que no té fills, excepte, opcionalment, un espai blanc.
`:enabled`	Selecciona els elements d'una interfície d'usuari que estan habilitats.
`:first`	En Paged Media, selecciona la primera pàgina.
`:first-child`	Selecciona un element que és el primer entre els seus germans.
`:first-of-type`	Selecciona un element d'un tipus determinat entre els seus germans.
`:focus`	Selecciona l’element que té el focus.
`:focus-visible` (en-US)	Selecciona l’element que té el focus i que el focus està visible per a l'usuari.
`:focus-within`	Selecciona l’element que té el focus més l’element que té un descendent amb el focus.
`:future` (en-US)	Selecciona els elements que estan just després de l’element actiu.
`:hover`	Selecciona un element quan l'usuari hi interactua.
`:indeterminate`	Selecciona els elements d'una interfície d'usuari, el valor dels quals estan en un estat indeterminat; generalment es tracta de caselles de selecció.
`:in-range`	Selecciona un element amb un rang de valors quan té el valor dins del rang.
`:invalid`	Selecciona un element, com ara `<input>`, que estigui en un estat no vàlid.
`:lang`	Selecciona un element segons l’idioma (valor de l’atribut lang en HTML).
`:last-child`	Selecciona l’element que és l’últim entre els seus germans.
`:last-of-type`	Selecciona un element d'un tipus determinat que és l’últim entre els seus germans.
`:left`
`:link`	Selecciona els enllaços no visitats.
`:local-link` (en-US)	Selecciona els enllaços que apunten a les pàgines que estan al mateix lloc web que el document actiu.
`:is()`	Selecciona qualsevol dels selectors de la llista de selectors.
`:not`	Selecciona coses que no han estat seleccionades per altres selectors, que es converteixen en valor d'aquest selector.
`:nth-child`	Selecciona elements d'entre una llista de germans: els germans es combinen amb una fórmula del tipus `an+b` (per exemple, 2n + 1 coincidiran amb els elements 1, 3, 5, 7, etc. Tots els imparells).
`:nth-of-type`	Selecciona elements d'un tipus determinat d'entre una llista de germans (per exemple, `<p>`): els germans es corresponen amb una fórmula de la forma `an+b` (per exemple, 2n + 1 coincidiria amb els elements 1, 3, 5, 7, etc. Tots els imparells).
`:nth-last-child`	Selecciona elements d'entre una llista de germans, comptant enrere des del final. Els germans es corresponen amb una fórmula del tipus `an+b` (per exemple, 2n + 1 coincidiria amb l’últim element de la seqüència, després els dos elements anteriors, un altre cop els dos elements anteriors, etc. Tots els imparells, comptant des del final).
`:nth-last-of-type`	Selecciona elements d'un tipus determinat d'entre una llista de germans (per exemple, `<p>`), comptant cap enrere des del final. Els germans es corresponen amb una fórmula de la forma `an+b` (per exemple, 2n + 1 coincidiria amb l’últim element d’aquest tipus de la seqüència, després els dos elements anteriors a aquell, i un altre cop dos elements anteriors, etc. Tots els imparells, comptant des del final).
`:only-child`	Selecciona un element que no té germans.
`:only-of-type`	Selecciona un element que és l'únic del seu tipus entre els seus germans.
`:optional`	Selecciona els elements de formulari que no són necessaris.
`:out-of-range`	Selecciona un element amb un interval quan el seu valor està fora del rang.
`:past` (en-US)	Selecciona els elements que són anteriors a l’element actiu.
`:placeholder-shown`	Selecciona un element d’entrada que mostra el marcador de posició del text.
`:playing` (en-US)	Selecciona un element que representa un àudio, un vídeo o un recurs similar, que pot ser «reproduït» o «pausat» quan aquest element «es reprodueix».
`:paused` (en-US)	Selecciona un element que representa un àudio, un vídeo o un recurs similar, que pot ser «reproduït» o «pausat», quan aquest element està «en pausa».
`:read-only`	Selecciona un element no modificable per l'usuari.
`:read-write`	Selecciona un element modificable per l'usuari.
`:required`	Selecciona els elements de formulari que són necessaris.
`:right`	En Paged Media, selecciona les pàgines de la dreta.
`:root`	Selecciona un element que és l'arrel del document.
`:scope`	Selecciona qualsevol element que sigui un element d'abast.
`:valid`	Selecciona un element, com ara `<input>`, que estigui en un estat vàlid.
`:target`	Selecciona l’element al qual apunta l’URL activa (és a dir, si té un ID que coincideix amb l’identificador de fragment de l’URL actiu).
`:visited`	Selecciona els enllaços visitats.

Pseudoelements

Selector	Descripció
`::after`	Selecciona un element que pot aparèixer després del contingut actiu de l'element originari.
`::before`	Selecciona un element que pot aparèixer abans del contingut actiu de l'element originari.
`::first-letter`	Selecciona la primera lletra de l'element.
`::first-line`	Selecciona la primera línia de l'element.
`::grammar-error` (en-US)	Selecciona una part del document que conté un error de gramàtica que indica el navegador.
`::selection`	Selecciona la part del document seleccionat.
`::spelling-error` (en-US)	Selecciona una part del document que conté un error d'ortografia que indica el navegador.