Pseudoclasses i pseudoelements

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

El següent conjunt de selectors que veurem s’anomenen pseudoclasses i pseudoelements. N'hi ha una bona quantitat i sovint serveixen per a propòsits força concrets. Un cop sàpigues com utilitzar-los, pots mirar la llista per veure si hi ha alguna cosa que et serveixi per a la tasca que intentes assolir. Una vegada més, la pàgina de MDN corresponent a cada selector és útil per explicar l'assistència del navegador.

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 una idea de com funciona el CSS (mira Primers passos amb CSS).
Objectiu: Obtenir més informació sobre els selectors de pseudoclasses i pseudoelements.

Què és una pseudoclasse?

Una pseudoclasse és un selector que selecciona elements que es troben en un estat específic. Per exemple, si són el primer element del seu tipus o bé si el ratolí els hi passa per sobre. Solen actuar com si haguessis aplicat una classe a alguna part del document, sovint ajuda a reduir l'excés de classes a 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

Exemple simple de pseudoclasse

Donguem una ullada a un exemple simple. Si volguéssim que el primer paràgraf d'un article es veiés més gran i en negreta, podríem afegir una classe a aquest paràgraf i després afegir CSS a aquesta classe, tal com es mostra al primer exemple següent:

Tanmateix, això pot resultar molest a l'hora de fer el manteniment, i si s’afegeix un nou paràgraf a la part superior del document? Hauríem de moure la classe al nou paràgraf. En comptes d’afegir la classe, podríem utilitzar el selector de pseudoclasse :first-child; això sempre tindrà com a objectiu el primer element fill de l'article i ja no caldrà editar el HTML (això no sempre serà possible, ja que a vegades es genera des d'un CMS.)

Totes les pseudoclasses es comporten de la mateixa manera. Delimiten una part del document que es troba en un estat determinat, comportant-se com si haguessis afegit una classe a l'HTML. Mira més exemples a MDN:

Pseudoclasses d'acció d'usuari

Algunes pseudoclasses només s'apliquen 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 interactua amb ell. Els exemples inclouen:

  • :hover — esmentat anteriorment; només s'aplica si l'usuari mou el ratolí per sobre d'un element, normalment un enllaç.
  • :focus — només s'aplica si l'usuari centra l'element mitjançant controls de teclat.

Què és un pseudoelement?

Els pseudoelements es comporten d’una manera similar, però actuen com si haguessis afegit un element HTML completament nou al marcador, en lloc d’aplicar una classe als elements existents. Els pseudoelements comencen amb un doble dos punts ::.

::pseudo-element-name

Nota: Alguns pseudoelements inicials utilitzaven la sintaxi de dos punts, de manera que 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 o de dos punts dobles per a la compatibilitat cap enrere.

Per exemple, si vols seleccionar la primera línia d’un paràgraf, podries delimtar-lo en un element <span> i utilitzar un selector d’elements; tanmateix, això fallaria si el nombre de paraules que has embolicat és superior o inferior a l'amplada de l'element principal. Com que no sabem quantes paraules s’adaptaran a una línia, ja que canviarà si l’amplada de la pantalla o la mida de la font canvia, és impossible fer-ho afegint només HTML.

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

Actua com si un <span> estigués delimitant màgicament aquesta primera línia i 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'editar l'exemple en directe anterior perquè utilitzi el CSS següent. Diguem que volem seleccionar la primera línia, del primer element <p>, que es troba 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 inserir contingut al document mitjançant CSS.

Pots utilitzar-les per inserir una cadena de text, com a l'exemple en directe següent. Prova de canviar el valor de text de la propietat content i mira com canvia a la sortida. També pots canviar el pseudoelement ::before a ::after i veure el text inserit al final de l'element en lloc del principi.

Inserir cadenes de text de CSS no és realment una cosa que fem molt sovint a la web, ja que aquest text és inaccessible 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 a l'exemple següent, que és un indicador visual que no volem que llegeixi un lector de pantalla:

Aquests pseudoelements també s'utilitzen freqüentment per inserir una cadena buida, que després es pot dissenyar com qualsevol altre element de la pàgina.

A l'exemple següent, hem afegit una cadena buida mitjançant el pseudoelement ::before. Hem establert això a display: block per tal que li puguem dissenyar l'amplada i l'alçada. A continuació, utilitzem CSS per dissenyar-lo com amb qualsevol element. Pots jugar amb el CSS i canviar el seu aspecte i comportament.

L’ús dels pseudoelements ::before y ::after, juntament amb la propietat content, es coneix en CSS com a «contingut generat» i sovint veuràs que aquesta tècnica s’utilitza per a diverses tasques. Un bon exemple és el lloc CSS Arrow Please, que t'ajuda a generar una fletxa fent servir CSS. Mira el CSS mentre creeis la teva fletxa i veuràs com funcionen els pseudoelements ::before i ::after. Sempre que vegis aquests selectors, mira la propietat content per veure què s'afegeix al document.

Secció de referència

Hi ha un gran nombre de pseudoclasses i pseudoelements, i és útil tenir una llista a la qual fer referència. A continuació, es mostren taules amb enllaços a les seves pàgines de referència en MDN. Fes-ho servir com a referència per veure què hi ha disponible per delimitar.

Pseudoclasses

Selector Descripció
:active Selecciona un element quan l’usuari l'activa (per exemple, fent clic a sobre).
:any-link Selecciona els estats :link i :visited d'un enllaç.
:blank Selecciona un element <input> el valor d'entrada del qual està buit.
:checked Selecciona un botó d'opció o una casella de selecció en l'estat seleccionat.
:current Selecciona l'element o un avantpassat de l'element que es mostra actualment.
: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 en funció de la seva direccionalitat (valor de l’atribut dir en HTML o propietat direction en CSS).
:disabled Selecciona elements d'interfície d'usuari que es troben desactivats.
:empty Selecciona un element que no té fills, excepte opcionalment amb un espai blanc.
:enabled Selecciona elements d'interfície d'usuari que es troben habilitats.
:first A Paged Media, selecciona la primera pàgina.
:first-child Selecciona un element que es troba primer entre els seus germans.
:first-of-type Selecciona un element d'un tipus determinat entre els seus germans.
:focus Selecciona un element que està focalitzat.
:focus-visible Selecciona un element que està focalitzat i aquest ha de ser visible per a l'usuari.
:focus-within Selecciona un element que està focalitzat més un element amb un descendent focalitzat.
:future Selecciona els elements que es troben just després de l’element actual.
:hover Selecciona un element quan l'usuari hi interactua.
:indeterminate Selecciona elements d'interfície d'usuari, el valor dels quals està en un estat indeterminat, generalment es tracta de caselles de selecció.
:in-range Selecciona un element amb un interval quan el seu valor es troba dins del rang.
:invalid Selecciona un element, com ara <input>, en un estat no vàlid.
:lang Selecciona un element basat en el llenguatge (valor de l’atribut lang en HTML).
:last-child Selecciona un element que es troba últim entre els germans.
:last-of-type Selecciona un element d'un tipus determinat que es troba últim entre els germans.
:left A Paged Media, selecciona les pàgines de l’esquerra.
:link Selecciona els enllaços no visitats.
:local-link Selecciona els enllaços que apunten a les pàgines que es troben al mateix lloc web que el document actual.
:is() Selecciona qualsevol dels selectors de la llista de selectors.
:not Selecciona coses que no han estat seleccinades per altres selectors que es converteixen en valor d'aquest seleccionador.
:nth-child Selecciona elements d'una llista de germans: els germans es combinen amb una fórmula de la forma an+b (per exemple, 2n + 1 coincidiran amb els elements 1, 3, 5, 7, etc. Tots els imparells).
:nth-of-type Selecciona elements d'una llista de germans d'un tipus determinat (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'una llista de germans, comptant 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 de la seqüència, després dos elements abans d'ell, un altre cop dos elements abans, etc. Tots els imparells, comptant des del final).
:nth-last-of-type Selecciona elements d'una llista de germans d'un tipus determinat (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 dos elements abans d'ell, i un altre cop dos elements abans, 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 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 anteriors a l’element actual.
: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 «s'està reproduint».
: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 elements de formulari necessaris.
:right A 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>, en un estat vàlid.
:target Selecciona un element al que apunta l’URL activa (és a dir, si té un ID que coincideix amb el fragment d’URL actual).
:visited Selecciona els enllaços visitats.

Pseudoelements

Selector Descripció
::after Selecciona un element que pot aparèixer després del contingut real de l'element originari.
::before Selecciona un element que pot aparèixer abans del contingut real 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 indicat pel navegador.
::selection Selecciona la porció del document seleccionat.
::spelling-error Selecciona una part del document que conté un error d'ortografia tal i com l'ha indicat el navegador.

En aquest mòdul

  1. La cascada i l'herència
  2. Selectors CSS
  3. El model de caixa
  4. Fons i vores
  5. El maneig de diferents direccions de text
  6. El contingut que es desborda
  7. Els valors i les unitats
  8. Dimensionar elements en CSS
  9. Elements d'imatge, de media i de formulari
  10. Aplicar estil a les taules
  11. Depurar el CSS
  12. Organitzar el CSS