Minicursos - CSS

Agrupmento de Seletores


Agrupar seletores em CSS é algo bastante útil, principalmente quando lidamos com grandes páginas. Basicamente essa técnica é um atalho para poupar código e tornar o trabalho mais ágil, pois podemos aplicar propriedades a diversos seletores de uma vez só.

Imaginem que seja necessário aplicar o texto da cor azul a todas as tags <h>,de 1 a 6. Poderíamos fazer isso com os seguintes códigos:

h1 {color:blue;}
h2{color:blue;}
h3{color:blue;}

E assim sucessivamente. Ou podemos agrupa-los, deixando o comando assim:

h1,h2,h3,h4,h5,h6 {color: blue;}

É muito mais simples, sem contar que deixamos nosso código mais limpo e fácil de ser compreendido.

Vamos nos aprofundar um pouco mais e tornar nosso código mais profissional.

Classes

Se você já passou por outros sites atrás de conteúdo sobre CSS deve ter lido a palavra classe em vários deles, mas afinal de contas, o que são classes em CSS?

O conceito é bem simples e seu principal objetivo é promover o reaproveitamento de código. Funciona assim: imagine que você queira criar parágrafos <h1>na cor vermelha, mas também queria destacar trechos do seu texto em um parágrafo <p>na mesma cor. Para reaproveitar o código você poderia criar seu CSS dessa maneira:

.destaqueVermelho{color:red;}

Com este código criamos uma classe chamada destaqueVermelho, que tem um parâmetro color e o valor red.

Importante!
O ponto, no início da frase, faz parte da sintaxe do comando. Você não deve se esquecer dele!

A partir disso você pode vincular qualquer seletor HTML a ela, da seguinte forma:

<html>
<body>
<h1 class="destaqueVermelho">Título </h1>
<p class="destaqueVermelho">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p>
</body>
</html>

Isso gerará a seguinte página:

Agrupamento de Seletores CSS

Vejam que tanto a tag <h1>quando a <p>receberam o texto em vermelho, pois estão vinculados à classe destaqueVermelho.

Isso é de extrema utilidade! Você pode criar classes para definir textos em negrito e chama-los rapidamente no momento da criação do arquivo HTML. Ou poderiam ser em itálico, sublinhados, coloridos, com duplo espaçamento entre as linhas, enfim, dessa forma fica fácil estilizar textos com agilidade.

Você também pode definir um único seletor e vincula-lo a uma classe. Se apenas parágrafos podem receber textos em vermelho, o nosso CSS ficaria assim:

p.destaqueVermelho{color:red;}

Especificamos assim que apenas a tag p pode se beneficiar dessa classe.

A chamada no arquivo HTML seria da mesma forma:

<p class="destaqueVermelho">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p>

No entanto, se tentar atribuir essa classe a uma tag <h1>,não irá funcionar, pois agora a classe é de exclusividade dos seletores p.

Vale lembrar que o agrupamento de seletores pode ser usado para seletores vinculados a alguma classe, por exemplo:

p.destaqueVermelho, h1.destaqueVermelho, h4.destaqueVermelho{color:red;}

Com o código acima os seletores p, h1 e h4 podem fazer uso da classe destaqueVermelho.

Bem, assim fica fácil perceber que uma classe pode ser acessada por vários seletores, mas e o contrário? E se um seletor precisar fazer parte de várias classes, é possível? Sim, claro que é! Você pode colocar um seletor em quantas classes quiser. Vamos criar um CSS assim:

.destaqueVermelho{color:red;}
.destaqueFonte{font-family:Georgia;}
.tituloGrande{font-size:28px;}

Para vincular um seletor a todas essas classes ao mesmo tempo, nosso HTML ficará assim:

<h1 class="destaqueVermelho destaqueFonte tituloGrande">Título </h1>

Basta inserir todas as classes no comando class, separadas por um espaço. Vejam o resultado na página:

Agrupamento de Seletores CSS

A palavra título foi exibida em vermelho, com fonte Georgia e tamanho de 28pixels, ou seja, ela recebeu as propriedades de todas as classes.

Seletor universal

É possível criar uma regra que se aplique a qualquer seletor, mesmo sem especifica-lo. Essa é uma opção bastante interessante para ser usada em conjunto com a característica da herança. Imagine que você queira criar uma página tendo todo o seu texto em itálico, exceto quando aparecerem nomes de cidades. Bem, então podemos criar um seletor universal para textos em itálico e, apenas para os nomes de cidades criaremos uma regra específica.

Ficaria da seguinte forma:

*{font-style:italic;}
.nomeCidade{font-style:normal;}

E nosso HTML:

<html>
<body>
<h1>Cidade de <span class="nomeCidade">São Carlos </h1>
<p> <span class="nomeCidade">São Carlos </span>é um município brasileiro localizado no interior do estado de <span class="nomeCidade">São Paulo </span>,próximo de seu centro geográfico, e a uma distância rodoviária de 231 quilômetros da capital paulista. Com uma população recenseada em 221.936 habitantes (IBGE/2010), distribuídos em uma área total de 1.141 km², é a 13ª maior cidade do interior do estado em número de residentes. </p>
</body>
</html>

Percebam que para criar o seletor universal, apenas usei um asterisco, que representa todos os seletores. Nossa página ficou assim:

Agrupamento de Seletores CSS

Vejam que todas as palavras estão em itálico, exceto os nomes de cidades. A regra aplicada a todos os seletores funcionou perfeitamente, sendo utilizada tanto pela tag h1 quanto pela tag p. Quando aparecia um nome de cidade eu usei a tag span para chamar nossa classe que não exibia o texto em itálico. Simples!

Existem muitas outras regras envolvendo seletores CSS, mas não vamos falar delas agora. O objetivo dessas primeiras páginas era introduzi-lo nessa interessante linguagem de formatação de páginas HTML. Acredito que com o que foi falado você pode criar qualquer página. Faça bom proveito!



Algumas notícias

Google Chrome consumirá menos memória RAM em breve

O navegador da gigante de buscas da Internet é, sem dúvida, um dos melhores disponíveis, mas é inegável que o consumo de memória RAM por parte dele é exagerado. Este problema já se estende por anos, mas parece que em breve ele terá uma solução. Um novo recurso do Windows 10, chamado SegmentHeap...

Ler Notícia Completa

Sites e vídeos sem propagandas? Sim, é possível através da exploração de uma falha!

Seguramente você já se deparou com sites que bloqueiam o conteúdo da página e te obrigam a assinar determinado serviço para ler o conteúdo, certo? Ou foi tentar assistir aquele vídeo e as propagandas em tela cheia não pararam de surgir. Bem, todos já nos deparamos com isso, no entanto, um bug de...

Ler Notícia Completa

Inteligência Artificial cria antibiótico super potente

Pesquisadores do MIT (EUA) identificaram um novo e poderoso composto antibiótico usando um algoritmo de aprendizado de máquina, uma técnica de inteligência artificial. Em testes de laboratório, a droga matou algumas das bactérias causadoras de doenças mais problemáticas do mundo, incluindo algu...

Ler Notícia Completa

Google lança programa para capacitar profissionais brasileiros e com direito a bolsas

O Google iniciou nesta terça-feira (17) o Certificado Profissional de Suporte em TI para brasileiros. Trata-se de um curso desenvolvido pela gigante de tecnologia em parceria com a Coursera. Inicialmente, o módulo de ensino foi anunciado a um valor de US$ 39 por mês. Entretanto, sofreu uma redu...

Ler Notícia Completa

Intel Core i9-9900KS é um monstro com frequência de 5GHz em todos os núcleos

A Intel é uma das empresas presentes na Computex 2019, a maior feira de hardware da Ásia. E a empresa começou a esquentar os motores antes mesmo do início das conferências, exibindo um processador que não está para brincadeira: o Intel Core i9-9900KS, uma edição especial e ainda mais turbinada do...

Ler Notícia Completa

Como conversar com alguém no WhatsApp sem adicionar o número aos contatos

Este processo pode, à primeira vista, parecer um pouco confuso para usuários que não são muito experientes usando seu smartphone. Mas uma vez que você conclua o processo , vai entender o método e parecerá mais fácil. 1. Abra o seu navegador preferido no seu smartphone e digite o seguinte link na...

Ler Notícia Completa
Você gostará destes vídeos!