Div Mania
Publicado em: 05/06/2005Atulizado em: 23/03/2011
Autor: Gez Lemon
URL do original: https://juicystudio.com/article/div-mania.php
Título original: Div Mania
Traduzido com autorização expressa do autor
Sumário
Cresce a cada dia a quantidade de documentos sendo produzidos, com a utilização de uma coleção infinda de mais e mais elementos div. Na maioria destes casos um melhor e racional uso de seletores CSS evitaria este festival de elementos div na marcação.
Índice
O que é Div Mania?
Os elementos div e span foram criados com o HTML 4 com a finalidade de fornecer um mecanismo genérico para agrupar e prover estrutura aos documentos. O elemento div é um container nível de bloco e span é um elemento inline. Uma id e/ou class é em geral usada para fornecer uma identidade a uma div ou span com o propósito de fornecer uma referência para estilização por CSS ou captura por um script. Div mania é o uso indiscriminado do elemento div pelo desenvolvedor em sua marcação, normalmente para sustituir as tabelas de um layout, resultando em uma marcação toda em divs aninhadas. O elemento div é semanticamente neutro: ele não tem qualquer valor semântico, é simplesmente um elemento container. O elemento div deverá ser usado quando não estiver disponível um outro elemento container e semântico, capaz de substituí-lo tal como são os cabeçalhos, parágrafos, listas etc. A seguir exemplo de marcação típica de um documento Div Mania.
<div id="wrapper">
<div id="container">
<div id="navigation">
<div id="navhead">
...
</div>
<div id="navcontent">
...
</div>
</div>
<div id="content">
<div class="panel">
...
</div>
<div class="panel">
...
</div>
</div>
</div>
</div>Desenvolvedores normalmente são levados a cair na armadilha da div mania por não conhecimento ou inadivertidamente. Submetendo um documento corretamente estruturado e com uma marcação de div mania ao validador, este confirmará um documento (X)HTML válido, pois que o validador não tem meios de analisar a escolha do elemento apropriado no código de marcação. Muitos são os fatores que contribuem para a div mania, incluindo-se entre eles o desconhecimento ou mesmo o pouco conhecimento das recomendações para os elementos de marcação (atenção para os elementos em desuso) , bem como para o CSS box model, a herança e o efeito cascata em CSS , e a escolha apropriada de seletores. Conversando sobre criação de documentos div mania, com desenvolvedores que tem uma razoável compreensão de CSS ficou claro que o que contribui enormemente para esta prática é o pouco entendimento dos seletores CSS. A seguir, esta matéria apresenta uma visão geral dos seletores CSS 2.1.
[Índice ↑ ]
Conjunto de regras de estilo
Um documento CSS é constituido por um conjunto de regras de estilo, com cada regra consistindo de um seletor seguido por um bloco declaração de regras de estilo. Normalmente no documento encontramos mais de uma regra, uma verdadeira coleção de regras denominada de conjunto de regras. O seletor determina o elemento, na árvore do documento, ao qual será aplicada a regra de estilo. Se o seletor é inválido, o agente de usuário ignorará aquela regra. Um bloco de declaração de regras de estilo é constituido por uma lista de zero ou mais declarações de estilo, separadas por ponto-e-vírgula e contidas entre sinais de 'chaves'; '{ }'. Uma declaração individual poderá ser vazia ou conter um par de propriedade/valor separados por dois-pontos. Considere a regra CSS a seguir:
h1
{
padding-top: 1em;
border-bottom: 1px solid #ccc;
}
Na regra acima o seletor é h1, e o bloco de declaração de estilo é tudo que está dentro inclusive os sinais de 'chaves'; '{ }'. O bloco de declaração consiste de duas declarações, separadas por ponto-e-vírgula. O ponto-e-vírgula obrigatoriamente deve ser usado para separar as declarações, sendo facultativo mais de boa prática seu uso na última declaração do bloco. A primeira declaração especifica a propriedade padding-top, para a qual foi definido um valor de 1em. Ver o Appendix F da especificação listagem de todas as propriedades que devem ser usadas com CSS.
[Índice ↑ ]
Especificidade do seletor
O entendimento de como o seletor é aplicado a um elemento requer o conhecimento de herança e efeito cascata. A herança é o modo como um elemento herda as propriedades de seu elemento pai. Por exemplo, ao definirmos um valor de font-size para uma área de navegação todos os elementos dentro da área, tais como parágrafos e itens de listas, herdarão aquele valor para tamanho de fonte. A maioria das propriedades, mas não todas elas, são herdadas pelos elementos descendentes. Nos casos em que uma propriedade não é herdada, podemos usar o valor inherit para forçar a herança. O efeito cascata faz-se presente quando há várias regras de estilo para um único elemento e neste caso a especificidade é usada para determinar qual das regras será aplicada. A ordem é importante: quando dois seletores tem a mesma especificidade, aplica-se a regra declarada por último.
[Índice ↑ ]
Seletores CSS
Os seletors determinam ao qual - ou quais - o elemento na árvore do documento será aplicada a regra de estilo. No exemplo acima o seletor aponta para o elemento h1. Seletores mais complexos, baseados na posição do elemento na árvore do documento, podem ser usados para determinar mais especificamente o elemento a aplicar a regra de estilo.
[Índice ↑ ]
Seletor universal
O seletor universal é representado por um asterisco, '*', e refere-se a todos os elementos da árvore do documento. A regra de estilo mostrada no exemplo a seguir define a aplicação de um fundo amarelo claro em todos os elementos que suportam a propriedade background-color a menos que um seletor mais específico seja definido. A partir daqui eu não ficarei mais repetindo esta restrição da especificidade nos exemplos desta matéria, então é importante lembrar que para todos os exemplos mostrados fica sempre a restrição de que a regra se aplica se um seletor mais específico não for definido.
*
{
background-color: #ffc;
}
O exemplo a seguir mostra uma regra a ser aplicada a todos os elementos da classe attention.
*.attention
{
background-color: #ffc;
}
Quando o asterisco é parte integrante do seletor, como no exemplo acima, pode-se omití-lo. O seletor .attention é o mesmo que o seletor *.attention.
[Índice ↑ ]
Seletor de elemento
O seletor de elemento aplica-se a qualquer instância de um determinado elemento na árvore do documento. No exemplo a seguir um fundo amarelo claro será aplicado a todos os elementos p do documento
p
{
background-color: #ffc;
}[Índice ↑ ]
Grupamento de Seletores
Quando um mesmo bloco de declaração de estilos aplica-se a diversos seletores, podemos grupá-los separando-os por uma vírgula. No exemplo a seguir um fundo amarelo claro será aplicado a todos os elementos strong e a todos os elementos em .
strong, em
{
background-color: #ffc;
}[Índice ↑ ]
Seletor de classe
O seletor de classe é usado com uma alternativa ao Seletor de atributo. O seletor de classe é representado por um ponto, '.', e aplica-se a todos os elementos que tem aquela classe. No exemplo a seguir um fundo amarelo claro será aplicado a todos os itens de listas com a classe attention.
li.attention
{
background-color: #ffc;
}
Se uma classe for aplicada a vários elementos podemos usar a técnica de grupamento de seletores, ou usar o seletor universal (*.classeNome ou .classeNome)
[Índice ↑ ]
Seletor ID
O nome de um atributo
id deve ser único em um documento web, em consequência será aplicado a uma única instância de um elemento na árvore do documento. O seletor ID é representado por uma 'tralha' , '#'. No exemplo a seguir um fundo amarelo claro será aplicado ao único cabeçalho de nível-2 cuja id é offers.
h2#offers
{
background-color: #ffc;
} Como a
id é única, é perfeitamente seguro usar o seletor universal com o seletor id (*#idNome or #idNome). Para fins de legibilidade e de manutenção do código esta poderá ser uma boa prática.
[Índice ↑ ]
Seletores descendentes
A árvore do documento é organizada de uma maneira tal que cada elemento tem um único elemento "pai", com exceção do elemento raiz. O seletor descendente é usado para apontar a todos os elementos descendentes de um mesmo pai. O seletor descendente é representado por seletores separados por espaços em branco onde cada seletor esta contido no seletor que o antecede. No exemplo a seguir um fundo amarelo claro será aplicado a todo elemento strong contido dentro de uma parágrafo.
p strong
{
background-color: #ffc;
}[Índice ↑ ]
Seletores filho
Um seletor filho aponta para um elemento filho. Seletor filho é representado por um sinal de 'maior que' , '>', com o pai à esquerda e o filho à direita. No exemplo a seguir um fundo amarelo claro será aplicado a todo elemento strong que seja filho de p.
p>strong
{
background-color: #ffc;
}
A diferença entre seletor descendente e seletor filho é que o seletor descendente aplica-se a strong sempre que ele estiver dentro de um parágrafo enquanto o seletor filho é mais específico e somente aplica-se a strong quando ele for filho de p. Considere o exemplo a seguir.
<p>
João disse,
<q>
Será ótimo quando tudo estiver<strong>acabado</strong>.
</q>
Mas talvez ele não<strong>concorde</strong>!
</p>
O seletor descendente aplica-se aos dois elementos strong, enquanto o seletor filho, aplica-se somente ao segundo elemento strong pois o primeiro elemento strong não é filho de p; ele é filho de q.
Lamentavelmente seletor filho não é suportado pelo Internet Explorer 6.
[Índice ↑ ]
Seletores irmãos adjacentes
Elementos irmãos são aqueles que são filhos do mesmo pai. Irmãos adjacentes são aqueles filhos do mesmo pai e imediatamente próximos um do outro. Seletores irmãos adjacentes são representados por um sinal de 'mais', '+'. No exemplo a seguir um fundo amarelo claro será aplicado a todo elemento h2 que se segue a um elemento h1 e que são filhos do mesmo pai.
h1+h2
{
background-color: #ffc;
}Lamentavelmente seletor irmão adjacente assim como o seletor filho não é suportado pelo Internet Explorer 6.
[Índice ↑ ]
Seletores de atributo
Seletores de atributo apontam para elementos que tem um valor de atributo definido na árvore do documento. Existem quatro tipos de seletor de atributo como veremos a seguir..
[att]
O seletor de atributo básico aponta para um elemento que tem aquele atributo e independe do valor do atributo. No exemplo a seguir um fundo amarelo claro será aplicado a todo elemento de âncora que tenha o atributo title definido.
a[title]
{
background-color: #ffc;
}[att=val]
Este seletor de atributo aponta para todo elemento com um valor de atributo específico. No exemplo a seguir um fundo amarelo claro será aplicado a todo elemento de âncora que tenha o atributo rel com o valor external.
a[rel=external]
{
background-color: #ffc;
}[att~=val]
Alguns tipos de atributos podem ser definidos com vários valores separados por uma vírgula. Usamos um sinal de 'til'; '~'; seguido por um sinal de 'igual;'='; para apontar a um elemento com este tipo de atributo e que tenha um dos valores definidos no seletor. No exemplo a seguir um fundo amarelo claro será aplicado a todo elemento parágrafo que tenha a classe attention.
p[class~=attention]
{
background-color: #ffc;
}
p[class~=attention]é o mesmo que p.attention.
[att|=val]
Este seletor de atributo é usado para apontar para atributos que possuem um valor definido com uso de hífen; '-'. É um seletor cuja principal finalidade é a de apontar para códigos que definem uma linguagem. No exemplo a seguir um fundo amarelo claro será aplicado a toda âncora cujo atributo hreflang tenha seu valor iniciado por "en", incluindo entre eles en, en-US, en-GB, en-cockney, ou qualquer outra combinação envolvendo en.
a[hreflang|=en]
{
background-color: #ffc;
}
Múltiplos seletores de atributo podem ser aplicados ao mesmo tempo. O exemplo a seguir usa dois seletores de atributo para aplicar um fundo amarelo claro a todas as âncoras que contém o atributo title e o valor external definido para o atributo rel
a[title][rel~=external]
{
background-color: #ffc;
}
CSS 3 prevê alguns outros seletores de atributo bem interessantes, entre eles, seletores apontando para um valor de atributo iniciado por determinados caracteres E[foo^="bar"], terminado por determinados caracteres E[foo$="bar"], e um seletor apontando para uma substring E[foo*="bar"]. Mozilla/Firefox e Opera oferecem suporte para seletores de atributo e Mozilla/Firefox suportam também estes seletores de atributo de CSS 3. Desnecessário dizer que o Internet Explorer não suporta qualquer tipo de seletor de atributo.
[Índice ↑ ]
Pseudo seletores
Pseudo seletores são usados quando a posição de um elemento na árvore do documento não é suficiente para definir um seletor, tal como a primeira linha de um parágrafo. Pseudo-elementos e pseudo classes são usadas para aplicar regras de estilo baseadas em informações não relacionadas com a árvore do documento e são representadas por 'dois-pontos' ; ':'. CSS 2.1 define quatro pseudo-elementos; :first-line, :first-letter, :before, e :after. No exemplo a seguir aplica-se um tamanho de fonte, font-size de 2em ao primeiro caracter de um parágrafo.
p:first-letter
{
font-size: 2em;
}
CSS 2.1 define uma pseudo classe denominada :first-child, 2 pseudo classes para links (:link, e :visited), três pseudo classes dinâmicas (:active, :hover, e :focus), e uma pseudo classe lang (:lang). No exemplo a seguir um fundo amarelo claro será aplicado a toda âncora que for o primeiro 'filho' de qualquer elemento.
a:first-child
{
color: #090;
}No exemplo a seguir todos os links visitados serão coloridos em verde.
a:visited
{
color: #090;
}
No exemplo a seguir um fundo amarelo claro será aplicado aos parágrafos cujo atributo para linguagem lang for o francês.
p:lang(fr)
{
background-color: #ffc;
}[Índice ↑ ]
Conclusão
Um mal entendimento do emprego de seletores não é a única razão para a div mania, mas é a maior responsável. O elemento div é útil para agrupar e posicionar conteúdos, mas regras CSS podem ser aplicadas diretamente em listas e outros elementos que tenham valor semântico.
Conheça os livros do Maujor®
Ir para a página de entrada nos sites dos livros.
