Los pseudoelementos, al igual que las pseudoclases, se añaden a los selectores. Sin embargo, estos no definen un estado especial sino que permiten agregarle estilos determinados a una parte concreta del elemento. Se caracterizan por llevar doble dos puntos (::). Su sintaxis es la siguiente
selector::pseudoelemento{
propiedad:valor}
Este es un ejemplo de código. Supongamos que queremos cambiar el color de la primera letra de un parrafo
p::first-letter{
color:red
}
A partir de ahora, la primera letra de todos los parrafos serán rojas.
Esta es la lista de pseudoelementos admitidos en CSS3
| ::after | Crea un pseudoelemento debajo del ultimo hijo del elemento seleccionado. Además permite el uso de la propiedad “content” para darle contenido. Ej: podemos agregar abajo de una lista de parrafos un nuevo parrafo que diga “fin de los parrafos” haciendo esto: p::after{ content: “Fin de los parrafos”} |
|---|---|
| ::before | Lo mismo que ocurre con after pero con el primer hijo del elemento seleccionado |
| ::first-letter | Selecciona a la primera letra del elemento |
| :first-line | Selecciona la primera linea de un texto |
| :last-of-type | Sirve para seleccionar el ultimo elemento seleccionado. Ej: tengo 5 inputs, para seleccionar solo el ultimo puedo utilizar input:last-of-type en lugar de agregarle una clase aparte. |
ATENTI
Hay mas pseudoelementos, los podes encontrar en https://developer.mozilla.org/es/docs/Web/CSS/Pseudo-elements, sin embargo son experimentales y algunos no estan disponibles en todos los navegadores. Se recomienda no utilizarlos en producción