Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

Agrupe seus seletores – 1a. Parte

Publicado em: 2006-03-17 — 23.744 visualizacoes

Em uma folha de estilos os seletores CSS que compartilham uma mesma regra CSS podem e devem ser agrupados.

Para agrupar seletores separe-os com uma vírgula como mostrado no exemplo a seguir:


p, span.dois, code {
  color: #000;
  font-size: 0.9em;
  }  
 

Na regra CSS acima os elementos p, span da classe ‘dois’ e code, todos eles serão na cor #000 e terão um tamanho de fonte igual a 0.9em.

Observe a folha de estilos abaixo, onde destaquei as declarações compartilhadas por todos os seletores:

  
.principal {
	font-size: 1.0em;
	text-align: justify;
	padding: 10px;
        }

.principal li {
	margin: 15px 0 3px;
	font-size: 1.0em;
	padding: 10px;
	list-style: none;
	text-align: justify;
	}

.principal p {
	text-align: justify;
	margin: 10px 5px 10px 0;
	padding: 10px;
	font-size: 1.0em;
        }

p.destaque {
	color:#600;
	border:1px dotted #ffe;
	background:#eee;
	padding:10px 10px 5px;
	text-align: justify;
        font-size: 1.0em;
	}
 

Vamos agrupar os seletores que compartilham das declarações comuns e reescrever a folha de estilos assim:

  
.principal, .principal li, .principal p, p.destaque  {
	font-size: 1.0em;
	text-align: justify;
	 }
       

.principal {
	padding: 10px;
        }


.principal li {
	margin: 15px 0 3px;
	padding: 10px;
	list-style: none;
	}

.principal p {
	margin: 10px 5px 10px 0;
	padding: 10px;
        }

p.destaque {
	color:#600;
	border:1px dotted #ffe;
	background:#eee;
	padding:10px 10px 5px;
	}
 

Retiramos as declarações compartilhadas de cada um seletores e agrupamos aqueles seletores em uma regra única.

Podemos simplificar ainda mais a folha de estilo apresentada como exemplo, tirando proveito do efeito cascata. Mas, isto será assunto para uma matéria futura:
Agrupando seletores – 2a.Parte.

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.

Esta matéria foi publicada em: 2006-03-17 (sexta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2006/03/17/agrupesel/trackback no seu site.

13 comentários na matéria: “Agrupe seus seletores – 1a. Parte”

  1. MarlyNo Gravatar disse:

    Olá, Mauricio!
    Gostaria de agradecer pela sua iniciativa de fazer um tutorial tão rico em informações e detalhes e com exemplos completos.

    Estou usando seus exemplos para a aprender CSS, mas não consigo visualizar o resultado no FireFox 1.0.8 e nem no Mozila. O estranho é que seu site utiliza folha de estilo e vejo normalmente. Vc tem algum palpite sobre isso?

    Muito obrigada,
    Marly

  2. Marcos Tullyo CamposNo Gravatar disse:

    Mais uma vez, parabéns Maujor pelo seu trabalho… atualmente virei fã desse homem… criei até uma comunidade no orkut em homenagem ao JEDI Maujor… vlw!! :]

  3. MaujorNo Gravatar disse:

    O elemento HTML code está previsto nas especificações do HTML.
    Destina-se a marcar porções de código em uma página Web.

  4. Felipe 'chronos' PrenholatoNo Gravatar disse:

    Legal maujor, que bom :).

    E quanto a tag code? Ela foi criada por ti ou existe mesmo ela? Não achei referencia alguma no google :).

  5. MaujorNo Gravatar disse:

    Grato a todos pelas mensagens.

    Farley:
    Lamento mas não entendi o que vc está pretendendo.
    Se vc quer montar uma página personalizada crie um template.

    César Oliveira:
    Boa! você descobriu o tema da 2a. Parte desta matéria.

    Felipe:
    Não é erro de renderização.
    A parte superior da coluna de conteúdo foi projetada apoiada em cima da barra de navegação.

  6. Felipe 'chronos' PrenholatoNo Gravatar disse:

    Olá Maujor, parabéns, o blog ficou legal :).

    Só um detalhe, a caixa branca de conteúdo, no meu firefox (Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.0.1) Gecko/20060227 Firefox/1.5.0.1) no Linux aparece comendo parte da barra verde do menu.

    Não sei se é um erro, mas fica ai a dica :).

    O que eu ia perguntar, é se existe essa tag code, ou você criou ela?
    Andei vendo seu CSS e o código gerado pelo wordpress a título de aprendizado e achei interessante.

    Eu sou o mantenedor do planet.gentoobr.org e achei que seria interessante procurar usar as caixas com rolagem como ti usas no teu blog.

    Se puder me contatar via e-mail para conversarmos seria interessante.

    Abraços.

    Felipe ‘chronos’ Prenholato.

    http://chronosinside.blogspot.com
    http://planet.gentoobr.org
    http://www.gentoobr.org

  7. César OliveiraNo Gravatar disse:

    Olá, boa tarde
    Fiquei muito contente ao ter conhecimento do blog maujor pois já adorava o site.
    Aprendi muito sobre CSS neste site, e por isso aqui deixo a mensagem da minha gratidão.

    Só uma questão:
    o padding: 10 px;
    Não podia ser incluido na agregação dos selectores tirando é claro o ultimo padding que é diferente dos outros.

    Um abraço de Portugal
    César Oliveira

  8. FarleyNo Gravatar disse:

    Olá Maurício. Como está a usar o WP para seu blog, queria te perguntar algo que me ajudaria muito: Você faz idéia de como posso colocar uma determinada página pra carregar (eu crio uma página como por exemplo AGD) como página principal, que não seja a dos assuntos do blog? Tentei encontrar algumas coisas e um único plug-in que encontrei não funcionou bem.

    Obrigado.

  9. helderNo Gravatar disse:

    D+! Obrigado maurício, por mais essa contribução! Eu, como muitos só temos de agradecer!
    abraços..

  10. InfoWDNo Gravatar disse:

    Parabéns! Parabéns! Parabéns!
    É o mínimo que se pode dizer sobre o seu excelente trabalho!
    Continue assim!

  11. billy blayNo Gravatar disse:

    olá Maurício,

    Parabéns pela iniciativa, seus tutoriais influem muito no processo de criação das minhas páginas e também nas minhas aulas, hoje sou entusiasta do CSS e recomendo sempre a sua utilização. Ainda estou caminhando na área mas já migrei parte do meu site para CSS.

    Obrigado MAUJOR (exército de um homem só)

  12. BlueNo Gravatar disse:

    Aprender, comparando exemplos, usando a memória visual que todos temos, é uma maravilha.
    Um milhão de palavras não têm a mesma eficiência de um simples e singelo “olha só como se faz”…
    Obrigada por mais esse presente.
    Vida longa ao blog do maujor!

  13. Rafael RinaldiNo Gravatar disse:

    E aí cara, parabéns pelo blog e pelo site. Acompanho seu trabalho há um tempo já…

    Abraço

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo