Pseudo-clases y pseudo-elementos

Pseudo-clases 

¿Recuerdas cuando hablamos sobre los selectores de CSS en las últimas guías?
No hemos mencionado deliberadamente un tipo: los selectores de pseudoclases.
Los selectores para pseudoclases son selectores CSS precedidos por dos puntos y se utilizan para seleccionar elementos en función de determinadas condiciones.

Vayamos en orden: ¿qué es una pseudoclase? ¿Alguna vez has pasado el cursor sobre un elemento y lo has visto cambiar? Muy probablemente, en ese caso, lo que has cambiado es el estado del elemento que ha pasado del estado normal al estado flotante. Hover, es una pseudo-clase, que es una clase que define cómo se representará un elemento en un estado determinado.
En el lenguaje CSS, todo desarrollador web lo conoce bien, las pseudoclases son un elemento muy útil para dar dinamismo cuando decides crear un sitio web.

Veamos cuál es la sintaxis correcta y, posteriormente, cuáles son las principales pseudoclases, divididas por los elementos del lenguaje html al que pertenecen.

button {
   border: solid red 2px;
   background-color: transparent;
   color : red;
}

button:hover {

/*proriedad css para modificar*/

   background-color: red;
   color : white;
}

Con el código anterior, podemos ver cómo, al pasar el mouse sobre un botón, este cambia el color del texto y el fondo (no te preocupes si ves que el color cambia repentinamente, veremos cómo cambiar esta propiedad en la próxima guía).

Veamos, ahora, cuáles son las principales pseudo-clases principales que puedes usar.

Pseudo clases tag anchor <a>

• :link - Probablemente la pseudoclase más confusa de las pseudoclases de enlace. Puedes estar pensando, pero ¿no son todos enlaces? En realidad no si no tienen el atributo href, de hecho esta pseudo clase solo selecciona las etiquetas <a> con el atributo href dentro.
• :visited - Selecciona los enlaces que ya han sido visitados por el usuario, obviamente en función del historial del navegador.
• :active - Selecciona un enlace en el momento en que se activa, es decir, en el momento en que se hace clic y aún no se ha soltado el botón.

Pseudo clases tag de input

• :focus - Seleccione el campo de input cuando el usuario hizo clic para escribirnos. es muy útil para darle un estilo diferente a una etiqueta de entrada cuando el usuario hace clic y así dejar claro que puede escribir en ella.
• :target - La pseudoclase de destino se usa junto con los ID y coincide cuando la etiqueta hash en la URL actual coincide con ese ID. Entonces, si está en la URL www.aulab.es/#contactos, el selector de destino #contactos: coincidirá. Esto puede ser extremadamente poderoso.
• :enabled - Selecciona los input que están por defecto en el estado habilitado.
• :disabled - Selecciona los input que tienen el atributo "deshabilitado".
• :checked - Seleccione las casillas de verificación a medida que se seleccionan.
• :indeterminate - Selecciona los input radio que aún no se han seleccionado.
• :required - Selecciona los input que tengan el atributo "requerido".
• :optional - Selecciona los input que no tienen el atributo "obligatorio" y, por lo tanto, son opcionales.

Pseudo Clases en base a la posición del elemento

• :first-child - Selecciona el primer hijo dentro de un elemento
• :last-child - Selecciona el último hijo dentro de un elemento
• :nth-child() - Selecciona los elementos en función de la posición dentro de un elemento. También tienes la opción de seleccionar elementos pares/impares, veamos cómo:
  • even / odd - Con estas palabras clave puedes seleccionar respectivamente todos los elementos pares o todos los elementos impares
  • n - Al insertar un número entre paréntesis, seleccionarás solo el elemento que se encuentra en esa posición
• :nth-type() - Funciona como: nth-child pero se usa en lugares donde los elementos del mismo nivel son de diferentes tipos. Por ejemplo, si dentro de un <div> hubiera una serie de párrafos y una serie de imágenes.
• :first-of-type - Selecciona el primer elemento de un determinado tipo de elemento.
• :last-of-type - Selecciona  el último elemento de un determinado tipo de elemento.
• :nth-last-of–type() - Funciona con nth-type pero empezando desde abajo
• :nth-last-child() - Funciona con nth-child pero empezando desde abajo
• :only-of-type - Selecciona el elemento si es el único de ese tipo dentro del elemento principal

<div>
   <ul> <!-- ul:only-of-type -->
      <li>primer</li> <!-- li:first-child | li:nth-child(odd) -->
      <li>segundo</li> <!-- li:nth-child(2) | li:nth-child(even) -->
      <li>tercero</li> <!-- li:last-child | li:nth-child(odd) -->
   </ul>

   <div>Primer div</div> <!-- div div:first-of-type -->

   <p>primer parrafo</p>
   <div>segundo div</div> <!-- div div:last-of-type -->
   <p>segundo parrafo</p> <!-- p:nth-of-type(2) -->
</div>

Pseudo-Elementos

Los pseudoelementos son elementos que no existen en el lenguaje de marcado html, pero se crean a través de selectores css y son ::después y ::antes.
La única diferencia entre ambos es que con "después" el contenido creado con el lenguaje CSS se posicionará después del elemento en cuestión, mientras que con "antes", antes.

Intente insertar este código dentro de su hoja de estilo CSS.

h1::before {
   content: ‘primero’;
}

h1::after {
   content : ‘despues’;
}

Como puedes ver, la palabra "antes" a la izquierda y "después" a la derecha se han agregado a los lados de su título.

A través de la propiedad de contenido puedes, por lo tanto, especificar el contenido del pseudo-elemento, veamos cuáles son los posibles valores para insertar:

• texto - Puedes añadir cualquier tipo de texto como valor de contenido y aparecerá antes o después del elemento.
• imagen - Puedes añadir como valor la url de una imagen (contenido: url (ruta/a/imagen.jpg)), esta se insertará con las dimensiones exactas de la imagen y no será posible redimensionarla, por este motivo no es muy usado.
• nada - (content : “”) Podemos insertar contenido vacío si queremos crear un elemento gráfico o un elemento con un tamaño predeterminado y una imagen de fondo.

Pero las pseudoclases y los pseudoelementos no son las únicas cosas que pueden agregar movimiento a tu sitio web. ¿Tienes curiosidad por saber qué más puede ayudarte en este sentido? ¡Veámoslo juntos en la próxima guía!