Pseudo clases y pseudo elementos css

css pseudoclase click

Puede utilizar los selectores CSS para orientar y dar estilo a los elementos de una página web. Un selector estándar puede dirigirse a un párrafo específico o a todos los encabezados de un determinado nivel. Los pseudo selectores van un paso más allá, permitiéndote orientar partes de la página con más matices.

Las pseudoclases se dirigen a diferentes estados de un elemento: cuando el puntero pasa por encima de un enlace, por ejemplo. Los pseudo-elementos permiten seleccionar una parte específica de un elemento, como la primera línea de un párrafo.

Observe que hay varios párrafos dentro de la misma sección. Para estilizarlos individualmente, podrías dar una clase distinta a cada uno y utilizar un selector de clase CSS. Pero esto no es muy práctico, especialmente si el contenido puede cambiar con frecuencia. En su lugar, puedes utilizar pseudoclases que no existen en el HTML, pero que te permiten orientar y estilizar los elementos. Veamos cómo funciona:

body { font-size: 1em;}header { font-size: 3em;} /* Seleccionar el primer párrafo */p:first-child { font-size: 1.3em;} /* Seleccionar el último párrafo */p:last-child { color: rojo; text-decoration: underline;} /* Seleccionar el enésimo párrafo */p:nth-child(3) { color: azul; font-style: italic;}p:nth-child(4) { color: #666; font-size: 1.9em;}p:nth-child(5) { color: amarillo-verde; font-weight: bold;}

pseudoelementos css

Las pseudoclases se utilizan para seleccionar elementos en función de la información que no se puede expresar de otro modo mediante atributos, ID o clases (o cualquier otra información disponible a través del DOM). Por ejemplo, :root, :first-child, :last-child, :lang() y :not().

Los pseudoelementos son elementos ficticios a los que se pueden aplicar estilos de forma selectiva como parte de otros elementos reales, pero que no son miembros del DOM. Por ejemplo, fragmentos de contenido como ::first-line y ::first-letter, o contenido generado como ::before y ::after.

“Pseudo-selectores” es un término paraguas utilizado para cubrir ambos tipos de selectores (o realmente cualquier selector que comience con al menos un :), pero no tiene sentido en sí mismo, porque en Selectores, las pseudo-clases y los pseudo-elementos son dos cosas fundamentalmente diferentes.

css pseudo elemento hover

Las pseudoclases están permitidas en todas las secuencias de selectores simples contenidas en un selector. Las pseudoclases están permitidas en cualquier parte de las secuencias de selectores simples, después del selector de tipo principal o del selector universal (posiblemente omitido). Los nombres de las pseudoclases no distinguen entre mayúsculas y minúsculas. Algunas pseudoclases son mutuamente excluyentes, mientras que otras pueden aplicarse simultáneamente al mismo elemento. Las pseudoclases pueden ser dinámicas, en el sentido de que un elemento puede adquirir o perder una pseudoclase mientras el usuario interactúa con el documento.

La naturaleza importante de las pseudoclases se indica en la primera frase: “el concepto de pseudoclase permite la selección”. Permite al autor de una hoja de estilo diferenciar entre elementos basándose en información que “se encuentra fuera del árbol del documento”, por ejemplo el estado actual de un enlace (:activo,:visitado). Estos no se guardan en ninguna parte del DOM, y no existe ninguna interfaz del DOM para acceder a estas opciones.

Así que básicamente una pseudoclase refinará el conjunto de elementos seleccionados como cualquier otro selector simple en una secuencia de selectores simples. Tenga en cuenta que todos los selectores simples de una secuencia de selectores simples se evaluarán al mismo tiempo. Para una lista completa de pseudoclases, consulte la recomendación de selectores de CSS3.

pseudo clase css después

Fíjese en la notación de dos puntos dobles – ::first-line frente a :first-lineLos dos puntos dobles han sustituido a la notación de dos puntos simples para los pseudoelementos en CSS3. La sintaxis de un solo punto se utilizaba tanto para las pseudoclases como para los pseudoelementos en CSS2 y CSS1. Por compatibilidad con versiones anteriores, la sintaxis de un solo punto es aceptable para los pseudoelementos de CSS2 y CSS1.

En el siguiente ejemplo, la primera letra de un párrafo será de color rojo, con un tamaño de letra xx-large. El resto de la primera línea será azul, y en minúsculas. El resto del párrafo tendrá el tamaño y el color de fuente por defecto:

W3Schools está optimizado para el aprendizaje y la formación. Los ejemplos pueden ser simplificados para mejorar la lectura y el aprendizaje. Los tutoriales, las referencias y los ejemplos se revisan constantemente para evitar errores, pero no podemos garantizar la total corrección de todo el contenido. Al utilizar W3Schools, usted acepta haber leído y aceptado nuestra