Pseudoelementos de CSS

¿Qué es un pseudo-elemento?

Los pseudo-elements de CSS se utilizan para establecer los estilos de partes específicas del elemento.

Por ejemplo, se puede usar para:

  • Establecer los estilos de la primera letra y la primera línea del elemento
  • Insertar contenido antes o después del contenido del elemento

Sintaxis

Sintaxis de los pseudo-elements:

selector::pseudo-element {
  property: value;
}

Pseudo-elemento ::first-line

::first-line El pseudo-elemento se utiliza para agregar estilos especiales a la primera línea del texto.

El siguiente ejemplo agrega estilos a la primera línea de todos los elementos <p>:

Ejemplo

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

Pruebe usted mismo

Nota:::first-line El pseudo-elemento solo se puede aplicar a elementos de bloque.

Los siguientes atributos se aplican a ::first-line Pseudo-elemento:

  • Atributo de fuente
  • Atributo de color
  • Atributo de fondo
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

Por favor, tenga en cuentaNotación de dos guiones - ::first-line Contraste :first-line

En CSS3, el doble guion reemplaza la notación de un solo guion de los pseudo-elements. Esto es lo que intenta W3C para distinguirPseudo-claseYPseudo-elementoIntento.

En CSS2 y CSS1, los pseudo-classes y los pseudo-elements utilizan la sintaxis de un solo guion.

Para la compatibilidad hacia atrás, los pseudo-elementos de CSS2 y CSS1 pueden aceptar la sintaxis de un solo guion.

Pseudo-elemento ::first-letter

::first-letter El pseudo-elemento se utiliza para agregar estilos especiales a la primera letra del texto.

El siguiente ejemplo establece el formato de la primera letra del texto de todos los elementos <p>:

Ejemplo

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

Pruebe usted mismo

Nota:::first-letter El pseudo-elemento solo se aplica a los elementos de bloque.

Los siguientes atributos se aplican al pseudo-elemento ::first-letter:

  • Atributo de fuente
  • Atributo de color
  • Atributo de fondo
  • Atributo de margen externo
  • Atributo de margen interno
  • Atributo de borde
  • text-decoration
  • vertical-align (sólo cuando "float" es "none")
  • text-transform
  • line-height
  • float
  • clear

Elementos pseudo y clases CSS

Los elementos pseudo se pueden usar con clases CSS:

Ejemplo

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

Pruebe usted mismo

El ejemplo anterior mostrará la primera letra de los párrafos con class="intro" en rojo y en un tamaño de fuente grande.

Múltiples pseudo-elementos

También se pueden combinar varios pseudo-elementos.

En el siguiente ejemplo, la primera letra del párrafo será roja y el tamaño de la fuente será xx-large. El resto de la primera línea se convertirá en azul y se usará la fuente en minúsculas. El resto del párrafo será de tamaño de fuente y color predeterminados:

Ejemplo

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

Pruebe usted mismo

CSS - ::before pseudo-elemento

::before Los elementos pseudo se pueden usar para insertar contenido antes del contenido del elemento.

El siguiente ejemplo inserta una imagen antes del contenido de cada elemento <h1>:

Ejemplo

h1::before {
  content: url(smiley.gif);
}

Pruebe usted mismo

CSS - ::after pseudo-elemento

::after Los elementos pseudo se pueden usar para insertar contenido después del contenido del elemento.

El siguiente ejemplo inserta una imagen después del contenido de cada elemento <h1>:

Ejemplo

h1::after {
  content: url(smiley.gif);
}

Pruebe usted mismo

CSS - ::selection pseudo-elemento

::selection los elementos pseudo-CSS que coinciden con la parte seleccionada del usuario.

Las siguientes propiedades CSS se pueden aplicar a ::selection:

  • color
  • background
  • cursor
  • outline

El siguiente ejemplo muestra el texto seleccionado en rojo sobre un fondo amarillo:

Ejemplo

::selection {
  color: red; 
  background: yellow;
}

Pruebe usted mismo

Todos los elementos pseudo-CSS

Selector Ejemplo Descripción del ejemplo
::after p::after Inserte contenido después de cada elemento <p>.
::before p::before Inserte contenido antes de cada elemento <p>.
::first-letter p::first-letter Elija la primera letra de cada elemento <p>.
::first-line p::first-line Elija la primera línea de cada elemento <p>.
::selection p::selection Seleccione la parte del elemento seleccionado por el usuario.

Todos los pseudoclases CSS

Selector Ejemplo Descripción del ejemplo
:active a:active Seleccione los enlaces que estén activos.
:checked input:checked Seleccione cada elemento <input> que esté seleccionado.
:disabled input:disabled Seleccione cada elemento <input> que esté desactivado.
:empty p:empty Seleccione cada elemento <p> que no tenga hijos.
:enabled input:enabled Seleccione cada elemento <input> que esté activo.
:first-child p:first-child Seleccione cada elemento <p> que sea el primer hijo de su padre.
:first-of-type p:first-of-type Seleccione cada elemento <p> que sea el primer elemento de su padre.
:focus input:focus Seleccione los elementos <input> que tienen el foco.
:hover a:hover Seleccione los enlaces sobre los que se pasa el ratón.
:in-range input:in-range Seleccione los elementos <input> con valores dentro de un rango especificado.
:invalid input:invalid Seleccione todos los elementos <input> con valores inválidos.
:lang(language) p:lang(it) Seleccione cada elemento <p> con el valor de atributo lang que comience con "it".
:last-child p:last-child Seleccione cada elemento <p> que sea el último hijo de su padre.
:last-of-type p:last-of-type Seleccione cada elemento <p> que sea el último elemento de su padre.
:link a:link Seleccione todos los enlaces no visitados.
:not(selector) :not(p) Seleccione cada elemento que no sea <p>.
:nth-child(n) p:nth-child(2) Seleccione cada elemento <p> que sea el segundo hijo de su padre.
:nth-last-child(n) p:nth-last-child(2) Seleccione cada elemento <p> que sea el segundo hijo del padre, contando desde el último hijo.
:nth-last-of-type(n) p:nth-last-of-type(2) Seleccionar cada <p> que es el segundo hijo <p> del padre, contando desde el último hijo
:nth-of-type(n) p:nth-of-type(2) Seleccionar cada <p> que es el segundo elemento <p> de su padre.
:only-of-type p:only-of-type Seleccionar cada <p> que es el único elemento de tipo <p> de su padre.
:only-child p:only-child Seleccionar el elemento <p> que es el único hijo de su padre.
:optional input:optional Seleccionar los elementos <input> sin la propiedad "required".
:out-of-range input:out-of-range Seleccionar los elementos <input> con un valor fuera del rango especificado.
:read-only input:read-only Seleccionar los elementos <input> que especifican la propiedad "readonly".
:read-write input:read-write Seleccionar los elementos <input> sin la propiedad "readonly".
:required input:required Seleccionar los elementos <input> que especifican la propiedad "required".
:root root Seleccionar el elemento raíz del elemento.
:target #news:target Seleccionar el elemento #news activo (hacer clic en la URL que contiene el nombre del ancla).
:valid input:valid Seleccionar todos los elementos <input> con un valor válido.
:visited a:visited Seleccionar todos los enlaces visitados.