CSS Tips - Where()

Fala galera, Rodrigo Zan na área.

Hoje iniciaremos o quadro CSS Tips. A ideia é trazer todos os dias algumas dicas de CSS para aprimorar suas habilidades de design e tornar suas web pages ainda mais incríveis.

Dica do Dia: a pseudoclasse :where()

Hoje, vamos explorar a função de pseudoclasse where no CSS. Essa função é uma ferramenta incrivelmente útil quando se trata de selecionar elementos com base em uma lista de seletores. O que torna o where especial é sua capacidade de aplicar estilos a elementos que correspondem a qualquer um dos seletores em sua lista. Vamos dar uma olhada em como usá-lo.

Suponha que você deseje aplicar um estilo a todos os elementos <span> dentro da tag <p> da sua aplicação. Normalmente você escreveria:

p span { /* estilo */ }

Uma forma de declarar que o span é um elemento filho direto do p, é utilizando o sinal de maior.

p > span { /* estilo */ }

Porém, se eu tiver três parágrafos, cada um com uma classe que adiciona estilos diferentes, mas tiver algum estilo que queira passar para todos eles, posso trabalhar da seguinte forma:

p.first > span,
p.second > span,
p.third > span {
   /*  estilo para os spans dentro de todos os parágrafos */
}

p.first span { 
    /* estilo o span dentro de p.first */ 
}

p.second span { 
    /* estilo o span dentro de p.second */ 
}

p.third span { 
    /* estilo o span dentro de p.third */ 
}

Para tornar o CSS menos verboso, podemos utilizar a pseudoclasse :where():

:where(p.first, p.second, p.third) > span { 
    /*  estilo para os spans dentro de todos os parágrafos */ 
}

p.first span { 
    /* estilo o span dentro de p.first */ 
}

p.second span { 
    /* estilo o span dentro de p.second */ 
}

p.third span { 
    /* estilo o span dentro de p.third */ 
}

Curtiu essa dica? Se gostou desse quadro, me dá um toque nos comentários.

Abração e até amanhã!