Día 65: CSS Pseudo-elements
La ruta del desarrollador web frontend autónomo🤹♂️
Table of contents
- ¿Qué son los pseudo-elementos?
- Sintaxis
- El pseudo-elemento ::first-line
- El pseudo-elemento ::first-letter
- Pseudo-elementos y clases HTML
- Pseudo-elementos múltiples
- CSS: El pseudo-elemento ::before
- CSS: El pseudo-elemento ::after
- CSS: El pseudo-elemento ::marker
- CSS: El pseudo-elemento ::selection
- Todos los pseudo-elementos
- Todas las pseudo-clases
- Resumen
¿Qué son los pseudo-elementos?
Un pseudo-elemento CSS se usa para diseñar partes específicas de un elemento.
Por ejemplo, se puede utilizar para:
Aplicar estilo a la primera letra, o línea, de un elemento.
Insertar contenido antes o después del contenido de un elemento.
Sintaxis
La sintaxis de los pseudo-elementos:
Ejemplo:
selector::pseudo-element {
property: value;
}
El pseudo-elemento ::first-line
El pseudo-elemento ::first-line se usa para agregar un estilo especial a la primera línea de un texto.
El siguiente ejemplo da formato a la primera línea del texto en todos los elementos <p>:
Ejemplo:
Nota: El pseudo-elemento
::first-linesolo se puede aplicar a elementos de nivel bloque.
Las siguientes propiedades se aplican al pseudo-elemento ::first-line:
propiedades de fuente
propiedades de color
propiedades de fondo
word-spacingletter-spacingtext-decorationvertical-aligntext-transformline-heightclear
Observe la notación de dos puntos dobles - ::first-line versus :first-line
Los dos puntos dobles reemplazaron la notación de dos puntos para los pseudo-elementos en CSS3. Este fue un intento del W3C para distinguir entre pseudoclases y pseudo-elementos.
La sintaxis de dos puntos se usó tanto para pseudoclases como para pseudo-elementos en CSS2 y CSS1.
Para la compatibilidad con versiones anteriores, la sintaxis de dos puntos es aceptable para los pseudo-elementos CSS2 y CSS1.
El pseudo-elemento ::first-letter
El pseudo-elemento ::first-letter se utiliza para añadir un estilo especial a la primera letra de un texto.
El siguiente ejemplo da formato a la primera letra del texto en todos los elementos <p>:
Ejemplo:
Nota: El pseudo-elemento
::first-lettersolo se puede aplicar a elementos de nivel bloque.
Las siguientes propiedades se aplican al pseudo-elemento ::first-letter:
propiedades de fuente
propiedades de color
propiedades de fondo
propiedades de margen (
margin)propiedades de relleno (
padding)propiedades de borde (
border)text-decorationvertical-align(solo si "float" es "none")text-transformline-heightfloatclear
Pseudo-elementos y clases HTML
Los pseudo-elementos se pueden combinar con clases HTML:
Ejemplo:
El ejemplo anterior, mostrará la primera letra de los párrafos con class="intro", en rojo y en un tamaño más grande.
Pseudo-elementos múltiples
También se pueden combinar varios pseudo-elementos.
En el siguiente ejemplo, la primera letra de un párrafo será roja, en un tamaño de fuente xx-grande. El resto de la primera línea será azul y en minúsculas. El resto del párrafo tendrá el tamaño y color de fuente predeterminados:
Ejemplo:
CSS: El pseudo-elemento ::before
El pseudo-elemento ::before se puede usar para insertar algún contenido antes del contenido de un elemento.
El siguiente ejemplo inserta una imagen antes del contenido de cada elemento <h1>:
Ejemplo:
CSS: El pseudo-elemento ::after
El pseudo-elemento ::after se puede usar para insertar algún contenido después del contenido de un elemento.
El siguiente ejemplo inserta una imagen después del contenido de cada elemento <h1>:
Ejemplo:
CSS: El pseudo-elemento ::marker
El pseudo-elemento ::marker selecciona los marcadores de los elementos de la lista.
El siguiente ejemplo aplica estilo a los marcadores de los elementos de la lista:
Ejemplo:
CSS: El pseudo-elemento ::selection
El pseudo-elemento ::selection coincide con la parte de un elemento que selecciona un usuario.
Las siguientes propiedades CSS se pueden aplicar a ::selection: color, background, cursor, y outline.
El siguiente ejemplo hace que el texto seleccionado sea rojo sobre un fondo amarillo:
Ejemplo:
Todos los pseudo-elementos
| Selector | Ejemplo | Descripción del ejemplo |
::after | p::after | Inserta algo después del contenido de cada elemento p. |
::before | p::before | Inserta algo antes del contenido de cada elemento p. |
::first-letter | p::first-letter | Selecciona la primera letra de cada elemento p. |
::first-line | p::first-line | Selecciona la primera línea de cada elemento p. |
::marker | ::marker | Selecciona los marcadores de los elementos de la lista. |
::selection | p::selection | Selecciona la parte de un elemento que es seleccionado por un usuario. |
Todas las pseudo-clases
| Selector | Ejemplo | Descripción del ejemplo |
:active | a:active | Selecciona el enlace activo. |
:checked | input:checked | Selecciona cada elemento input marcado. |
:disabled | input:disabled | Selecciona cada elemento input deshabilitado. |
:empty | p:empty | Selecciona todos los elementos p que no tienen hijos. |
:enabled | input:enabled | Selecciona cada elemento input habilitado. |
:first-child | p:first-child | Selecciona todos los elementos p que son el primer hijo de su padre. |
:first-of-type | p:first-of-type | Selecciona cada elemento p que sea el primer elemento p de su padre. |
:focus | input:focus | Selecciona el elemento input que tiene el foco. |
:hover | a:hover | Selecciona enlaces al pasar el ratón por encima. |
:in-range | input:in-range | Selecciona elementos input con un valor dentro de un rango especificado. |
:invalid | input:invalid | Selecciona todos los elementos input con un valor no válido |
:lang(language) | p:lang(it) | Selecciona cada elemento p con un valor de atributo lang que comienza con "it”. |
:last-child | p:last-child | Selecciona cada elemento p que es el último hijo de su padre. |
:last-of-type | p:last-of-type | Selecciona cada elemento p que es el último elemento p de su padre. |
:link | a:link | Selecciona todos los enlaces no visitados. |
:not(selector) | :not(p) | Selecciona cada elemento que no es un elemento p. |
:nth-child(n) | p:nth-child(2) | Selecciona cada elemento p que es el segundo hijo de su padre. |
:nth-last-child(n) | p:nth-last-child(2) | Selecciona cada elemento p que es el segundo hijo de su padre, contando desde el último hijo. |
:nth-last-of-type(n) | p:nth-last-of-type(2) | Selecciona cada elemento p que es el segundo elemento p de su padre, contando desde el último hijo. |
:nth-of-type(n) | p:nth-of-type(2) | Selecciona cada elemento p que es el segundo elemento p de su padre. |
:only-of-type | p:only-of-type | Selecciona cada elemento p que es el único elemento p de su padre. |
:only-child | p:only-child | Selecciona cada elemento p que es el único hijo de su padre. |
:optional | input:optional | Selecciona elementos input sin atributo "requerido”. |
:out-of-range | input:out-of-range | Selecciona elementos input con un valor fuera de un rango especificado. |
:read-only | input:read-only | Selecciona elementos input con un atributo de "solo lectura" especificado |
:read-write | input:read-write | Selecciona elementos input sin atributo de "solo lectura". |
:required | input:required | Selecciona elementos input con un atributo "requerido" especificado. |
:root | root | Selecciona el elemento raíz del documento. |
:target | #news:target | Selecciona el elemento #news activo actual (haciendo clic en una URL que contiene ese nombre de anclaje). |
:valid | input:valid | Selecciona todos los elementos input con un valor válido. |
:visited | a:visited | Selecciona todos los enlaces visitados. |
Resumen
El tutorial de CSS cubre los pseudo-elementos, que se utilizan para diseñar partes específicas de un elemento. Los pseudo-elementos incluyen ::first-line, ::first-letter, ::before, ::after, ::marker y ::selection. También se pueden combinar con clases HTML y propiedades CSS. El tutorial proporciona ejemplos y una lista de todas las pseudo-clases y pseudo-elementos.
Traducido con 💚 desde W3Schools.com