Los últimos tutoriales de desarrollo web
×

CSS Tutorial

CSS CASA CSS Introducción CSS Sintaxis CSS Cómo CSS Colores CSS Antecedentes CSS Fronteras CSS márgenes CSS Relleno CSS Anchura altura CSS Texto CSS Fuentes CSS Campo de golf CSS lista CSS mesa CSS Modelo de cuadro esquema CSS CSS visualización CSS Anchura máxima Posición CSS CSS Flotador CSS Inline-block CSS Alinear CSS combinadores CSS Pseudo-clase CSS Pseudo-elemento CSS Barra de navegación CSS Menús desplegables CSS La información sobre herramientas CSS galería de imágenes CSS Opacidad imagen CSS Sprites de imagen CSS Attr selectores Formas CSS CSS contadores

CSS3

CSS3 Introducción CSS3 Esquinas redondeadas CSS3 Imágenes de frontera CSS3 Antecedentes CSS3 Colores CSS3 gradientes CSS3 Oscuridad CSS3 Texto CSS3 Fuentes CSS3 Transformaciones 2D CSS3 Transformaciones 3D CSS3 transiciones CSS3 animaciones CSS3 imágenes CSS3 Botones CSS3 Paginación CSS3 varias columnas CSS3 Interfaz de usuario CSS3 caja de medición CSS3 Flexbox CSS3 consultas de medios CSS3 Ejemplos MQ

CSS Diseño web adaptable

Diseño web adaptable Introducción Diseño web adaptable ventana Diseño web adaptable Vista en cuadrícula Diseño web adaptable consultas de medios Diseño web adaptable imágenes Diseño web adaptable vídeos Diseño web adaptable marcos

CSS Examples

CSS Ejemplos CSS Examen CSS Certificado

CSS References

CSS Referencia CSS selectores CSS funciones CSS referencia Aural CSS Web Safe Fuentes CSS animatable CSS Unidades CSS PX-EM Convertidor CSS Colores CSS Los valores de color CSS Los nombres de color CSS3 Soporte para el navegador

 

CSS Pseudo-elementos


¿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;
}
Nota 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:

Ejemplo

p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}
Inténtalo tú mismo "

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:

Ejemplo

p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}
Inténtalo tú mismo "

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:

Ejemplo

p.intro::first-letter {
    color: #ff0000;
    font-size:200%;
}
Inténtalo tú mismo "

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:

Ejemplo

h1::before {
    content: url(smiley.gif);
}
Inténtalo tú mismo "

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:

Ejemplo

h1::after {
    content: url(smiley.gif);
}
Inténtalo tú mismo "

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:

Ejemplo

::selection {
    color: red;
    background: yellow;
}
Inténtalo tú mismo "

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