Use várias classes em um elemento em CSS

1. Atribuir várias classes a um elemento e definir o estilo de ambas as classes ao mesmo tempo em CSS
2. Atribuir várias classes a um elemento e definir o estilo de ambas as classes individualmente em CSS

Este tutorial irá apresentar métodos para usar as várias classes em um único elemento em CSS.

Atribuir várias classes a um elemento e definir o estilo de ambas as classes ao mesmo tempo em CSS

Em HTML, usamos o atributo class para atribuir a classe a um elemento. Podemos aplicar classe em todos os elementos em HTML como p, h1 - h6, a, div e muitos mais. Em CSS, usamos o seletor de classe . para selecionar o elemento com o respectivo nome de classe, e podemos aplicar estilos a ele. Mas há casos em que queremos atribuir vários elementos a uma única classe e estilizar as classes. Nesses casos, o HTML nos permite atribuir várias classes a um único elemento. Podemos escrever vários nomes de classes separados por espaços em branco em qualquer elemento. CSS também nos permite estilizar tais classes selecionando ambas as classes ao mesmo tempo. Podemos usar o . seletor para selecionar a primeira classe e selecionar novamente a segunda classe sem deixar espaço em branco. Em seguida, podemos definir os estilos para as classes selecionadas. Podemos atribuir mais de duas classes a um único elemento e aplicar os estilos a todas as classes de uma vez.

Por exemplo, crie três tags p em HTML e dê a elas os nomes de classe first, second e first second. Observe que para a terceira classe, permanece um espaço em branco entre os nomes das classes. Escreva os textos KTM, Honda e Kawasaki para as três classes entre as etiquetas p. Selecione a classe first em CSS e defina sua color como orange. Da mesma forma, selecione a classe second e defina-a como red e, finalmente, selecione ambas as classes como .first.second e defina a cor como green.

No exemplo abaixo, usamos várias classes em um único elemento e estilizamos essas classes de uma vez.

Código de exemplo:

<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; }

Atribuir várias classes a um elemento e definir o estilo de ambas as classes individualmente em CSS

Podemos atribuir várias classes a um único elemento HTML e definir o estilo de ambas as classes individualmente para escrever CSS com mais eficiência. Usando essa abordagem, podemos controlar a redundância nos estilos aplicados. Podemos aplicar os estilos comuns a várias classes e aplicar os estilos exclusivos à classe específica.

Por exemplo, crie uma classe title em uma tag p e escreva algum texto. Da mesma forma, crie outra tag de parágrafo e atribua as várias classes title text a ela. Escreva algum texto na marca de parágrafo. Em CSS, selecione a classe title e defina a background-color como skyblue. Em seguida, selecione a classe text e dê a cor green a ela.

Aqui, a cor de fundo de ambos os parágrafos será definida como azul celeste. É porque definimos o estilo da classe title para definir a cor de fundo. E, há uma classe title em ambos os parágrafos. No entanto, o segundo parágrafo só mudará sua cor para green porque aplicamos esse estilo apenas à classe text. Essa abordagem nos permite usar várias classes para um único elemento para aplicar os estilos comuns e o estilo individual aos elementos. Dessa forma, podemos atribuir várias classes a um único elemento e estilizar as classes individualmente para escrever CSS eficiente.

Código de exemplo:

<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;
}