Definimos seletores o mecanismo de seleção que nos permite escolher onde o estilo deve ser aplicado e onde não deve.

Notas :
1-Ao estilizar um item pode ser que outro item seja alterado pelo mesmo seletor. Por este motivo deixei alguns itens da css comentados porque alteraria todos os itens do documento.

Um estilo na CSS pode :

1-Seletor Global : Altera todos os elementos do tipo selecionado pelo seletor no documento HTML.:


Como definimos:
   p {
      color: red;
   }

Texto antes da tag p<p>Texto dentro da tag p</p>Texto depois da tag p.

Como o browser exibe :
Texto antes da tag p

Texto dentro da tag p

Texto depois da tag p.

---

2-Seletor por classe : Aplicamos o estilo via classe do elemento.
   Com este tipo de seletor podemos aplicar o estilo apenas nos itens que desejar-mos.
Para isso, a definicção do seletor deve iniciar com o caractere "." seguido do valor correspondente mas lembre-se que na utilização da classe não usamos o ponto.

Como definimos:
        Exemplo de aplicação: <p class="roxinho">Aplicação de estilo pela classe.</p><br />

Como o browser exibe:
Exemplo de aplicação:

Aplicação de estilo pela classe.

---

3-Seletor Único : Aplicando um estilo via id do elemento.
   É possível aplicar propriedades visuais a um elemento selecionado pelo valor de seu atributo id.
Para isso, o seletor deve iniciar com o caractere "#" seguido do valor correspondente.


Como definimos:
   #cabecalho {
      color: blue
      text-align: center;
   }

<p id="cabecalho">Teste1.</p>



Como o browser exibe:
Exemplo de aplicação:

Teste1.

   O seletor acima fará com que o elemento do nosso HTML que tem o atributo id com valor "cabecalho" tenha seu texto renderizado na cor coral e centralizado.
Note que não há nenhuma indicação para qual tag a propriedade será aplicada mas sim pelo id.
Pode ser tanto a tag A quanto a tag B, até mesmo tags sem conteúdo como uma imagem , desde que essa tenha o atributo id com o valor "cabecalho".
   Como o atributo id deve ter valor único no documento, o seletor deve aplicar suas propriedades declaradas somente àquele único elemento e, por cascata, a todos os seus elementos filhos.

---

Seletor Hierárquico :

3-Seletor Hierárquico filha. Formato : #id tagFilha :
   Podemos ainda utilizar um seletor hierárquico que permite aplicar estilos aos elementos filhos de um elemento pai:

      #rodape img {
         margin-right: 30px;
         vertical-align: middle;
         width: 150px;
      }

   <span id="rodape">
      Tag AfetadaRodape
      <img src="mirror fashion/img/familia-pelho.jpg" />
   </span>

Exemplo de aplicação da css :
Tag AfetadaRodape
No exemplo anterior, o elemento pai rodape é selecionado pelo seu id .
O estilo será aplicado apenas nos elementos img filhos do elemento com id=rodape .

---

Seletor de irmãos (siblings) - afeta todas as tags irmãs

4-Seletor irmãos. Formato : tag ~tagIrmã(s) :
Veja o seguinte HTML, que simula um texto com vários parágrafos, títulos e subtítulos no meio do documento:

   <article>
      <h1>Título</h1>
      <p> Início</p>
      <h2> Subtítulo</h2>
      <p>Texto</p>
      <p>Mais texto</p>
    </article>

   Como faremos se quisermos estilizar de uma certa maneira todos os parágrafos após o subtítulo?
   O seletor de irmãos (siblings) ( ~ ) serve pra isso! Ele vem do CSS3 e funciona em todos os navegadores modernos (e no IE7 pra frente).

   h2 ~ p {
      font-style: italic;
      color: green;
   }

   Isso indica que queremos selecionar todos as tags p que foram precedidos por algum h2 e são irmãos do subtítulo (ou seja, estão sob a mesma tag pai).
No HTML anterior, serão selecionados os dois últimos parágrafos (Texto e Mais texto).
Exemplo utilização :

Título

Início (afetada pela tag do item 1)

Subtítulo

Texto

Mais texto

---

Seletor de irmã adjacente

5-Seletor irmã adjacente. Formato : tag +tagIrmã :
Ainda com o HTML anterior, o que fazer se quisermos selecionar apenas o parágrafo imediatamente seguinte ao subtítulo? Ou seja, é um p irmão do h3 mas que aparece logo na sequência:

   <article>
      <h3>Título</h3>
      <p> Início</p>
      <h4> Subtítulo</h4>
      <p>Texto</p>
      <p>Mais texto</p>
   </article>

   Fazemos isso com o seletor de irmão adjacente - adjacent sibling (+) :

   h4 + p {
      font-variant: small-caps;
      color: purple;
   }

   Nesse caso, apenas o parágrafo Texto será selecionado.
É um irmão de h4 e aparece logo depois do mesmo.
Esse seletor faz parte da especificação CSS2.1 e tem bom suporte nos navegadores modernos, incluindo o IE7.
Exemplo utilização :

Título

Início

Subtítulo

Texto

Mais texto

Importante : Apenas a primeira tag adjacente é afetada...as demais não.

---

Seletor de filho direto

6-Seletor filha direta. Formato : tag >tagIrmã :
   Se tivermos o seguinte HTML com títulos e seções de um artigo:

   <article>
      <h1>Título principal</h1>
      <h5>Depois do h5 titulo</h5>
      <section>
         <h5>Título da seção1</h5>
         <h5>Título da seção2</h5>
         <h6>Titulo da sub-seção 3</h6>
         <h5>Título da seção4</h5>
      </section>
</article>

   Queremos deixar apenas o título principal de outra cor. Como fazer? O seletor de nome de tag simples não vai resolver:

/* vai pegar todos os h1 da página */
   h1 {
      color: purple;
   }

   Tentar o seletor de hierarquia também não vai ajudar:
/* vai pegar todos os h1 do article, incluindo o de dentro da section */
   article h1 {
      color: purple;
   }

   Entra aí o seletor de filho direto ( > ) do CSS2.1 e suportado desde o IE7 também.

/* vai pegar só o h1 principal, filho direto de article e não os netos */
   article > h5 {
      color: purple;
   }

Título principal

Depois do h5 titulo

Título da seção1

Título da seção2

Titulo da sub-seção 3

Título da seção4

---

Negação

7-Seletor Negação. Seleciona todas que não forem do tipo. Formato : tag :not :
   Imagine o seguinte HTML com vários parágrafos simples:

   <p>Texto</p>
   <p>Outro texto</p>
   <p>Texto especial</p>
   <p>Mais texto</p>

   Queremos fazer todos os parágrafos de cor cinza, exceto o que tem o texto especial.
   Precisamos destacá-lo de alguma forma no HTML para depois selecioná-lo no CSS. Uma classe ou ID resolve:

   <p>Texto</p>
   <p> Outro texto</p>
   <p class="especial" >Texto especial</p>
   <p>Mais texto</p>

   Mas como escrever o CSS? Queremos mudar a cor dos parágrafos que não têm a classe especial.
   Um jeito seria mudar a cor de todos e sobrescrever o especial depois:

   p {
      color: gray;
   }

   p.especial {
      color: black; /* restaura cor do especial */
   }

   No CSS3, há uma outra forma, usando o seletor de negação.
Ele nos permite escrever um seletor que pega elementos que não batem naquela regra.

   p:not(.especial) {
      color: gray;
   }

   Isso diz que queremos todos os parágrafos que não têm a classe especial. A sintaxe do :not() recebe
como argumento algum outro seletor simples (como classes, IDs ou tags).
Essa propriedade do CSS3 possui suporte mais limitado no IE, somente a partir da versão 9 (nos
outros navegadores não há problemas).
Exemplo de utilização :

Texto

Outro texto

Texto especial

Mais texto

Nota : Esta tag altera todas as demais do documento portanto esta comentada no style acima. Se quiser testar retire os comentários.

---

PSEUDO-CLASSES

8-Pseudo classes - Primeiro e último item.
Pegue o seguinte HTML de uma lista de elementos:

   <ul>
      <li>Primeiro item</li>
      <li>Segundo item</li>
      <li>Terceiro item</li>
      <li>Quarto item</li>
</ul>

   E se quisermos estilizar elementos específicos dessa lista? Por exemplo, o primeiro elemento deve ter cor vermelha e o último, azul.
Com esse HTML simples, usando apenas os seletores que vimos até agora, será bem difícil.
A solução mais comum seria adicionar classes ou IDs no HTML para selecioná-los depois no CSS:

   <ul>
      <li class="primeiro">Primeiro item</li>
      <li>Segundo item</li>
      <li>Terceiro item</li>
      <li class="ultimo">Quarto item</li>
   </ul>

   Agora é fácil usar cores diferentes para o primeiro e último itens da lista.
Mas essa técnica exigiu alteração no HTML e exige que lembremos de colocar a classe correta, no ponto correto, toda vez que fizermos mudanças nos itens da lista.
   O CSS tem um recurso chamado de pseudo-classes que são como classes CSS já pré-definidas para nós.
É como se o navegador já colocasse certas classes por padrão em certos elementos, cobrindo situações comuns como essa de selecionar o primeiro ou o último elemento.
   Há duas pseudo-classes do CSS3 que representam exatamente o primeiro elemento filho de outro (first-child) e o último elemento filho (last-child).
Essas classes já estão definidas, não precisamos aplicá-las em nosso HTML e podemos voltar para o HTML inicial:

   <ul>
      <li>Primeiro item</li>
      <li>Segundo item</li>
      <li>Terceiro item</li>
      <li>Quarto item</li>
   </ul>

   No CSS, podemos usar pseudo-classes quase da mesma forma que usaríamos nossas classes normais.
   Repare que para diferenciar um tipo do outro, mudou-se o operador de ponto para dois pontos:

   li:first-child {
      color: red;
   }

   li:last-child {
      color: blue;
   }

   O suporte a esses seletores é completo nos navegadores modernos.
O first-child vem desde o IE7, Firefox 3 e Chrome 4. E (estranhamente), o last-child só a partir do IE9 mas desde o Firefox 1 e Chrome 1.

Exemplo de utilização :

• Primeiro item
• Segundo item
• Terceiro item
• Quarto item

Nota : Esta tag altera todas as demais do documento portanto esta comentada no style acima. Se quiser testar retire os comentários.

---

NTH-CHILD

9-Pseudo classes - Enésimo item.
   Um seletor ainda mais genérico do CSS3 é o :nth-child() que nos permite passar o índice do elemento.
Por exemplo, podemos pegar o terceiro item com:

   li:nth-child(4) { color: yellow; }

Exemplo de utilização :

• Primeiro item
• Segundo item
• Terceiro item
• Quarto item

Nota : Esta tag altera todas as demais do documento portanto esta comentada no style acima. Se quiser testar retire os comentários.

---

10-Pseudo classes - Itens pares e impares.
   Porém, o mais interessante é que o nth-child pode receber uma expressão aritmética para indicar quais índices selecionar.
É fácil fazer uma lista zebrada, com itens ímpares de uma cor e pares de outra:

/* elementos pares */
   li:nth-child(2n) { color: green; }

/* elementos impares */
   li:nth-child(2n+1) { color: blue; }

O suporte existe a partir do IE9, Firefox 3.5 e Chrome 1.
Nota : O exemplo esta diferente porque este efeito altera todos os demais elementos da página mas esta no style.

Exemplo de utilização: Exemplo de utilização :

• Primeiro item
• Segundo item
• Terceiro item
• Quarto item
• Quinto item

Nota : O exemplo esta diferente porque este efeito altera todos os demais elementos da página mas esta no style.

---

Pseudo classes de estado

11-Pseudo classes de estado : Ativados por eventos ou mudanças
   Queremos mudar a cor de um link quando o usuário passa o mouse por cima.
   Ou seja, queremos mudar seu visual a partir de um evento do usuário (no caso, passar o mouse em cima).
   Uma solução ingênua seria criar um código JavaScript que adiciona uma classe nos links quando o evento de mouseover acontece (e remove a classe no mouseout).
   Entretanto, o CSS possui excelentes pseudo-classes que representam estados dos elementos e, em especial, uma que representa o momento que o usuário está com o mouse em cima do elemento, a

      :hover.

   É como se o navegador aplicasse uma classe chamada hover automaticamente quando o usuário passa o mouse em cima do elemento e depois retirasse a classe quando ele sai.
Tudo sem precisarmos controlar isso com JavaScript.

/* seleciona o link no exato momento em que passamos o mouse por cima dele */
   h6:hover {
      background-color:#FF00FF;
   }

   Podemos usar hover em todo tipo de elemento, não apenas links. Mas os links ainda têm outras pseudo-classes que podem ser úteis:

/* seleciona todas as âncoras que têm o atributo "href", ou seja, links */
   a:link {
      background-color:#FF0000;
   }

/* seleciona todos os links cujo valor de "href" é um endereço já visitado */
   a:visited {
      background-color:#00FF00;
   }

/* seleciona o link no exato momento em que clicamos nele */
   a:active {
      background-color:#0000FF;
   }

Exemplo de utilização :

Teste

---

PSEUDO ELEMENTOS

12-Pseudo classes : Primeira letra
   Pseudo-classes nos ajudam a selecionar elementos com certas características sem termos que colocar uma classe manualmente neles.
Porém, o que fazer quando precisamos selecionar certo tipo de conteúdo que nem elemento tem?
Exemplo: temos um texto num parágrafo:

<p>Estudar é a melhor maneira de aprender.</p>

   Queremos dar um estilo de revista ao nosso texto e estilizar apenas a primeira letra da frase com uma
fonte maior. Como fazer para selecionar essa letra? A solução ingênua seria colocar um elemento ao redor da letra para podermos selecioná-la no CSS:

<p><span>E</span> studar é a melhor maneira de aprender.</p>

Essa solução deixa o HTML confuso e difícil de manter.
   O CSS apresenta então a ideia de pseudo-elementos.
São elementos que não existem no documento mas podem ser selecionados pelo CSS.
É como se houvesse um elemento lá!
   Podemos voltar o HTML inicial:

<p>Estudar é a melhor maneira de aprender.</p>

E no CSS:
   p::first-letter {
      font-size: 200%;
   }


   Temos ainda outro pseudo-elemento para selecionar a primeira linha apenas em um texto grande:
   p::first-line {
      font-style: italic;
   }

Exemplo de utilização :

Estudar é a melhor maneira de aprender.

---

Novos conteúdos

13-Novos conteúdos - Pesonalização de tags para sites de busca
   Há ainda um outro tipo de pseudo-elemento mais poderoso que nos permite gerar conteúdo novo via CSS.
Imagine uma lista de links que queremos, visualmente, colocar entre colchetes:
[ Link 1 ]
[ Link 2 ]
[ Link 3 ]
   Podemos, claro, apenas escrever os tais colchetes no HTML. Mas será que o conteúdo é semântico?
Queremos que esses colchetes sejam indexados pelo Google? Queremos que sejam lidos como parte do texto pelos leitores de tela?
Talvez não. Pode ser um conteúdo apenas visual. Podemos gerá-lo com CSS usando os pseudoelementos after e before.
O HTML seria simples:

<a href="...">Link1</a>
<a href="...">Link2</a>
<a href="...">Link3</a>

E no CSS:
   a:before {
      content: '[';
   }
   a:after {
      content: ']';
   }
   Ou ainda, imagine que queremos colocar a mensagem (externo) ao lado de todos os links
externos da nossa página. Usando pseudo-elementos e seletores de atributo, conseguimos:
   a[href^=http://]:after {
      content: ' (externo)';
   }
Isso pega todos os elementos <a> que começam com http:// e coloca a palavra (externo) depois.
Exemplo de utilização :
Link1
Link2
Link3

---

Caso tenha entendido o que foi explicado acima e precise de um resumo, segue o link para download de um resumo muito bom. Resumo de seletores