Pseudoclases y Pseudoelementos en CSS

Es muy común trabajar en CSS con pseudoelementos y pseudoclases sin saber qué son exactamente o en qué se diferencian entre sí. Los diseños avanzados se alcanzan por conocer la aplicación de estás técnicas.

Daré un resumen y luego dedicaré una publicación a cada uno de ellos, veamos el resumen y aprendamos a aplicar.

Pseudoelemento

Los pseudoelementos nos permiten diseñar elementos que no tenemos directamente presentes, redactados o físicos en el documento HTML. Esa es la capacidad de un pseudoelemento.

Estos no tienen un estado directamente definido, solo permiten añadir estilo a una parte específica.

1. ::after: Nos permite añadir un elemento al final de lo que se ha seleccionado.
2. ::before: Nos permite añadir un elemento al principio de lo que se ha seleccionado.
3. ::first-letter: Con este pseudoelemento podemos seleccionar la primera letra de un párrafo y aplicarle un estilo.
4. ::first-line: Mediante este pseudoelemento podemos aplicar estilo a la primera línea de un párrafo.
5. ::placeholder: Placeholder representa el texto provisional de una caja de texto (eso es lo que podemos alterar mediante este pseudoelemento).

Ejemplo usando el psudoelemento ::after.

a::after {
    content: "[.....]";
}

Ejemplo usando el pseudoelemento ::first-letter.

p::first-letter {
    font-size: 32px;
}

Pseudoclase

Las pseudoclases nos permiten añadir estilos en función a la información que tengamos, por ejemplo el estado. En otras palabras podemos aplicar estilos para los estados conocidos de los elementos HTML.

Un elemento puede estar activo, enfocado, obligatorio, visitado, etc.

1. :active: Este reacciona cuando el usuario está activando un botón o elemento tipo enlace.
2. :first-child: Con esta pseudoclase podemos afectar o aplicar estilo a primer elemento de un grupo de elementos como primer párrafo, primer elemento de una lista, etc.
3. :focus: Significa que un elemento ha recibido el foco.
4. :hover: Este se activa cuando hay interacción, por ejemplo al pasar el mouse por encima del elemento.

Ejemplo usando la pseudoclase :active.

a:active {
   color: black;
}

Ejemplo usando la pseudoclase :first-child.

p:first-child {
    color: blue;
}

Alcance universal

Si trabajamos con pseudoclases y pseudoelementos sin algún selector común estamos hablando de una aplicación universal.

Ejemplo de alcance universal o global con un pseudoelemento.

::placeholder {
    color: blue;
}

El siguiente bloque de estilo sería una aplicación universal de una pseudoclase porque no se ha definido el selector.

:focus {
    background-color: red;
}

Esto es algo que debes evitar para tener mayor control de tú creación. Accede directamente a aquello que quieres afectar, evita al máximo los alcances globales.

Algunos ejemplos de alcances universales.

1. *.
2. :focus.
3. ::placeholder.
4. input.
5. [type=text].
6. *[type=text].

Tenemos más pseudoelementos y pseudoclases pero los trataremos en otras publicaciones por separado.