Utilice varias clases en un elemento en CSS

1. Asignar varias clases a un elemento y aplicar estilo a ambas clases a la vez en CSS
2. Asignar varias clases a un elemento y aplicar estilo a ambas clases individualmente en CSS

Este tutorial presentará métodos para usar las múltiples clases en un solo elemento en CSS.

Asignar varias clases a un elemento y aplicar estilo a ambas clases a la vez en CSS

En HTML, usamos el atributo class para asignar la clase a un elemento. Podemos aplicar class en todos los elementos en HTML como p, h1 - h6, a, div, y muchos más. En CSS, usamos el selector de clases . para seleccionar el elemento con el nombre de clase respectivo, y podemos aplicarle estilos. Pero hay casos en los que queremos asignar varios elementos a una sola clase y diseñar las clases. En tales casos, HTML nos permite asignar múltiples clases a un solo elemento. Podemos escribir varios nombres de clases separados por espacios en blanco en cualquier elemento. CSS también nos permite diseñar tales clases seleccionando ambas clases a la vez. Podemos utilizar el . selector para seleccionar la primera clase y nuevamente seleccionar la segunda clase sin dejar espacios en blanco. Luego, podemos establecer los estilos para las clases seleccionadas. Podemos asignar más de dos clases a un solo elemento y aplicar los estilos a todas las clases a la vez.

Por ejemplo, cree tres etiquetas p en HTML y asígneles los nombres de clase primero, segundo y primer segundo. Tenga en cuenta que para la tercera clase, queda un espacio en blanco entre los nombres de las clases. Escriba los textos KTM, Honda y Kawasaki para las tres clases entre las etiquetas p. Seleccione la clase first en CSS y establezca su color en orange. Asimismo, seleccione la clase second y configúrelo en red y finalmente seleccione ambas clases como .first.second y configure el color como green.

En el siguiente ejemplo, hemos utilizado varias clases en un solo elemento y hemos diseñado esas clases a la vez.

Código de ejemplo:

<p class="first">KTM</p>
<p class="second">Honda</p>
<p class="first second">Kawasaki</p>

.first { color: orange; }
.second { color: red; }
.first.second { color: green; }

Asignar varias clases a un elemento y aplicar estilo a ambas clases individualmente en CSS

Podemos asignar múltiples clases a un solo elemento HTML y diseñar ambas clases individualmente para escribir CSS de manera más eficiente. Con este enfoque, podemos controlar la redundancia en los estilos aplicados. Podemos aplicar los estilos comunes a varias clases y aplicar los estilos únicos a la clase específica.

Por ejemplo, cree un title de clase en una etiqueta p y escriba algo de texto. Del mismo modo, cree otra etiqueta de párrafo y asígnele las clases múltiples title text. Escribe algo de texto en la etiqueta del párrafo. En CSS, seleccione la clase title y establezca el background-color en skyblue. Luego seleccione la clase text y déle el color de green.

Aquí, el color de fondo de ambos párrafos se establecerá en skyblue. Es porque hemos diseñado la clase title para establecer el color de fondo. Y hay una clase de title en ambos párrafos. Sin embargo, el segundo párrafo solo cambiará su color a green porque hemos aplicado este estilo solo a la clase text. Este enfoque nos permite usar múltiples clases para un solo elemento para aplicar los estilos comunes y el estilo individual a los elementos. De esta manera, podemos asignar múltiples clases a un solo elemento y podemos diseñar las clases individualmente para escribir CSS eficiente.

Código de ejemplo:

<p class="title">
 Hello there!
</p>
<p class="title text">
 Welcome to Rara Lake
</p> 

.title {
    margin-bottom: 30px;
    background-color: skyblue;
}

.text {
    color: green;
}