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.