CSS se trata del estilo de páginas web, sitios web, documentos HTML, etc. Por lo tanto, ofrece muchas herramientas de estilo como selectores, propiedades CSS, etc. Los selectores son el componente inicial de las reglas CSS, las reglas que se dirigen a algunos elementos HTML y lo diseñan de acuerdo con algunas propiedades específicas de CSS.

En CSS, los selectores se clasifican en cinco categorías I.mi. Selectores básicos, selectores combinatorios, selectores de pseudo-clase y selectores de atributos. La categoría básica consta de un selector de elementos, selector de clases, selector de identificación, selector universal y selector de agrupación. Puede obtener más información sobre los selectores básicos en nuestro tutorial CSS Selectors.

Este artículo explicará las siguientes terminologías:

• ¿Qué es un selector de agrupación en CSS??
• Sintaxis básica del selector de agrupación.
• Cómo agrupar múltiples elementos HTML utilizando un selector de agrupación.

Comencemos con la comprensión básica del selector de agrupación:

¿Qué es un selector de agrupación en CSS?

El selector de agrupación se dirige a los múltiples elementos HTML y los estiliza simultáneamente. Concisa el código y reduce el esfuerzo adicional. Al seleccionar/agrupar más de un elemento HTML, tenemos que separar cada elemento HTML con una coma.

Sintaxis

Echemos un vistazo al siguiente fragmento para comprender la sintaxis del selector de agrupación:

En la figura anterior, P, H2, H3 y pie de página se agrupan elementos HTML para diseñarse.

Vamos a mover un paso más para comprender el concepto de agrupación del selector con la ayuda de un ejemplo:

Cómo agrupar múltiples elementos HTML utilizando un selector de agrupación

Echemos un vistazo al ejemplo a continuación para comprender cómo implementar un estilo único en un grupo de diferentes elementos HTML:

Ejemplo Este ejemplo tiene diferentes elementos HTML I.mi.

,

, y

. Tenemos que diseñar todos estos elementos en el estilo de fuente cursiva, con el color de fondo azul real.

Html

Linuxhint.comunicarse

Hola! Bienvenido a Linuxhint.comunicarse

Selector de agrupación

Este es un ejemplo de selector de agrupación

CSS

H1, H2, P
Color de fondo: RoyalBlue;
estilo de fuente: cursiva;

El código dado anteriormente agrupó tres elementos, implementa el mismo estilo en todos los elementos y, como resultado, obtendremos el siguiente resultado:

Verifica que todos los elementos implementan el mismo estilo y el selector de agrupación funcione correctamente.

Conclusión

Para implementar un selector de agrupación, todo lo que tiene que hacer es simplemente escribir todos los nombres del elemento que desea peinar y agregar una coma entre cada elemento. De esta manera, el estilo especificado se implementará en cada elemento dirigido simultáneamente. Este artículo cubre todos los aspectos de los selectores de agrupación, comenzando desde lo que es el selector de grupos y cómo usarlo.