[Resolvido] Duvida sobre CSS (estilo de classe funciona apenas separado)

Front-end
#1

Boa tarde pessoal

Sou iniciante em front-end, estou desenvolvendo uma pagina de portifolio para expor meus projetos, porem encontrei uma dificuldade que não consegui resolver e tambem entender.

!- organizei o portifolio da seguinte maneira:

  • a pagina inicial vai conter os links para as tecnologias utilizadas (front-end, java, android,etc)
  • na pagina de cada tecnologia havera links para porjetos concluido e em andamento
  • e dentro de cada pasta os links para as paginas dos projetos

todas as paginas tem o mesmo padrao, mudando apenas a imagem dos links

vou colocar aqui uma parte da estilização

.concluido .andamento {
    display: flex;
    width: 400px;
    height: 400px;
    align-items: center;
}

aqui eu delimito o tamanho da div dos links, para essas duas classes funciona corretamente
porem dentro da pagina “em andamento” coloquei o link para um projeto e atribui uma outra classe “cognikids”
se tento apenas colocar a classe na declaração acima não funciona, só funciona se eu declarar separado

nao funciona

.concluido .andamento .cognikids{
    display: flex;
    width: 400px;
    height: 400px;
    align-items: center;
}

funciona

.concluido .andamento {
    display: flex;
    width: 400px;
    height: 400px;
    align-items: center;
}
.cognikids {
    display: flex;
    width: 400px;
    height: 400px;
    align-items: center;
}

gostaria de saber o porque não funciona declarando junto, pois quero deixar o código mais limpo sem redundancias.
Ja testei trocar a classe cognikids pelas concluido ou andamento e tambem nao funcionou

desde ja agradeço pela atenção e tempo

#2

A gente precisaria ver seu HTML para ter certeza, mas acredito que vc pode evitar repetir as regras fazendo assim:

.cognikids,
.concluido .andamento {
    display: flex;
    width: 400px;
    height: 400px;
    align-items: center;
}

Com a virgula vc está dizendo que aquelas regras devem ser aplicadas a qualquer elemento ocntendo a classe cognikids e também a qualquer elemento com a classe andamento que estiver dentro de um elemento com a classe concluido.

#3

realmente o problema foi a falta de virgula para separar os elementos, havia esquecido que quando se coloca duas classes sem virgula significa que uma esta dentro da outra

muito obrigado

1 curtida