Minicursos - CSS

Agrupamento 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 agrupá-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 chamá-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 vinculá-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 especificá-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!



Notícias - Games

Atari VCS é finalmente lançado e surpreende

O Atari VCS foi lançado recentemente e trouxe suporte a praticamente todos os serviços de streaming de jogos já disponíveis. A única exceção foi por conta do Playstation Now, cujo suporte nativo não é oferecido, mas ele pode ser acessado através do modo PC do VCS, já que o console possui Googl...

Ler Notícia Completa

The King of Fighters XV já tem data para chegar

A SNK finalmente definiu uma data para lançamento do tão esperando The King Of Fighters XV. Segundo comunicado recente, o game de luta deve chegar em 17 de fevereiro de 2022 para os consoles Playstation 4, Playstation 5, Xbox Series X e S, além de PCs. O título contará com 39 personagens e mante...

Ler Notícia Completa

Phil Spencer aprovou o Steam Deck rodando o xCloud

O chefe da divisão XBOX e vice presidente da divisão de jogos da Microsoft, Phil Spencer, recebeu um Steam Deck e passou uma semana testando o dispositivo da Valve. Nas palavras dele: “trata-se de um dispositivo muito legal. É interessante ter os jogos disponíveis em qualquer lu...

Ler Notícia Completa

Conheça o Playstation 2 portátil criado por um brasileiro

Claudio Adriano decidiu criar uma versão portátil do console Playstation 2, da Sony. Inspirado no Nintendo Switch, o console ficou pronto depois de 2 anos de trabalho e algumas interessantes adaptações. Partindo de uma placa-mãe de um PS2 Slim, Claudio fez os encaixes necessários para que a pla...

Ler Notícia Completa

Playstation 4 já vendeu mais de 116 milhões de unidades

Embora a nova geração de consoles já tenha chegado definitivamente, o PS4 ainda vem registrando bons números e ultrapassou a marca dos 116 milhões de aparelhos vendidos ao redor do mundo. Possivelmente a confirmação da Sony de que títulos bastante esperados, como o novo God Of War e Horizon Forb...

Ler Notícia Completa

Nintendo Switch supera Xbox 360 e PS3 em número de unidades vendidas

Em números divulgados nesta quinta-feira (05) a Nintendo confirmou a quantia de 89 milhões de unidades vendidas do seu console Switch, deixando para trás o Playstation 3, com 87 milhões de unidades e o Xbox 360, com 80 milhões. O próximo console na lista para ser ultrapassado é o Wii, também da...

Ler Notícia Completa

Far Cry 5 está de graça para todas as plataformas por tempo limitado

A Ubisoft liberou o game Far Cry 5 entre os dias 5 e 9 de agosto para todas as plataformas (PS4, PS5, Xbox One, Series X e Series S, Google Stadia e PC). A notícia é ótima, claro, mas ao contrário do que normalmente acontece, o jogo só poderá ser jogado gratuitamente até o dia 9 de agos...

Ler Notícia Completa
Ajude o Contém Bits com um cafezinho!

Se você gostou do artigo, se ele lhe foi útil de alguma maneira e você quiser ajudar o Contém Bits, saiba que é simples, fácil e rápido. Basta clicar na imagem do PayPal (ou no cafezinho) e seguir as instruções, em ambiente seguro e com o respaldo do Paypal. Eu agradeço muito! :)


Você gostará destes vídeos!