Tags descendentes em HTML
Bem no início de nosso curso de HTML, falamos sobre as tags aninhadas, e mostramos como funciona a hierarquia das tags em um documento .html, que possui tags dentro de outras tags.Se você também estudou o tutorial no início do curso sobre indentação e hierarquia de tags, vai entender fácil o conceito de descendência, pois está intimamente relacionado com a forma que você dispõe as tags dentro de seu documento HTML.
Vejamos um exemplo de código HTML:
<html> <head> <title>Tutorial de CSS: Tags descendentes</title> <link rel="stylesheet" type="text/css" href="estilo.css"/> </head> <body> </body> </html>
Note a hierarquia.
A tag principal é a <html>, diretamente dela temos duas tags, a <head> e a <body>.
Então a head e a body são tag descendentes da tag html.
Vamos chamar a tag html de tag pai, ou tag ancestral.
Agora vamos entrar na <head>.
É fácil ver que de dentro dela temos duas tags: <title> e a <link>.
Ou seja, as tags title e link são descendentes da tag head, pois estão dentro dela.
Chamemos a head de tag pai ou ancestral.
Por fim, se a title e a link estão dentro da tag head, também estão dentro da tag html.
Logo, <title> e <link> também são tags descendentes da tag <html>.
Bem óbvio e simples, não?
Essa hierarquia e descendência é ferramenta muito poderosa para aplicarmos estilos com CSS a determinadas tags descendentes, que é o que veremos de agora em diante neste tutorial de CSS.
Seletores Descendentes em CSS
Os seletores descendentes servem para aplicar estilo CSS somente em tags específicas que são descendentes de outras tags que vamos especificar também.
A sintaxe para o uso de descendent selectors em CSS é:
tag-Ancestral tag-Descendente { regras: CSS; }
Ou seja, a "tag-Descendente" está dentro, aninhada, da "tag-Ancestral".
Você pode ter milhões de tags do tipo "tag-Descendente" em vários documentos .html, mas somente as que estiverem dentro da tag "tag-Ancestral" é que vão receber o estilo.
Exemplo de uso de Seletores Descendentes em CSS
Vamos criar um site básico, dividido em três partes: o cabeçalho (header), o conteúdo (content) e o rodapé (foot), através de divisões com a tag <div>.Nosso código HTML fica:
<!DOCTYPE html> <html> <head> <title>Tutorial de CSS - Seletores Descendentes</title> <meta name="description" content="Tutorial de CSS sobre descendent selectors"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="estilo.css"/> </head> <body> <div id="header"> <h1>Este cabeçalho h1 está no cabeçalho</h1> </div> <div id="content"> <h1>Este cabeçalho h1 está no conteúdo</h1> </div> <div id="foot"> <h1>Este cabeçalho h1 está no rodapé</h1> </div> </body> </html>
Note que existem três tags de cabeçalho H1.
Vamos colocar na cor vermelha as tags de cabeçalho H1, o código CSS é bem simples:
h1 { color: red; }
Mas, e se quisermos que somente a tag H1 do conteúdo seja vermelho?
Poderíamos identificar ela, colocando um seletor do tipo ID ou CLASS, mas fazer isso em todas as páginas de um site daria muito trabalho.
A saída é usar seletores descendentes.
Note que o H1 que queremos estilizar com CSS está dentro da div do tipo "content", como usamos ID dentro desta div, temos que usar o # antes do "content". Veja como fica o código CSS:
#content h1 { color: red; }
Ou seja, somente as tags h1 que estão dentro (descendentes) da #content é que ficarão da cor vermelha.
E se quisermos que todas as tags H1 sejam azuis, e somente a do conteúdo seja vermelha?
Ora, primeiro aplicamos a regra para deixar todos os H1 em azul, em seguida a regra CSS para deixar os H1 que estão dentro da div "content" em vermelho.
Nossa folha de estilos será estilo.css:
h1 { color: blue; } #content h1 { color: red; }
Vamos para um outro exemplo.
Vamos escrever "Tutorial de CSS do HTML Progressivo" dentro de uma tab H2 e fora.
Em ambos casos, queremos que a sigla CSS esteja em itálico.
Agora o mais importante: somente a palavra CSS que está dentro da tag H2 deve ser da cor amarela.
O código HTML para este trecho de nosso site é:
<h2>Tutorial de <i>CSS </i> do HTML Progressivo</h2> <p>Tutorial de <i>CSS </i> do HTML Progressivo</p>
E o código CSS de nossa folha de estilos se torna:
h2 i{ color: yellow; }
Assim, só a tag i que está dentro da tag h2 é que vai ser estilizada.
Teste, rode e veja o resultado.
Assim, vemos que, através do uso de Seletores Descendentes em CSS, podemos atingir o elemento específico X que está dentro da tag Y, de modo que todos os elementos X que estão fora da tag Y não sejam afetados.
Nenhum comentário:
Postar um comentário