Skip to content
CSS
Selectores, propiedades y valores
Mecanismos para añadir CSS a un archivo HTML
Selectores
Pseudoclases y pseudoelementos
Cascada y especificidad
Herencia
Display
Modelo de cajas
Posicionamiento
Medidas
Colores
Z-index y el contexto de apilamiento
Responsive Design
Arquitectura CSS
Flexbox
More
Share
Explore

icon picker
Pseudoclases y pseudoelementos

Existen otros tipos de selectores, además de los selectores básicos y combinadores, capaces de cambiar un estado o añadir algo más al elemento. Estos son denominados pseudoclases y pseudoelementos.

Cuáles son las pseudoclases

Una pseudoclase define el estilo de un estado especial de un elemento.

Sintaxis

selector : pseudoclase {
propiedad: valor;
}

:hover

Representa el estado en el cual el cursor está encima del elemento.
⁠
Ejemplo
⁠
⁠

:active

Representa el estado de un elemento que no ha sido visitado.
⁠
Ejemplo
⁠
⁠

:visited

Representa el estado de un elemento que ya ha sido visitado.
⁠
Ejemplo
⁠
⁠

:not()

Representa el estado en el cual no coinciden los selectores que se indiquen.
⁠
Ejemplo
⁠
⁠

:nth-child()

Representa el estado en el cual coinciden los hijos del elemento según el valor indicado.
Valores de palabras clave:
odd: los elementos hijos en posiciones impares.
even: los elementos hijos en posiciones pares.
Fórmula matemática: An+B donde A y B son números enteros.
⁠
Ejemplo
⁠
⁠

Cuáles son los pseudoselementos

Un pseudoelemento define el estilo de una parte específica de un elemento.

Sintaxis

selector :: pseudo-elemento {
propiedad: valor;
}

::before

Sirve para agregar un contenido antes del elemento. El contenido es agregado mediante la propiedad content de CSS.
⁠
Ejemplo
⁠
⁠

::after

Sirve para agregar un contenido después del elemento. El contenido es agregado mediante la propiedad content de CSS.
⁠
Ejemplo
⁠
⁠

::first-letter

Sirve para añadir estilos a a la primera letra del texto de cualquier elemento.
⁠
Ejemplo
⁠
⁠

Cuáles son las pseudoclases
Sintaxis
:hover
:active
:visited
:not()
:nth-child()
Más pseudoclases
Cuáles son los pseudoselementos
Sintaxis
::before
::after
::first-letter
Más pseudoelementos
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.