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

O que acontece com o cérebro no exato momento em que morremos

O que passa em nossa cabeça no momento da morte? Não se sabe exatamente e, embora os cientistas tenham alguma resposta, a resposta continua sendo um grande mistério. Além de difícil solução, tentar respondê-la pode criar implicações éticas. No entanto, uma equipe de cientistas da Universidade...

Ler Notícia Completa

Operada e devolvida ao útero, menina que nasceu duas vezes hoje 'acorda sorrindo toda manhã'

Um bebê pode nascer duas vezes? Não é o caso da absoluta maioria das crianças, mas foi assim para a pequena Lynlee Boemer. Em outubro de 2015, sua mãe, Margaret Boemer, descobriu que estava grávida de gêmeos. Ela sofreu um aborto espontâneo, mas um dos bebês sobreviveu. Com dez semanas de ges...

Ler Notícia Completa

Médicos dizem estar perto de chegar a exame de sangue para todos os tipos de câncer

Cientistas dizem que estão mais perto de criar um exame de sangue universal, capaz de identificar todos os tipos de câncer. Estudo conduzido com 1.005 pacientes por uma equipe da Universidade Johns Hopkins, dos Estados Unidos, testou um método que detecta oito tipos de proteínas e 16 mutações ge...

Ler Notícia Completa

Formato JPEG está com os dias contados

Há quantos anos você ouve falar em arquivos JPG? O formato já era utilizado nos primórdios da web comercial nos anos 1990, vivendo há mais de 20 anos como o principal método de compressão de imagens do público. No que depender de Google, Mozilla e outras empresas, isso pode mudar dentro de algum...

Ler Notícia Completa

EUA aprovam 'droga viva', 1ª terapia contra câncer que reestrutura sistema imunológico do paciente

Os Estados Unidos aprovaram o primeiro tratamento que reestrutura o sistema imunológico do paciente para atacar o câncer. A agência reguladora de medicamentos do país - a FDA - diz que a decisão foi um momento "histórico" e que a medicina agora "entra em uma nova fronteira". A companhia Novar...

Ler Notícia Completa

Cientistas norte-americanos criaram anticorpo capaz de atacar 99% das variações de HIV

Um grupo formado por pesquisadores do Instituto Nacional de Saúde (NIH), dos Estados Unidos, e da empresa farmacêutica Sanofi criaram em laboratório anticorpos superdesenvolvidos capazes de atacar 99% das cepas de HIV. O feito é ainda mais significativo por ser capaz até mesmo de prevenir a infec...

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