Tanto los pseudoelementos como las pseudoclases se definen agregando una palabra clave específica después del selector, siguiendo reglas de sintaxis similares y estableciendo los estilos correspondientes en bloques de reglas CSS. Los pseudoelementos pueden agregar o reemplazar contenido a través del atributo de contenido. Por ejemplo, :before y :after pueden insertar texto, imágenes u otro contenido generado. Las pseudoclases solo afectan el estilo de un elemento, pero no agregan ni modifican contenido. Cambian el comportamiento de los elementos según la interacción del usuario, la estructura del documento u otras condiciones lógicas. Las principales diferencias son las siguientes:
Objetos objetivo :
Los selectores de pseudoclases (Pseudoclases) actúan sobre elementos reales existentes y se utilizan para describir un estado o relación específica del elemento, como el estado de acceso al enlace ( :visited ), el estado de desplazamiento del mouse ( :hover ), y si es un documento el primer elemento secundario en ( :first-child ), etc. No cambian directamente la estructura del elemento, pero afectan el comportamiento del elemento en condiciones específicas. Los selectores de pseudoelementos se utilizan para crear y seleccionar una parte específica dentro de un elemento o para generar nuevos nodos de contenido virtual antes y después de un elemento. Por ejemplo, :before y :after se pueden usar para insertar contenido adicional, :first-line y :first-letter seleccionan la primera línea de texto y la primera letra del elemento respectivamente, :marker controla el estilo de marca del elemento de la lista, etc. . Estos pseudoelementos no corresponden a elementos reales del documento HTML, pero se les pueden aplicar estilos como si fueran partes reales del documento.
Identificador gramatical :
Las pseudoclases generalmente se identifican con dos puntos : :), como :hover , :focus . Los pseudoelementos se identifican en CSS3 mediante dos dos puntos consecutivos ( :: ) para distinguirlos de las pseudoclases en versiones anteriores de CSS. Aunque la mayoría de los navegadores modernos todavía aceptan dos puntos simples para representar pseudoelementos (como :before ), para cumplir con los estándares del W3C y mantener las mejores prácticas, se recomienda utilizar dos puntos, como ::before , ::after .
Reutilizabilidad :
Las pseudoclases se pueden combinar en el mismo selector, como a:hover:focus para representar un enlace que está al mismo tiempo suspendido y enfocado. Los pseudoelementos generalmente no pueden aparecer repetidamente en el mismo selector porque representan una parte específica del elemento o contenido nuevo generado. Un elemento solo puede tener un pseudoelemento :before o :after vigente al mismo tiempo.
Los pseudoelementos CSS3 son selectores CSS especiales que permiten a los desarrolladores agregar o modificar los estilos de partes específicas de un elemento a través de CSS sin modificar la estructura HTML, o generar y controlar contenido virtual dentro o fuera del elemento. La siguiente es una explicación detallada y ejemplos de aplicación de varios pseudoelementos CSS3 comunes:
1. :before y :after
:before y :after crean cada uno un nuevo "elemento hijo" invisible, sin contenido, después del área de contenido del elemento seleccionado. Luego, al establecer estilos (como contenido, tamaño, color, fondo, etc.) para este pseudoelemento, se vuelve visible y aparece visualmente como la parte que sigue inmediatamente al contenido del elemento original. Estos contenidos están definidos por content y se pueden aplicar estilos adicionales.
gramática :
selector:antes {
contenido: "..." /* u otro valor */;
/* Otras declaraciones de estilo */
}
selector:después {
contenido: "..." /* u otro valor */;
/* Otras declaraciones de estilo */
} Entre ellos, el atributo content es la clave para definir el contenido generado por pseudoelementos. Puede aceptar los siguientes valores:
Cadena : Especifique directamente el texto que se mostrará. Entidades HTML entre comillas : como content: "—"; ; URL : Inserte recursos de imagen, como content: url(image.png); Generar palabras clave de contenido : como content: counter(name); (contador) o content: attr(attribute-name); ;
Ejemplos de aplicación :
1.1. Agregar contenido decorativo
Agrega citas, íconos u otros elementos decorativos.
Agregar comillas:
cita en bloque: antes {
contenido: comillas abiertas;
tamaño de fuente: más grande;
color: #666;
}
cita en bloque: después {
contenido: comillas cerradas;
}Agregue íconos personalizados antes/después de los elementos de la lista:
li: antes {
contenido: url(icon-checkmark.svg);
margen derecho: 0,5 em;
}
li.completado:después {
contenido: "2713"; /* Carácter Unicode: marca de verificación */
color: verde;
tamaño de fuente: 1,5 em;
alineación vertical: súper;
}1.2. Flotador claro
:after se usa a menudo para crear un elemento vacío a nivel de bloque y se usa con clear:both para eliminar el impacto de la flotación en elementos posteriores y evitar el problema del "colapso de altura".
.clearfix:después {
contenido: "";
pantalla: mesa;
claro: ambos;
} Aplique la clase .clearfix a los elementos del contenedor cuyos flotadores internos deben borrarse.
1.3. Reemplazar o ampliar contenido HTML.
Usando la función attr() , puede extraer el valor del atributo del elemento como contenido de :after para lograr una visualización de texto dinámica.
abbr[título]:después {
contenido: " (" atributo (título) ")";
tamaño de fuente: más pequeño;
color: gris;
} En este ejemplo, cuando se pasa el mouse sobre el elemento abbr con el atributo title , se mostrará un pequeño corchete gris que contiene el valor del atributo title .
1.4. Implementar formas y animaciones complejas.
Combinado con content , background , border y otras propiedades, así como transform , transition o animation CSS3, puede usar :after para crear formas complejas y efectos de animación.
.botón:después {
contenido: "";
pantalla: bloque en línea;
ancho: 0;
altura: 0;
borde superior: ⅓em sólido transparente;
borde derecho: ⅓em sólido transparente;
borde inferior: ⅓em sólido #007BFF;
borde izquierdo: ⅓em sólido transparente;
margen izquierdo: 0,½ em;
}
.botón: desplazar el cursor: después {
transformar: traducirY(-0.1em);
transición: transformación 0,2 s de entrada y salida fácil;
} El código anterior crea una flecha desplegable triangular después del elemento .button e implementa una animación suave hacia abajo al pasar el mouse.
Cosas a tener en cuenta
:after debe usarse con el atributo content ; de lo contrario, no tendrá ningún efecto. Dado que :after es un elemento virtual creado, las operaciones DOM no se pueden realizar a través de JavaScript. Aunque el contenido generado por :after puede participar en el diseño, no está incluido en el DOM, no afecta la semántica y no afecta funciones de accesibilidad como la navegación con el teclado.
En resumen, los selectores de pseudoelementos CSS3 enriquecen enormemente la expresividad del diseño web al insertar contenido personalizado tras el contenido del elemento sin cambiar la estructura HTML. El uso competente de pseudoelementos y otras técnicas CSS puede ayudar a los desarrolladores a crear interfaces web más hermosas, receptivas y fáciles de mantener.
2. :first-line y :first-letter
El selector de pseudoelemento :first-line se utiliza para aplicar estilo a la primera línea de texto dentro del elemento, mientras que el pseudoelemento :first-letter se utiliza para aplicar estilo a la primera letra dentro del elemento.
gramática :
selector: primera línea {
/* Declaración de estilo */
}
selector:primera letra {
/* Declaración de estilo */
}Ejemplos de aplicación :
Sangría de primera línea:
artículo p: primera línea {
sangría de texto: 2em;
}Capitalización y decoración:
artículo h2: primera letra {
tamaño de fuente: 2em;
flotador: izquierda;
margen derecho: 0,5 em;
altura de línea: 0,8;
color: #8A2BE2;
color de fondo: #F8F8FF;
relleno: 0,⅔em 0,⅓em;
radio del borde: 0,5 em;
}El selector de pseudoclases CSS3 es una herramienta poderosa que permite a los desarrolladores posicionar y aplicar estilos con precisión según el estado de un elemento en lugar de su posición en el árbol del documento o atributos inherentes como clase e ID. Estos selectores utilizan estructuras de sintaxis especiales para describir diferentes estados condicionales de elementos, como la interacción del usuario, las relaciones posicionales, las características del contenido, etc., logrando así un diseño web dinámico y responsivo. A continuación se muestra una explicación detallada de los selectores de pseudoclases CSS3 y ejemplos de sus aplicaciones prácticas.
1. Selector de pseudoclase estático
:link y :visited
:link : Se utiliza para seleccionar hipervínculos (elementos <a> ) que no han sido visitados por el usuario. Normalmente se utiliza para establecer estilos básicos para enlaces no visitados.
a: enlace {
color: azul;
decoración de texto: ninguna;
} :visited : Selecciona enlaces que el usuario ha visitado. Se utiliza para establecer estilos diferenciados para los enlaces visitados.
a: visitado {
color: morado;
} 2. Selectores de pseudoclase de interacción del usuario :hover , :focus , :active
:hover : Coincide con un elemento cuando el puntero del mouse se sitúa sobre él.
botón: flotar {
color de fondo: #f0f0f0;
cursor: puntero;
} :focus : seleccione el elemento que recibe el foco, que se encuentra comúnmente en controles de formulario o elementos enfocables (como <input> , <textarea> , <button> , etc.).
entrada: foco {
contorno: 2px sólido #007BFF;
sombra de cuadro: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
} :active : Se utiliza para indicar que el usuario está activando o presionando un elemento (generalmente con un clic del mouse o presionando en una pantalla táctil).
a: activo {
color: rojo;
peso de fuente: negrita;
} 3. Selectores de pseudoclase estructurados :first-child , :last-child , :only-child , :nth-child(n) , etc.
:first-child : selecciona el elemento que es el primer hijo de su elemento padre.
li:primer hijo {
tipo de estilo de lista: cuadrado;
} :last-child : selecciona el elemento que es el último hijo de su elemento padre.
div > p: último hijo {
margen inferior: 0;
} :only-child : selecciona elementos que no tienen hermanos.
.message: hijo único {
ancho de borde: 2px;
} :nth-child(n) : seleccione el enésimo elemento hijo de su elemento padre, donde n puede ser un número, una palabra clave ( even , odd ) o una fórmula (como 2n+1 ).
li: n-ésimo hijo (2n) {
color de fondo: #f9f9f9;
}4. Selectores de pseudoclases relacionados con el contenido
:empty , :target , :enabled , :disabled , :checked , etc.
:empty : selecciona elementos sin ningún contenido (incluidos elementos secundarios, nodos de texto, etc.).
div.empty:vacío {
pantalla: ninguna;
} :target : seleccione el elemento cuyo identificador de fragmento de URL actual (hash) coincida con el ID del elemento.
#contenido:objetivo {
color de fondo: amarillo claro;
} :enabled y :disabled: seleccione los elementos del formulario en los estados habilitado y deshabilitado respectivamente.
entrada: habilitado {
color de fondo: blanco;
}
entrada: deshabilitado {
opacidad: 0,6;
cursor: no permitido;
} :checked : Se utiliza cuando se selecciona una casilla de verificación ( <input type="checkbox"> ), un botón de opción ( <input type="radio"> ) o un elemento <option> .
entrada[tipo="casilla de verificación"]:marcado + etiqueta {
decoración de texto: línea recta;
}5. Negar selectores de pseudoclases
:not(selector)
:not() : selecciona elementos que no coinciden con el selector especificado entre paréntesis.
/* Excepto todos los párrafos con clase "excluir" */
p:no(.excluir) {
color: verde;
}6. Otros selectores de pseudoclases
:root , :nth-of-type(n) , :nth-last-of-type(n) , :first-of-type , :last-of-type , :only-of-type etc.
:root : selecciona el elemento raíz del documento (normalmente el elemento <html> en los documentos HTML).
:raíz {
--color primario: #3498db;
} :nth-of-type(n) y :nth-last-of-type(n): similar a :nth-child(n) , pero solo para elementos secundarios de un tipo específico entre elementos hermanos.
artículo: enésimo tipo (par) {
color de fondo: #f5f5f5;
} :first-of-type , :last-of-type y :only-of-type: seleccionan respectivamente el primer, último o único elemento hijo de un tipo específico entre los elementos hermanos.
div > p: primero de tipo {
peso de fuente: negrita;
}Al dominar los selectores de pseudoclases CSS3 anteriores y sus escenarios de aplicación, los desarrolladores pueden escribir código CSS más eficiente, expresivo e interactivo para mejorar la experiencia del usuario y los efectos visuales del sitio web. A medida que el estándar CSS continúa evolucionando, más selectores de pseudoclases nuevos pueden unirse a las filas de CSS3 para proporcionar métodos de control más ricos y sofisticados para el desarrollo front-end.
Ya sea una pseudoclase o un pseudoelemento, todos están diseñados para mejorar la funcionalidad de los selectores CSS, lo que permite a los desarrolladores controlar con mayor precisión el estilo y el diseño de los elementos sin cambiar la estructura HTML.
Con esto concluye este artículo sobre las diferencias, explicaciones detalladas y ejemplos de aplicación de pseudoelementos CSS3 y selectores de pseudoclases. Para obtener más información sobre pseudoelementos CSS3 y selectores de pseudoclases, busque artículos anteriores en downcodes.com o continúe navegando. Artículos relacionados a continuación. ¡Espero que apoyes a downcodes.com en el futuro!