¿Cuáles son los pseudo-elementos?
Un pseudo-elemento CSS se utiliza para estilo especificado partes de un elemento.
Por ejemplo, se puede utilizar para:
- Estilo de la primera letra o línea, de un elemento
- Insertar contenido antes de, o después de, el contenido de un elemento
Sintaxis
La sintaxis de los pseudo-elementos:
selector::pseudo-element {
property:value;
} | Note el doble notación de colon - ::first-line frente :first-line Los dos puntos dobles sustituye la notación de una sola de colon para los pseudo-elementos en CSS3. Este fue un intento de W3C para distinguir entre las pseudo-clases y pseudo-elementos. La sintaxis de una sola de colon se utilizó tanto para los pseudo-clases y pseudo-elementos en CSS2 y CSS1. Por compatibilidad con versiones anteriores, la sintaxis de un solo colon es aceptable para CSS2 y CSS1 pseudo-elementos. |
|---|
La ::first-line pseudo-elemento
La ::first-line pseudo-elemento se utiliza para añadir un estilo especial a la primera línea de un texto.
El siguiente ejemplo se da formato a la primera línea del texto en todos los <p> elementos:
Nota: La ::first-line pseudo-elemento sólo se puede aplicar a elementos de nivel bloque.
Las siguientes propiedades se aplican a la ::first-line pseudo-elemento:
- font
- color
- background
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
La ::first-letter pseudo-elemento
La ::first-letter pseudo-elemento se utiliza para añadir un estilo especial a la primera letra de un texto.
El siguiente ejemplo se da formato a la primera letra del texto en todos los <p> elementos:
Nota: El ::first-letter pseudo-elemento sólo se puede aplicar a elementos de nivel bloque.
Las siguientes propiedades se aplican a la ::first-letter pseudo- elemento:
- font propiedades
- color propiedades
- background propiedades
- margin propiedades
- padding propiedades
- border propiedades
- text-decoration
- vertical-align (sólo si "float" es "none" )
- text-transform
- line-height
- float
- clear
Los pseudo-elementos y clases CSS
Pseudo-elementos se pueden combinar con clases CSS:
El ejemplo anterior mostrará la primera letra de los párrafos con class="intro" , en rojo y en un tamaño más grande.
Múltiples pseudo-elementos
Varios pseudo-elementos también se pueden combinar.
En el siguiente ejemplo, la primera letra de un párrafo será de color rojo, en un tamaño de fuente xx-large. El resto de la primera línea será de color azul, y en small-caps. El resto del párrafo será el tamaño de fuente predeterminado y color:
Ejemplo
p::first-letter
{
color: #ff0000;
font-size: xx-large;
}
p::first-line
{
color: #0000ff;
font-variant: small-caps;
} Inténtalo tú mismo " CSS - La ::before pseudo-elemento
El ::before pseudo-elemento se puede utilizar para insertar un cierto contenido antes de que el contenido de un elemento.
En el siguiente ejemplo se inserta una imagen antes de que el contenido de cada <h1> elemento:
CSS - La ::after pseudo-elemento
El ::after pseudo-elemento se puede utilizar para insertar algún contenido después de que el contenido de un elemento.
En el siguiente ejemplo se inserta una imagen después de que el contenido de cada <h1> elemento:
CSS - La ::selection pseudo-elemento
El ::selection pseudo-elemento coincide con la porción de un elemento que es seleccionado por un usuario.
Las siguientes propiedades CSS se pueden aplicar a ::selection : color , background , cursor y outline .
El siguiente ejemplo hace que el texto seleccionado rojo sobre un fondo amarillo:
Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 »
Todos los elementos Pseudo CSS
| Selector | Ejemplo | Descripción ejemplo |
|---|---|---|
| ::after | p::after | Insertar algo después de que el contenido de cada elemento <p> |
| ::before | p::before | Insertar algo antes de que el contenido de cada <p> elemento |
| ::first-letter | p::first-letter | Selecciona la primera letra de cada <p> elemento |
| ::first-line | p::first-line | Selecciona la primera línea de cada <p> elemento |
| ::selection | p::selection | Selecciona la parte de un elemento que es seleccionado por un usuario |
Todas las clases CSS Pseudo
| Selector | Ejemplo | Descripción ejemplo |
|---|---|---|
| :active | a:active | Se selecciona el vínculo activo |
| :checked | input:checked | Selecciona cada comprobado <input> elemento |
| :disabled | input:disabled | Selecciona todas las personas con discapacidad <input> elemento |
| :empty | p:empty | Selecciona todos los <p> elemento que no tiene hijos |
| :enabled | input:enabled | Selecciona cada habilitado <input> elemento |
| :first-child | p:first-child | Selecciona cada <p> elementos que es el primer hijo de su padre |
| :first-of-type | p:first-of-type | Selecciona todos los <p> elemento que es el primer <p> elemento de su padre |
| :focus | input:focus | Selecciona el <input> elemento que tiene el foco |
| :hover | a:hover | Selecciona el ratón por encima enlaces |
| :in-range | input:in-range | Selecciona <input> elementos con un valor dentro de un rango especificado |
| :invalid | input:invalid | Selecciona todos los <input> elementos con un valor no válido |
| :lang(language) | p:lang(it) | Selecciona todos los <p> elemento con un valor de atributo lang comenzando con "it" |
| :last-child | p:last-child | Selecciona cada <p> elementos que es el último hijo de su padre |
| :last-of-type | p:last-of-type | Selecciona todos los <p> elemento que es el último <p> elemento de su padre |
| :link | a:link | Selecciona todos los enlaces no visitados |
| :not(selector) | :not(p) | Selecciona cada elemento que no es un <p> elemento |
| :nth-child(n) | p:nth-child(2) | Selecciona todos los <p> elemento que es el segundo hijo de su padre |
| :nth-last-child(n) | p:nth-last-child(2) | Selecciona todos los <p> elemento que es el segundo hijo de su padre, a contar desde el último hijo |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Selecciona todos los <p> elemento que es el segundo <p> elemento de su padre, a contar desde el último hijo |
| :nth-of-type(n) | p:nth-of-type(2) | Selecciona todos los <p> elemento que es el segundo <p> elemento de su padre |
| :only-of-type | p:only-of-type | Selecciona todos los <p> elemento que es la única <p> elemento de su padre |
| :only-child | p:only-child | Selecciona todos los <p> elemento que es el único hijo de su padre |
| :optional | input:optional | Selecciona <input> elementos que no tienen "required" atributo |
| :out-of-range | input:out-of-range | Selecciona <input> elementos con un valor fuera de un rango especificado |
| :read-only | input:read-only | Selecciona <input> elementos con un "readonly" atributo especifica |
| :read-write | input:read-write | Selecciona <input> elementos que no tienen "readonly" atributo |
| :required | input:required | Selecciona <input> elementos con una "required" atributo especificado |
| :root | root | Selecciona elemento raíz del documento |
| :target | #news:target | Selecciona el activo actual #news elemento (hecho clic en un enlace que contiene ese nombre de ancla) |
| :valid | input:valid | Selecciona todos los <input> elementos con un valor válido |
| :visited | a:visited | Selecciona todos los enlaces visitados |