Pseudo-clases en CSS
Las pseudo-clases son selectores que te permiten seleccionar elementos basados en su estado o posición en el documento. Estas se aplican a elementos en situaciones específicas, como cuando un enlace está siendo visitado, un elemento está siendo señalado con el mouse, o un formulario está en un estado particular.
| Pseudo-clase | Funcionalidad |
|---|---|
| :hover | Aplica estilos cuando el cursor del mouse se encuentra sobre el elemento. |
| :active | Aplica estilos cuando el elemento está activo, por ejemplo, cuando se hace clic en un enlace o se presiona un botón. |
| :focus | Aplica estilos cuando el elemento ha recibido el foco, como un campo de entrada de texto que se ha seleccionado. |
| :visited | Selecciona enlaces que ya han sido visitados por el usuario. |
| :first-child | Selecciona el primer hijo de un elemento. |
| :last-child | Selecciona el último hijo de un elemento. |
| :nth-child() | Selecciona un elemento basado en su posición dentro de un contenedor. |
| :nth-of-type() | Selecciona un elemento basado en su posición dentro de un contenedor, teniendo en cuenta solo elementos del mismo tipo. |
| :nth-last-child() | Selecciona un elemento basado en su posición desde el final del contenedor. |
| :nth-last-of-type() | Selecciona un elemento basado en su posición desde el final del contenedor, teniendo en cuenta solo elementos del mismo tipo. |
| :not() | Selecciona elementos que no coinciden con un selector especificado. |
| :checked | Selecciona elementos de entrada de tipo "checkbox" o "radio" que están marcados. |
| :disabled | Selecciona elementos de entrada que están deshabilitados. |
| :enabled | Selecciona elementos de entrada que están habilitados. |
Ejemplos
a:hover {
color: #ff0000; /* Cambia el color del texto cuando el mouse está sobre un enlace */
}
li:nth-child(odd) {
background-color: #f2f2f2; /* Aplica un fondo gris a los elementos de lista impares */
}
input:focus {
border: 4px solid #007bff; /* Añade un borde azul cuando un campo de entrada está enfocado */
}
Pseudo-elementos
Los pseudo-elementos permiten seleccionar y estilizar partes específicas de un elemento, como el primer párrafo, la primera letra, o incluso generar contenido antes o después del contenido real de un elemento..
| Pseudo-elemento | Funcionalidad |
|---|---|
| ::first-line | Selecciona la primera línea de un elemento, como un párrafo o un encabezado. |
| ::first-letter | Selecciona la primera letra de un elemento. |
| ::before | Inserta contenido antes del contenido real de un elemento. |
| ::after | Inserta contenido después del contenido real de un elemento. |
| ::selection | Selecciona el texto que ha sido seleccionado por el usuario. |
| ::placeholder | Estiliza el texto de marcador de posición en un campo de entrada. |
| ::marker | Estiliza el marcador de lista de elementos de lista, como <li>. |
| ::backdrop | Estiliza el fondo detrás de un elemento que está utilizando la propiedad backdrop-filter. Esto se usa para crear efectos de desenfoque y otros efectos. |
Ejemplos
p::first-line {
font-weight: bold; /* Hace que la primera línea de cada párrafo sea bold */
}
p::before {
content: "🔥 "; /* Añade un emoji de fuego antes de cada párrafo */
}
p::after {
content: " 🔥"; /* Añade un emoji de fuego después de cada párrafo */
}
