Ao agrupar seletores CSS, você aplica os mesmos estilos a vários elementos diferentes sem repetir os estilos em sua folha de estilo. Em vez de ter duas, três ou mais regras CSS que fazem a mesma coisa (definir a cor de algo como vermelho, por exemplo), você usa uma única regra CSS que realiza a mesma coisa. O segredo dessa tática de aumento de eficiência é a vírgula.
Como agrupar seletores CSS
Para agrupar seletores CSS em uma folha de estilo, use vírgulas para separar vários seletores agrupados no estilo. Neste exemplo, o estilo afeta os elementos p e div: div, p {color: # f00; }
Neste contexto, uma vírgula significa “e”, portanto, este seletor se aplica a todos os elementos de parágrafo e todos os elementos de divisão. Se a vírgula estivesse faltando, o seletor se aplicaria a todos os elementos de parágrafo que são filhos de uma divisão. Esse é um tipo diferente de seletor, então a vírgula é importante. Você pode agrupar qualquer forma de seletor com qualquer outro seletor. Este exemplo agrupa um seletor de classe com um seletor de ID: p.red, #sub {color: # f00; }
Este estilo se aplica a qualquer parágrafo com o atributo de classe de vermelho e qualquer elemento (porque o tipo não é especificado) com um atributo de ID de sub. Você pode agrupar qualquer número de seletores, incluindo seletores que são palavras únicas e seletores compostos. Este exemplo inclui quatro seletores diferentes: p, .red, #sub, div a: link {color: # f00; }
Esta regra CSS se aplicaria a:
- Qualquer elemento de parágrafo
- Qualquer elemento com a classe de vermelho
- Qualquer elemento com um ID de sub
- O link pseudo classe dos elementos âncora que são descendentes de uma divisão.
Esse último seletor é um seletor composto. Conforme mostrado, ele é facilmente combinado com os outros seletores nesta regra CSS. A regra define a cor de # f00 (vermelho) nesses quatro seletores, o que é preferível a escrever quatro seletores separados para obter o mesmo resultado.
Qualquer seletor pode ser agrupado
Você pode colocar qualquer seletor válido em um grupo e todos os elementos no documento que correspondem a todos os elementos agrupados terão o mesmo estilo com base nessa propriedade de estilo. Alguns designers preferem listar os elementos agrupados em linhas separadas para legibilidade no código. A aparência no site e a velocidade de carregamento permanecem as mesmas. Por exemplo, você pode combinar estilos separados por vírgulas em uma propriedade de estilo em uma linha de código: th, td, p.red, div # firstred {color: red; }
ou você pode listar os estilos em linhas individuais para maior clareza: th,
td,
p.red,
div # firstred
{
cor vermelha;
}
Por que agrupar seletores de CSS?
O agrupamento de seletores CSS ajuda a minimizar o tamanho da folha de estilo para que ela carregue mais rápido. Admitidamente, as folhas de estilo não são as principais culpadas pelo carregamento lento; Os arquivos CSS são arquivos de texto, portanto, mesmo as folhas CSS muito longas são minúsculas quando comparadas a imagens não otimizadas. Ainda assim, cada pedaço de otimização ajuda, e se você puder cortar um pouco do seu CSS e carregar as páginas muito mais rápido, isso é uma coisa boa. Os seletores de agrupamento também tornam a manutenção do site muito mais fácil. Se você precisar fazer uma alteração, pode simplesmente editar uma única regra CSS em vez de várias. Essa abordagem economiza tempo e complicações. Conclusão: o agrupamento de seletores CSS aumenta a eficiência, a produtividade, a organização e, em alguns casos, até a velocidade de carregamento.
Formato mla apa chicago Sua Citação
Kyrnin, Jennifer. “Agrupando vários seletores CSS.” ThoughtCo, maio. 14 de 2021, thinkingco.com/grouping-multiple-css-selectors-3467065.
Kyrnin, Jennifer. (2021, 14 de maio). Agrupando vários seletores CSS. Obtido em https://www.thoughtco.com/grouping-multiple-css-selectors-3467065
Kyrnin, Jennifer. “Agrupando vários seletores CSS.” ThoughtCo. https://www.thoughtco.com/grouping-multiple-css-selectors-3467065 (acessado em 17 de junho de 2021).
