1. Seletores Compostos –
CSS
Style Sheet
Professor: Jolvani
Aula 06 e 07

2. Seletores Compostos- CSS
 Olá, Na aula passada vimos os seletores simples (universal,
seletor elemento, classe, id, seletor atributo) ...
 Nesta aula vamos conhecer os seletores compostos.
 Seletor Simples: composto por um único “seletor”
 Composto: contém mais de um seletor...
 Iniciamos Removendo todos os seletores e deixando nossa
página no formato padrão do browser.
 Seletor Composto Descendente: Aplicado no elemento do
documento que descende de outro.

3. Seletores Compostos- CSS
 Ex: <em> esta dentro diretamente de <p> e também esta dentro
indiretamente de <div>
 Alcançar todo elemento <em> dentro de uma <div> não precisa estar
diretamente dentro de <div>
 Seletores Composto filho – “Precisa estar diretamente dentro”
 Informa a posição ou caminho correto da localização do elemento filho.
 Usando o sinal de > (maior)
 Ex: Somente será aplicado se o <em> estiver dentro da <div> veja o
resultado.

4. Seletores Compostos- CSS
 Seletor Irmão Adjacente: Aplicado diretamente após, ou a próxima tag
depois do irmão.
 Ex:
 Com mais uma tag (irmão);
 Aplicou a primeira tag <h2> depois de <p>

5. Seletores Compostos- CSS
 Nesta aula conhecemos os três tipos de seletores compostos:
 Seletores descendentes;
 Seletor filhos;
 Seletores Irmão Adjacentes.

6. Pseudo Seletores – CSS – Aula 07
 Na aula anterior vimos Seletores compostos (seletores descendente, filhos
e irmãos), agora Pseudo Seletores (pseudo elementos e pseudo classes)
 Na w3school encontramos as pseudo classes e pseudo elementos
 Esses componentes permitem estilizar informações inacessíveis na
“árvore” do documento html.
 Pseudo Classe – ocupa qualquer posição do seletor
 Pseudo Elemento – deve ser colocado após o último seletor simples.

7. Pseudo Seletores – CSS – Aula 07
 Modificamos nossa Aula04.html para:
 Queremos criar um estilo css para o primeiro filho do <div>, ou seja dos
elementos <h1>, <h2>, <p> dentro do <div>. Qual o elemento “primeiro filho” o
<h1>.

8. Pseudo Classes – CSS – Aula 07
 Alterando nosso estilo.css
 Alterar somente se h1 for o primeiro filho, usa-se a pseudo classe
denominada “first-child”.
 Se usarmos h2 veja o que acontece... (h2 é primeiro filho?)

9. Pseudo Classes – CSS – Aula 07
 Vamos alterar nosso html, para links visitados e não visitados
 Por padrão o browser marca em roxo o link visitado, e o não visitado fica
em azul. Podemos marcar os links não visitados, vejamos. (estilo.css)
 E na tag visitada usamos a pseudo classe “visited”.

10. Pseudo Classes – CSS – Aula 07
 Vamos alterar nosso html, agora para label e input text.
 Pseudo classes dinâmicas... Ocorre quando eu passar o mouse por um
elemento, dar o foco para ele, etc...
 Porem queremos que ele fique em amarelo somente quando passarmos o
mouse no elemento. Usamos pseudo classe focus.

11. Pseudo Classes – CSS – Aula 07
 Porem queremos que ele fique em amarelo somente quando passarmos o
mouse no elemento. Usamos pseudo classe focus.
 Somente quando clicar no elemento (irá receber o foco)
 Pseudo classe hover no elemento label, ao passar o mouse sobre ele
Vejamos:

12. Pseudo Classes – CSS – Aula 07
 Podemos ainda colocar como se estivesse ativando a label, ou o link.

13. Pseudo Classes – CSS – Aula 07
 Adicionamos ao link, o atributo lang que adiciona a língua que será
adotada para o conteúdo.
 Com a pseudo classe lang.

14. Pseudo Elementos – CSS – Aula 08
 Alteramos nossa Aula04.html com um elemento em bloco <p>
 Usaremos o pseudo elemento first-line que aplica o efeito na primeira
linha da tag, mas essa tag tem que ser um elemento em bloco.
Dependendo do tamanho da linha seu efeito pode mudar observe...
 Aumentar o tamanho do browser....

15. Pseudo Elementos – CSS – Aula 08
 Aplicar efeito a primeira letra do texto do elemento de bloco first-letter
 Não podendo ter imagens anteriormente, Ex: Capitular.
 Pseudo elementos Before e After: destinam-se a inserir conteúdo no
documento. Então vamos adicionar no final do conteúdo algum texto....

16. Pseudo Elementos – CSS – Aula 08
 Inserindo no fim do texto: after:
 Inserindo no inicio do texto: before:
 Também podemos adicionar imagens, e vários outros tipos de conteúdos.
 Na w3schools vc pode encontrar tudo isso + em CC References.

17. Próxima Aula: Efeito Cascata e Herança