Rapidinha: CSS – Seletores encadeado

O que é CSS: Folha de estilo em cascata

Para que serve os Seletores Encadeados:
Servem para especificar um objeto que esteja dentro de outro objeto.

Entendendo o Seletores encadeado:

<div>
 <em>Testando Seletores Encadeados</em>
 <p>Estou aprendendo no blog do <em>Thiago Thamiel</em></p>
</div>

Se você quer formatar o texto “Thiago Thamiel” que esta dentro da tag <em> sem formatar o texto “Testando Seletores Encadeados” que também esta dentro da tag <em> você deve utilizar o que chamamos de Seletores encadeado.

Fazendo sem o seletor seria assim: em {color:red;}  
porém estaria aplicando o estilo para todas as tag.

Com o seletor ficaria assim: div p em {color:red;}

No Browser
Para ver o resultado Copie e cole o conteudo abaixo em um bloco de notas e salve como html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
 div p em {color:red;}
</style>
<title>CSS - Seletores Encadeados</title>
</head>
 <body>
 <div>
 <em>Testando Seletores Encadeados</em>
 <p>Estou aprendendo no blog do <em>Thiago Thamiel</em></p>
 </div>
 </body>
</html>
Anúncios


Categorias:Programação

Tags:, , ,

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: