aula 06, 07 e 08 seletores compostos e pseudo seletores
TRANSCRIPT
![Page 1: Aula 06, 07 e 08 seletores compostos e pseudo seletores](https://reader033.vdocuments.net/reader033/viewer/2022051314/559e6c801a28abd1458b474a/html5/thumbnails/1.jpg)
Seletores Compostos –
CSS
Style SheetProfessor: Jolvani
Aula 06 e 07
![Page 2: Aula 06, 07 e 08 seletores compostos e pseudo seletores](https://reader033.vdocuments.net/reader033/viewer/2022051314/559e6c801a28abd1458b474a/html5/thumbnails/2.jpg)
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.
![Page 3: Aula 06, 07 e 08 seletores compostos e pseudo seletores](https://reader033.vdocuments.net/reader033/viewer/2022051314/559e6c801a28abd1458b474a/html5/thumbnails/3.jpg)
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.
![Page 4: Aula 06, 07 e 08 seletores compostos e pseudo seletores](https://reader033.vdocuments.net/reader033/viewer/2022051314/559e6c801a28abd1458b474a/html5/thumbnails/4.jpg)
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>
![Page 5: Aula 06, 07 e 08 seletores compostos e pseudo seletores](https://reader033.vdocuments.net/reader033/viewer/2022051314/559e6c801a28abd1458b474a/html5/thumbnails/5.jpg)
Seletores Compostos- CSS
Nesta aula conhecemos os três tipos de seletores compostos:
Seletores descendentes;
Seletor filhos;
Seletores Irmão Adjacentes.
![Page 6: Aula 06, 07 e 08 seletores compostos e pseudo seletores](https://reader033.vdocuments.net/reader033/viewer/2022051314/559e6c801a28abd1458b474a/html5/thumbnails/6.jpg)
Pseudo Seletores – CSS – Aula 07
Na aula anterior vimos Seletores compostos (seletores descendente, filhose 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.
![Page 7: Aula 06, 07 e 08 seletores compostos e pseudo seletores](https://reader033.vdocuments.net/reader033/viewer/2022051314/559e6c801a28abd1458b474a/html5/thumbnails/7.jpg)
Pseudo Seletores – CSS – Aula 07
Modificamos nossa Aula04.html para:
Queremos criar um estilo css para o primeiro filho do <div>, ou seja doselementos <h1>, <h2>, <p> dentro do <div>. Qual o elemento “primeiro filho” o<h1>.
![Page 8: Aula 06, 07 e 08 seletores compostos e pseudo seletores](https://reader033.vdocuments.net/reader033/viewer/2022051314/559e6c801a28abd1458b474a/html5/thumbnails/8.jpg)
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?)
![Page 9: Aula 06, 07 e 08 seletores compostos e pseudo seletores](https://reader033.vdocuments.net/reader033/viewer/2022051314/559e6c801a28abd1458b474a/html5/thumbnails/9.jpg)
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”.
![Page 10: Aula 06, 07 e 08 seletores compostos e pseudo seletores](https://reader033.vdocuments.net/reader033/viewer/2022051314/559e6c801a28abd1458b474a/html5/thumbnails/10.jpg)
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.
![Page 11: Aula 06, 07 e 08 seletores compostos e pseudo seletores](https://reader033.vdocuments.net/reader033/viewer/2022051314/559e6c801a28abd1458b474a/html5/thumbnails/11.jpg)
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:
![Page 12: Aula 06, 07 e 08 seletores compostos e pseudo seletores](https://reader033.vdocuments.net/reader033/viewer/2022051314/559e6c801a28abd1458b474a/html5/thumbnails/12.jpg)
Pseudo Classes – CSS – Aula 07
Podemos ainda colocar como se estivesse ativando a label, ou o link.
![Page 13: Aula 06, 07 e 08 seletores compostos e pseudo seletores](https://reader033.vdocuments.net/reader033/viewer/2022051314/559e6c801a28abd1458b474a/html5/thumbnails/13.jpg)
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.
![Page 14: Aula 06, 07 e 08 seletores compostos e pseudo seletores](https://reader033.vdocuments.net/reader033/viewer/2022051314/559e6c801a28abd1458b474a/html5/thumbnails/14.jpg)
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....
![Page 15: Aula 06, 07 e 08 seletores compostos e pseudo seletores](https://reader033.vdocuments.net/reader033/viewer/2022051314/559e6c801a28abd1458b474a/html5/thumbnails/15.jpg)
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....
![Page 16: Aula 06, 07 e 08 seletores compostos e pseudo seletores](https://reader033.vdocuments.net/reader033/viewer/2022051314/559e6c801a28abd1458b474a/html5/thumbnails/16.jpg)
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.
![Page 17: Aula 06, 07 e 08 seletores compostos e pseudo seletores](https://reader033.vdocuments.net/reader033/viewer/2022051314/559e6c801a28abd1458b474a/html5/thumbnails/17.jpg)
Próxima Aula: Efeito Cascata e Herança