Saltar navegación

Pseudo-Clases

Que son as pseudo-clases?

As pseudo-clases clasifican aos elementos segundo o estado deste.

Por exemplo, podemos agrupar as ligazóns en función dos eventos que lles acontecesen: que o enlace fose xa visitado, que o cursor do rato se encontre enriba ou que deixe de estar sobre a ligazón, etc.

Así pois, coas pseudo-clases selecciónase, non tanto ao propio elemento, senón os seus diferentes estados.

A sintaxe dunha pseudo-clase é a seguinte:

selector:pseudo_clase { ... }

Algunhas das pseudo-clases máis importantes son:

Pseudo-Clase Funcionamento Exemplo en CSS 
selector:hover

Selecciona o elemento cando pasamos o rato por riba

Con este código en CSS coloreamos calquera ligazón de vermello pero so cando pasamos o rato por riba delas.

a:hover {
  color: red;
}
 
selector_de_enlace:visited

Selecciona as ligazóns (selector_de_enlace) sempre que xa fosen visitadas polo navegador onde estamos a abrir a páxina Web

Con este código en CSS colorearemos de vermello calquera ligazón sempre que xa fosen visitadas polo navegador onde estamos a abrir a páxina Web.

a:visited {
  color: red;
}
 
selector_de_enlace:link

Selecciona as ligazóns (selector_de_enlace) sempre que NON fosen visitadas polo navegador onde estamos a abrir a páxina Web

Con este código en CSS coloreamos de vermello calquera ligazón sempre que non a visitásemos antes polo navegador onde estamos a abrir a páxina Web.

a:link {
  color: red;
}
 
selector:first-child

Selecciona o primeiro elemento dos elementos fillos (selector) dun selector pai.

Con este código en CSS coloreamos de vermello o primeiro <li> fillo dun <ul>, xa que os <ul> non poden ter como fillos ningunha outra etiqueta que non sexan <li>.

li:first-child {
  color: red;
}
 
selector:last-child

Selecciona o último elemento dos elementos fillos (selector) dun selector pai.

Con este código en CSS coloreamos de vermello o último <li> fillo dun <ul>, xa que os <ul> non poden ter como fillos ningunha outra etiqueta que non sexan <li>.

li:last-child {
  color: red;
}
 
selector:nth-child(N)

Selecciona o elemento que ocupa a posición N dos elementos fillos (selector) dun selector pai . Onde N:

  • Pode ser un número que indica a posición.
  • Pode ser o valor "odd" que seleccionará os fillos impares
  • Pode ser o valor "even" que seleccionará os elementos pares

Con este código en CSS coloreamos de vermello os <li> impares, os pares e o segundo <td> de cada <tr>.

li:nth-child(odd) {
  color: red;
}

li:nth-child(even) {
  color: red;
}

td:nth-child(2) {
  color: red;
}

Exemplo...

See the Pen CSS - PseudoClases by Diego Rodicio (@drodicio) on CodePen.

Exemplo da utilización das pseudo-clases

Exemplo da utilización das pseudo-clases. Diego Rodicio Álvarez. CC BY-SA

Pulsa no botón de abaixo para descargar este exemplo: