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 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 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 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 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 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 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 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 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 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 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 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 Selecciona una part del document que conté un error d'ortografia que indica el navegador.

En aquest mòdul

  1. La cascada i l'herència
  2. Els selectors CSS
  3. El model de caixes
  4. Fons i vores
  5. El tractament del text en diverses direccions
  6. El desbordament dels continguts
  7. Els valors i les unitats
  8. Dimensionar elements en CSS
  9. Imatges, mèdia i elements de formulari
  10. Aplicar estil a les taules
  11. Depura el teu CSS
  12. Organitza el teu CSS