CSS - Class .active

Boa tarde, Giulia.

No HTML, você pode aplicar múltiplas classes a um elemento separando-as por espaços dentro do atributo class.

class="app__card-button app__card-button--foco active"

Aqui, o elemento possui três classes aplicadas a ele: app__card-button, app__card-button--foco e active. Cada uma dessas classes pode ser usada para estilizar o elemento de maneiras diferentes.

No CSS, você pode selecionar elementos que têm múltiplas classes aplicadas ao mesmo tempo usando uma combinação de classes. No seu caso:

.app__card-button.active {
    border-radius: 0.8rem;
    background: var(--azul-royal);
    font-weight: 600;
}

Esse seletor CSS está dizendo: "Selecione todos os elementos que têm ao mesmo tempo as classes app__card-button e active." Isso significa que o estilo especificado (como o border-radius, background, etc.) só será aplicado a elementos que possuam ambas as classes.

Essa técnica é útil quando você quer aplicar estilos adicionais ou específicos apenas quando uma certa condição é atendida. Por exemplo, a classe active pode ser adicionada ou removida dinamicamente com JavaScript para mudar a aparência do elemento conforme o usuário interage com a página.

Espero que eu tenha te ajudado a entender melhor como funciona a combinação de classes! Se tiver mais dúvidas, é só perguntar. Bons estudos!

Opa, agradeço pela rápida resposta! Só mais uma dúvida nesse assunto. Não seria a mesma coisa que usar: .app__card-button active (sem o ponto antes de active, um espaço, como em

.class1 h1{
    font-weight: 500
}

?

Então Giulia, usar o seletor dessa forma não iria funcionar, porque sem o ponto antes do 'active' faria o CSS interpretar ele como se fosse uma tag HTML e não como uma classe e como não existe uma tag active o seletor aplicaria estilos em lugar nenhum. Funcionaria separando ambas as classes com um espaço e colocando um pontos antes de 'active', assim:

.app__card-button .active {
    border-radius: 0.8rem;
    background: var(--azul-royal);
    font-weight: 600;
}

No entanto, esse seletor aplica os estilos a qualquer elemento que tenha a classe 'active', desde que esse elemento esteja DENTRO de um elemento que tenha a classe 'app__card-button'.

<div class="app__card-button">
    <span class="active">Texto estilizado</span>
</div>

Neste caso, o estilo seria aplicado ao <span> com a classe 'active', pois ele é um descendente do elemento com a classe 'app__card-button'.

Então em resumo:

• .app__card-button.active: Aplica o estilo a um elemento que possui ambas as classes app__card-button e active.

• .app__card-button .active: Aplica o estilo a um elemento com a classe active que está dentro de um elemento com a classe app__card-button.

• .app__card-button active (sem o ponto antes de active): Não funciona como esperado, pois active seria interpretado como uma tag HTML, não uma classe.

Arrasou!

Muito obrigada!