Seletores Compostos –

CSS

Style SheetProfessor: Jolvani

Aula 06 e 07

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.

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.

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>

Seletores Compostos- CSS

Nesta aula conhecemos os três tipos de seletores compostos:

Seletores descendentes;

Seletor filhos;

Seletores Irmão Adjacentes.

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.

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>.

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?)

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”.

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.

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:

Pseudo Classes – CSS – Aula 07

Podemos ainda colocar como se estivesse ativando a label, ou o link.

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.

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....

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....

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.

Próxima Aula: Efeito Cascata e Herança