Entrar Ainda não tem acesso?
3
respostas

Combinação de pseudo elementos no CSS

Referente ao curso HTML5 e CSS3 parte 4: avançando no CSS, no capítulo Melhorando o CSS e atividade Consolidando o seu conhecimento

por Leonardo Santos
| 209k xp | 14 posts

Boa tarde. É possível combinar pseudo elementos no css?

Por exemplo, tenho uma lista com 3 elementos. Cada elemento possui a classe "itens".

Trecho HTML:

<!-- Benefits -->
            <div class=third-div>
                <h1 class=beneficios-h1> Benefícios </h1>
                <ul> 
                    <li class="itens"> Elemento 1 </li>
                    <li class="itens"> Elemento 2 </li>
                    <li class="itens"> Elemento 3 </li>
                </ul>
            </div>
        </div>

No CSS, utilizei o pseudo elemento para alterar a cor de cada um deles individualmente, de acordo com a sua divisibilidade:

Trecho CSS:

.itens:nth-child(2n){
    color:darkmagenta;    
}

Porém eu gostaria também de adicionar 1 unicode character diferente para itens que estejam em posições divisíveis por 2. É possível fazer essa concatenação?

Att;

3 respostas
por Mateus Henrique
| 989.4k xp | 1546 posts
Instrutor Desenvolvedor

Fala Leonardo, tudo bem?

Você pode sim fazer combinação de pseudo-classes, nesse caso você pode colocar como valor dessa pseudo-classe, como odd (impar) ou even (par). Por exemplo:

.itens:nth-child(even){
    color:darkmagenta;    
}

Que aplicará essa cor apenas para os elementos com pares a classe itens.

Veja mais sobre isso aqui

Espero ter ajudado, bons estudos :D

por Leonardo Santos
| 209k xp | 14 posts

Boa noite Mateus,

Agradeço a resposta, porém não consegui sanar minha dúvida.

Estou ciente que podemos usar o itens:nth-child (even/odd) para formatar os elementos de maneiras diferentes de acordo com sua posição dentro da lista.

Minha dúvida nesse caso é como combinar diferentes pseudo elementos.

Por exemplo:

A seguir eu inseri um trecho de um código CSS. Nesse caso, todos os itens em posição par da lista são coloridos com darkmagenta. Além disso, todos os itens da lista possuem o ícone ⌛ antes de cada elemento da lista.

Eu gostaria que esse ícone aparecesse apenas antes dos itens em posição pares. É possível fazer essa concatenação?

.itens:nth-child(2n){
    color:darkmagenta;    
}

.itens:before {
    content: "⌛";
}
por Mateus Henrique
| 989.4k xp | 1546 posts
Instrutor Desenvolvedor

Sim é possivel, basta colocar um na frente do outro normalmente

.itens:nth-child(2)::before {
    content: "⌛";
}