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