MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

En este tercer artículo sobre selectores, veremos los pseudo-selectores — llamados así por no seleccionar elementos, sino ciertas partes de estos o solo bajo determinadas circunstancias. Hay de dos tipos: pseudo-clases y pseudo-elementos.

Pseudo-clases

Una pseudo-clase CSS consta de una clave precedida de dos puntos (:) que añadiremos al final del selector para indicar que daremos estilo a los elementos seleccionados solo cuando estos se encuentren en un estado determinado. Por ejemplo podríamos querer dar estilo a un elemento cuando este se muestre al pasarle el puntero del ratón, o una caja de selección al estar habilitada o deshabilitada o cuando un elemento es hijo directo de su padre en el árbol DOM.

No profundizaremos en cada una de las pseudo-clases — no es objetivo del Area de Aprendizaje presentarlas todas exhaustivamente, y se irán viendo con más detalle a lo largo del curso en el momento oportuno.

Ejemplo de pseudo-clase

Por ahora, veamos un ejemplo de cómo usarlas. Primero, un fragmento de HTML:

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

Y las reglas CSS:

/* These styles will style our link
   in all states */
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;
}

Y ahora trabajemos sobre el link que acabamos de estilizar.

Aprendizaje activo: Lista informativa a franjas tipo cebra

En este aprendizaje activo, deberás añadir franjas tipo cebra al enlace a una lista de información, y usar pseudo-clases para dar estilo a los links cuando sean activados al pasar el ratón. Solo debes modificar las 3 últimas reglas CSS del ejercicio. Pistas:

  1. Ya sabes cómo escribir la segunda pseudo-clase para activar estilos al pasar el ratón.
  2. Para hacer las franjas deberás usar la pseudo-clase :nth-of-type(), cambiando ligeramente las versiones de la misma según corresponda a líneas pares o impares. ¡Ánimo que tú puedes!.

Si te equivocas puedes comenzar de nuevo pulsando el botón Reset. Si te atrancas, pulsa el botón Show solution para ver una respuesta válida.

Pseudo-elementos

Los pseudo-elementos son parecidos a las pseudo-clases, con alguna diferencia. Estos son claves — ahora precedidas por (::) — que se añaden al final del selector para elegir cierta parte de un elemento.

Todos disponen de comportamientos específicos e interesantes características que escapan a nuestros objetivos de aprendizaje por el momento.

Ejemplo de pseudo-elemento

Mostramos a continuación un ejemplo sencillo de CSS que selecciona los espacios situados justo después de todos los enlaces absolutos y en su lugar añade una flecha:

<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>

Añadamos ahora la regla CSS:

/* All elements with an attribute "href", which values
   start with "http", will be added an arrow after its
   content (to indicate it's an external link) */
[href^=http]::after {
  content: '⤴';
}

para obtener el siguiente resultado:

Aprendizaje activo: Párrafo elegante

Lo siguiente será diseñar un párrafo elegante. Todo lo que debes hacer es aplicar las dos reglas a la primera línea del párrafo y a la primera letra, usando los pseudo-elementos ::first-line y ::first-letter. Con ellos daremos estilo a la primera línea y pondremos en negrita la primera letra dando un toque elegante y antiguo.

Si te equivocas puedes comenzar de nuevo pulsando el botón Reset. Si te atrancas, pulsa el botón Show solution para ver una respuesta válida.

Y ahora

Terminaremos nuestro viaje por los selectores CSS con Combinaciones y selectores múltiples.

Etiquetas y colaboradores del documento

 Colaboradores en esta página: javierpolit
 Última actualización por: javierpolit,