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.
-
::after
: Nos permite añadir un elemento al final de lo que se ha seleccionado. -
::before
: Nos permite añadir un elemento al principio de lo que se ha seleccionado. -
::first-letter
: Con este pseudoelemento podemos seleccionar la primera letra de un párrafo y aplicarle un estilo. -
::first-line
: Mediante este pseudoelemento podemos aplicar estilo a la primera línea de un párrafo. -
::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.
-
:active
: Este reacciona cuando el usuario está activando un botón o elemento tipo enlace. -
: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. -
:focus
: Significa que un elemento ha recibido el foco. -
: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.
-
*
. -
:focus
. -
::placeholder
. -
input
. -
[type=text]
. -
*[type=text]
.
Tenemos más pseudoelementos y pseudoclases pero los trataremos en otras publicaciones por separado.