Ir para conteúdo / Skip to content

Seletores CSS que você deveria conhecer

Postado em: 13 de março de 2007 por Pedro Rogério

Com a utilização das CSS para formatar nossas páginas, a cada dia nós vamos descobrindo técnicas novas, e isso acaba nos oferendo um maior controle sobre nosso código sem sobrecarregar o HTML com várias classes e id’s desnecessários. Para conseguirmos essas melhoras, devemos utilizar de seletores, que desta forma podere-mos manipular um ou vários elementos que temos em nosso HTML. Sua função é semelhante as expressões regulares, onde os seletores nos permitem utilizar de caracteres especiais para nos referirmos a um elemento ou a vários deles.

Seletores

 Seletor Descrição
 *  Selector universal, todos os elementos do CSS
 E  E representa qualquer elemento do tipo E (span, p, …)
 E F  Todos os elementos F que sejam descendentes de E
 E > F  Todos os elementos F que sejam filhos de E
 E:first-child  Desta forma podemos selecionar o primeiro elemento do tipo E

 E:link , E:visited

  Selecciona os elementos E que sejam links e que não foram visitados  (:link) e os visitados (:visited)
 E:active , E:hover , E:focus  Seleciona os elementos do tipo E, em suas correspondentes acões.
 E:lang(c)  Todos elementos do tipo E que contenham o idioma (humano) especificado em (c).
 E + F  Se trata de qualquer elemento F imediatamente depois do elemento do tipo E
 E[foo]  Elementos do tipo E que contenham o atributo foo
 E[foo=”exemplo”]  Elementos do tipo E que contenham o atributo foo igual a “exemplo”
 E[foo~=”exemplo”]   Elementos do tipo E com o atributo foo contendo “exemplo”. Pode-se utilizar várias palavras separadas por espaços. ( ~ =ALT + 0126)
 E[lang|=”pt”]   Similar ao exemplo anterior, a única diferença é que aqui se referirá a todos os elemento E que onde o atributo lang começa por “pt”. Por exemplo: “pt_BR”, “pt_PT”,…
 E[foo$=”exemplo”]   Elementos do tipo E onde o atributo foo termina com “exemplo”.
 DIV.exemplo  Todos los elementos DIV que sejam da la classe exemplo
 E#myID  O elemento E onde sua ID é igual a myID

Ampliando os seletores

Além desses seletores, poderemos fazer a utilização de vários outros, os chamados pseudo-elementos.

:first-line

Se refere a primeira linha do elemento, geralmente muito utilizada em textos:


p {font-size: 12pt}
p:first-line {color: #0000FF; font-variant: small-caps}

<p>Some text that ends up on two or more lines</p>

Propriedades

  • font properties
  • color properties
  • background properties
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

:before

Utilizado para inserir conteúdo antes de qualquer elemento:


h1:before { content: url(beep.wav) }

:after

Utilizado para inserir conteúdo depois de qualquer elemento:


h1:after { content: url(beep.wav) }

Pseudo-elementos e Classes CSS

Juntos nos permitem manipular vários seletores para focalizar em um elemento ou um pseudo-elemento em concreto:


p.article:first-letter {color: #FF0000}
<p class="article">A paragraph in an article</p>

Múltiplos pseudo-elementos

Nos permite utilizar vários pseudo-elementos sobre un mesmo elemento:


p {font-size: 12pt}
p:first-letter {color: #FF0000; font-size: 200%}
p:first-line {color: #0000FF}

<p>The first words of an article</p>

Compatibilidade

Pseudo-elemento IE F N W3C
:first-letter 5 1 8 1
:first-line 5 1 8 1
:before   1.5 8 2
:after   1.5 8 2

Esse post é uma adaptação do artigo original de: Anieto2K.

Aprenda com quem sabe de verdade.

Se tiver um tempo, leiam também:

Deixe seu comentário

6 comentários para esse post

  1. Igor Escobar disse: 13.03.07 ás 09:49
    #1

    Bacana amigo porêm existem alguns seletores ai que você apresentou que não funcionam em todos os navegadores como o span[id="teste"] por exemplo.

  2. Micox disse: 13.03.07 ás 10:07
    #2

    É. Talvez seria bom indicar qual funciona em que.

    Falows. Valeus. :)

  3. Tiago Celestino disse: 14.03.07 ás 22:36
    #3

    Estou salvando tudo no del.icio.us, show de bola :P

  4. Rael B. Riolino disse: 15.03.07 ás 08:16
    #4

    Nao entendi direito esse esquema de E e F… o que se refere o F?

  5. Pedro Rogério disse: 15.03.07 ás 15:28
    #5

    Rael,

    E e F são elementos fictícios, só para ilustração, mas funciona da seguinte forma, vou dar um exemplo real: imagine um CSS com essa regra: p span, alí você pode definir valores a todo span que seja descentende de p, entendeu?

  6. Diogo disse: 15.05.07 ás 21:55
    #6

    Faltou os exemplos dos Pseudo-elementos …. uma sugestão colocar depois do código. Facilita pra min, pois lei seus artigos em varios pcs e não posso toda hora ficar testando.

Deixe seu comentário