Seletores Compostos –

CSSStyle 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: 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,

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.

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