Seletores Compostos

CSS
Style Sheet
Professor: 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: contm mais de um seletor...

Iniciamos Removendo todos os seletores e deixando nossa

pgina no formato padro 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 tambm esta dentro

indiretamente de <div>

Alcanar todo elemento <em> dentro de uma <div> no precisa estar

diretamente dentro de <div>

Seletores Composto filho Precisa estar diretamente dentro

Informa a posio ou caminho correto da localizao 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 Irmo Adjacente: Aplicado diretamente aps, ou a prxima tag

depois do irmo.

Ex:

Com mais uma tag (irmo);

Aplicou a primeira tag <h2> depois de <p>

Seletores Compostos- CSS

Nesta aula conhecemos os trs tipos de seletores compostos:

Seletores descendentes;

Seletor filhos;

Seletores Irmo Adjacentes.

Pseudo Seletores CSS Aula 07

Na aula anterior vimos Seletores compostos (seletores descendente, filhos

e irmos), agora Pseudo Seletores (pseudo elementos e pseudo classes)

Na w3school encontramos as pseudo classes e pseudo elementos

Esses componentes permitem estilizar informaes inacessveis na

rvore do documento html.

Pseudo Classe ocupa qualquer posio do seletor

Pseudo Elemento deve ser colocado aps 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 dos
elementos <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 no visitados

Por padro o browser marca em roxo o link visitado, e o no visitado fica

em azul. Podemos marcar os links no 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 dinmicas... 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 lngua que ser

adotada para o contedo.

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

No podendo ter imagens anteriormente, Ex: Capitular.

Pseudo elementos Before e After: destinam-se a inserir contedo no

documento. Ento vamos adicionar no final do contedo algum texto....

Pseudo Elementos CSS Aula 08

Inserindo no fim do texto: after:

Inserindo no inicio do texto: before:

Tambm podemos adicionar imagens, e vrios outros tipos de contedos.

Na w3schools vc pode encontrar tudo isso + em CC References.

Prxima Aula: Efeito Cascata e Herana