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 — 22.584 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.

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro jQuery   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro RWD   capa livro foundation   capa livro HTML5 e CSS3   capa livro Bootstrap3   capa livro Sass e Compass

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