seletores css

SELETORES CSS

Garcia, Diogo

1.SELETORES CSS

O que são os seletores CSS?

O CSS atinge a formatação do código de forma bem abrangente e modular e isto é

feito através dos seletores CSS, estes por sua vez nos permite selecionar diversos

trechos de código e aplicar estilos a eles.

Isto é feito através de um conceito simples aonde utilizamos alguns pontos chaves do

HTML, como âncora para estipular os estilos.

1.1 SELETOR UNIVERSAL

Padrão Significado Exemplo CSS Exemplos HTML

* Qualquer elemento

*{ color: #000000; } Aplicável a todos os elementos

1.2 SELETOR DE TIPO DE ELEMENTO


e Seleciona qualquer elemento <e>

e{ font-family: sans-serif;} <e>...</e>

1.3 SELETOR CONTEXTUAL


e f

Seleciona qualquer elemento <f> que estiver contido num elemento <e>.

h1 em { color: blue; } <e>...<f>...</f>...</e>

http://www.ogenial.com.br/blog/wp-content/uploads/2010/10/seletor-css-imagem1.png

http://www.ogenial.com.br/blog/wp-content/uploads/2010/10/seletor-css-imagem1.png

1.4 SELETOR DE ELEMENTOS FILHO


e > f

Seleciona qualquer elemento <f> descendente direto de um elemento <e>.

body > p { line-height: 1.3; } margin-top: -5mm; } color: blue; } <e>...<f>...</f>...</e>

1.5 SELETOR ADJACENTE


e + f

Seleciona qualquer elemento <f> que estiver imediatamente após um elemento <e>.

h1 + h2 { margin-top: -5mm; } <e>...</e> <f>....<f>

1.6 SELETOR CLASSE


e.classe Seleciona o(s) elemento(s) <e> em que se aplicou a "classe".

h1.pastoral { color: green; } <e class="classe"... />

1.7 SELETOR ID


e# ID Seleciona o elemento <e> identificado com ID.

h1#chapter1 { text-align: center; } <e Id="Id"... />

1.8 AGRUPAMENTO DE SELETORES


e , f

Seleciona os elementos <e> e <f> do agrupamento.

h1, h2 { font-fanily: sans-serif; } <e> ... </e> ... <f> ... </f>

1.9 SELETORES DE ATRIBUTO


e [atrib]

Seleciona o elemento <e> que contenha o atributo indicado.

h1 [title] { color: blue; } <e atrib="valor" .... />


e [atrib="valor"]

Seleciona o elemento <e> com o mesmo atributo e "valor".

span [class=exemplo] { color: blue; } <e> ... </e> ... <f> ... </f>


e [atrib~="valor"]

Seleciona o elemento <e> em que "valor" de atributo

esteja em uma lista de valores separadas por

espaços.

a [rel~="copyright"] { color: red; }

<a rel="copyright copyleft copyditor" ...> .. </a>


e[atrib | ="val"]

Seleciona o elemento <e> em que valor do atributo seja idêntico a "val" ou

inicia-se com "val".

a[lang|"pt"] { color: red; } <e lang="pt-BR" .../>

1.10 PSEUDO-CLASSES


e:first-child

Seleciona o primeiro elemento <e> descendente do elemento-pai.

div > p:first-child { text-indent: 0; }

<p> Último p antes de 'nota' <DIV class="nota"> <p> Primeiro p após nota'. </div>


a:link

Aplica-se ao elemento <a> com hiperlinks ou âncoras

ainda não visitados.

a:linh { color: red; }

<a href="http://endereço. link/ ">link</a>


e:visited

Aplica-se ao elemento <a> com hiperlinks ou âncoras

já visitados.

a: visited { color: blue; }



e:active

Aplica-se ao elemento <e> quando este for ativado pelo

usuario. Aplica-se ao elemento <e>

quando este for ativado pelo usuario.

a: active { color: line; }



e:hover

Aplica-se ao elemento <e> quando o cursor estiver

sobre ele, mas sem ativá-lo.

a: hover { color: yellow; }



e:focus

Aplica-se ao elemento <e> quando o o foco estiver

posicionado nele.

a: focus { background: yellow; }



e:lang(val)

Aplica-se ao elemento <e> se estiver marcado com o idioma

"val"

html:lang(pt) {quotes: '<< ' ' >>';} <e lang="pt" ... />

1.11 PSEUDO-ELEMENTOS


e:first-line

Aplica-se ao elemento à primeira linha do elemento

<e>.

p:first-line { text-transform: uppercase;} <e>...</e>


e:first-letter Aplica-se à primeira letra

do elemento <e>.

p: first-letter { font-size: 3em; font- weight: normal; } <e>...</e>


e:before

Aplica conteúdo especificado em posição anterior ao

elemento <e>.

e: before { content: open-quote; } <e>...</e>


e:after

Aplica conteúdo especificado em posição anterior ao

elemento <e>.

e: after { content: close-quote; } <e>...</e>

Fonte: W3C

Link: http://www.w3c.br/pub/Materiais/PublicacoesW3C/guia-css-w3cbr.pdf

http://www.w3c.br/pub/Materiais/PublicacoesW3C/guia-css-w3cbr.pdf

EXEMPLO DE SELETOR

Para esse exemplo iremos utilizar o seletor e:active, esse seletor aplica-se para

qualquer elemento quando for ativado pelo usuário, no exemplo a seguir iremos utilizar

o elemento <a>.

Quando o usuário clicar no link para acessar a página do google, o mesmo irá mudar

de color no caso LIME, conforme ilustrado no exemplo abaixo:

Código:

Navegador:

seletores css

Documents