Introdução a CSS - parte 3

Nesta aula serão apresentados o seletor descendente, o seletor filho, o seletor atributo, os pseudo-seletores e as pseudoclasses. Também será reforçado o conceito de árvore de elementos, o qual é necessário para que determinados seletores sejam utilizados de forma adequada. O conhecimento destes seletores nos permitirá a criação de folhas de estilos mais ricas e flexíveis.

Árvore do documento

Antes de apresentarmos o seletor descendente e o seletor filho, vamos rever o conceito de árvore de documento para uma melhor compreensão destes seletores. A árvore de documento é uma estrutura hierárquica composta pelos elementos HTML presentes no documento. A hierarquia vem dos relacionamentos do tipo pai e filho que se formam entre os elementos da árvore. Tome como exemplo o trecho HTML abaixo seguido da sua árvore de documento:

  ...
  <body>
    <div id="topo">
      <h1>Empresa</h1>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </div>
    <div id="principal">
      <h2>Título</h2>
      <p>Lorem <em>ipsum</em>...</p>
      <h2>Título</h2>
      <blockquote><p>...consectetur adipisicing...</p></blockquote>
    </div>
  </body>

Seguem alguns relacionamentos determinados pela árvore de exemplo:

Elemento body: é pai dos dois elementos div e ancestral de todos os elementos mostrados na árvore.
Elemento div (topo): é filho e descendente do elemento body. É pai dos elementos h1 e ul. É ancestral dos três elementos li e dos três elementos a.
Elemento ul: é pai dos três elementos li e ancestral dos três elementos a. É filho de div (topo) e descendente de body.

Seletor descendente e seletor filho

O seletor descendente seleciona um conjunto de elementos que se enquadram em determinada hierarquia de descendência. Caracteres de espaço em branco são utilizados para indicar a hierarquia da descendência. Por exemplo, a regra CSS a seguir formata a cor do texto de todos os elementos p descendentes de algum elemento div.

  div p { color: red }

Quando aplicada ao documento anterior, a regra CSS do útimo exemplo formata os dois elementos p presentes no documento já que ambos são descendentes de algum elemento div:

Visualização da regra CSS aplicada ao documento

Já no próximo exemplo, a regra CSS aplica formatação aos elementos p descendentes de blockquote e que por sua vez devem ser descendentes de algum div. Repare que, neste caso, apenas o segundo parágrafo foi formatado com base na regra CSS.

  div blockquote p { color: red }

O seletor filho é semelhante ao seletor descedente, mas tem efeito apenas sobre elementos filhos. O símbolo > (maior que) é utilizado para indicar a relação pai-e-filho. O seguinte exemplo aplica formatação aos elementos p filhos de algum elemento div. Repare que, para o documento anterior, apenas um dos elementos p recebe a formatação (o elemento p filho de blockquote não se enquadra no seletor e portanto não é formatado).

  div > p { color: red }

Pseudoclasses

As pseudoclasses permitem a criação de seletores que fogem da hierarquia determinada pela árvore de elementos, proporcionando a definição de regras CSS mais ricas. Podem ocupar qualquer posição no seletor.

:first-child

Refere-se ao elemento que é o primeiro filho de determinado elemento. Por exemplo, a regra a seguir aplica o estilo aos parágrafos descendentes do elemento com id idual a x e que também sejam primeiro-filho de algum elemento.

  #x p:first-child { color: red }

Quando aplicada ao HTML a seguir, são formatados apenas os parágrafos com o texto Um e A.

  <div id="x">
    <p>Um</p>
    <p>Dois</p>
    <div>
      <p>A</p>
      <p>B</p>
    </div>
  </div>

Caso esta mesma regra fosse aplicada ao próximo código HTML, nenhum elemento receberia a formatação do estilo pois o primeiro filho da div não é um parágrafo.

  <div id="x">
    <h1>Um</h1>
    <p>Dois</p>
  </div>

:link e :visited

Estas pseudoclasses são utilizadas para estilização de links não-visitados (:link) e links visitados (:visited).

São pseudoclasses aplicáveis apenas ao elemento a e que contenham o atributo href. Desta forma, o elemento a pode ser omitido ao utilizar uma destas pseudoclasses. As duas regras CSS a seguir são equivalentes e produzem o mesmo efeito:

  a:link { color: red }
  :link  { color: red }

Como as pseudoclasses podem ocupar qualquer posição de um seletor, as regras a seguir são válidas e equivalentes:

  a.externo:link { color: red }
  .externo:link  { color: red }
  a:link.externo { color: red }
  :link.externo  { color: red }

:hover, :active e :focus

São pseudoclasses dinâmicas baseadas na interação do usuário com o elemento.

:hover refere-se ao momento em que o ponteiro do mouse aponta para o elemento.
:active refere-se ao momento em que o ponteiro do mouse ativa (clica) o elemento.
:focus refere-se ao momento em que o elemento recebe o foco. Note que nem todos os elemento em uma página HTML são capazes de receber foco.

O código a seguir ilustra o uso destas três pseudoclasses. Utilize-o para criar uma página web e observe os resultados. Utilize a tecla TAB para mudar o foco dos elementos.

  <html>
    <head>
      <style type="text/css">
        #t1:hover  { background-color: pink }
        #t2:active { font-style: italic }
        #l1:focus  { border: solid red 5px }
      </style>
    </head>
    <body>
      <h1 id="t1">Título 1</h1>
      <h1 id="t2">Título 2</h1>
      <p><a id="l1" href="#">Link 1</a></p>
      <p><a href="#">Link 2</a></p>
    </body>
  </html>

Pseudo-elementos

Assim como as pseudoclasses, os pseudo-elementos possibilitam a definição de seletores com elementos que não estão presentes na árvore de elementos, enriquecendo as regras CSS. Diferentemente das pseudoclasses, os pseudo-elementos devem ser declarados no final do seletor.

:first-line - permite a estilização da primeira linha do texto contido em elementos em nível de bloco, elementos inline, rótulos de tabela e células de tabela.
:first-letter - permite a estilização da primeira letra do texto contido em um elemento em nível de bloco. Para que seja aplicado, não poderá haver conteúdo antes do início do texto. Este é um efeito tipográfico conhecido como capitalização inicial.
:before e :after - permitem, junto com a propriedade content, a inserção de conteúdo antes (before) ou após (after) o elemento alvo do seletor.

O exemplo a seguir ilustra o uso destes pseudo-elementos

  <html>
    <head>
      <style type="text/css">
        body:before { content: "INÍCIO" }
        body:after { content: "FIM" }
        p { width: 300px }
        #p1:first-line{ 
          font-style: italic;
          font-size: 200%;
        }
        #p2:first-letter{
          font-size: 200%;
          background-color: pink;
        }
      </style>
    </head>
    <body>
      <p id="p1">
      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.
      </p>
      <p id="p2">
      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.
      </p>
    </body>
  </html>

Seletor atributo

Faz com que a seleção de elementos seja restrita pela presença de um atributo. Colchetes são utilizados para definir o atributo que deve estar presente. A regra CSS no próximo exemplo aplica o estilo a todos os elementos p que contenham o atributo lang.

  p[lang] { color: red }
  
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  <p lang="eng">The quick brown fox jumps over the lazy dog.</p>

Também é possível limitar a seleção com base no valor do atributo. O próximo exemplo aplica o estilo apenas aos elementos p cujo valor do atributo lang seja igual a en.

  p[lang=en] { color: red }
  
  <p lang="la">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  <p lang="en">The quick brown fox jumps over the lazy dog.</p>

Exercícios

1) Desenhe a árvore de elementos para o seguinte código HTML:

  <body>
    <div id="principal">
      <h1>DIATINF</h1>
      <h2>Cursos Técnicos</h2>
      <ul>
        <li><a href="ti.html">Informática</a></li>
        <li>Informática para Internet</li>
        <li>Manutenção e Suporte em Informática</li>
        <li>Administração</li>
      </ul>
    </div>
    <div id="contato">
      <p>E-mail: diatinf@ifrn.edu.br</p>
      <p>Fone: 4005-2637</p>
    </div>
  </body>

2) Descreva o conjunto de elementos selecionados por cada um dos seletores a seguir:

.noticia p
#menu > ul
div.corpo a
img.mapa:hover

3) Aplique estilos para deixar o arquivo exercicio3.html semelhante à figura abaixo. ATENÇÃO: não modifique as tags HTML. Apenas crescente regras CSS à folha de estilo incorporada já presente no documento.

Referências

SILVA, Maurício Samy. Construindo sites com CSS e (X)HTML: sites controlados por folhas de estilo em cascata. São Paulo: Novatec, 2008.

Diretoria Acadêmica de Gestão e Tecnologia da Informação

Disciplina de Design Web e Arquitetura da Informação