Tableless.com.br

Visie Padrões Web

Tabela de Compatibilidade de CSS

Seletores
Seletor	IE 6	IE 7	FF 2	Opera 9	Safari 2	CSS
Seleciona elementos com uma CLASS determinada. `div.nomedaclasse {color:blue;}`	Sim	Sim	Sim	Sim	Sim	2
Seleciona um elemento com várias classes. `<div class="classe1 classe2"> div.classe1.classe2 {color:red;}`	Com BUG	Sim	Sim	Sim	Sim	2
Seleciona elementos com uma ID determinada. `div#nomedaID {color:blue;}`	Sim	Sim	Sim	Sim	Sim	2
Seletor UNIVERSAL. Seleciona todos os elementos. `* {margin:0;}`	Sim	Sim	Sim	Sim	Sim	2.1
Seleciona todos os elementos selecionados. No caso DIV. `div {color:red;}`	Sim	Sim	Sim	Sim	Sim	2.1
Seletor encadeado (ou descendente) `div p {color:red;}`	Sim	Sim	Sim	Sim	Sim	2.1
Seleciona filho direto do pai. `div > p {color:red;}`	Não	Sim	Sim	Sim	Sim	2
Seletor Adjacente Direto Este seletor pega apenas o elemento que vem imediatamente depois do outro. Neste caso, pega o P que vem imediatamente depois do DIV. `div + p {color:blue;}`	Não	Sim	Sim	Sim	Sim	2
Seletor Adjacente Indireto Este seletor pega todos os elementos que vem depois de um outro elemento determinado (o caso, todos os P que vem depois do DIV) `div ~ p {color:blue;}`	Não	Sim	Sim	Sim	Sim	2
Seleção por atributo. Seleciona elementos que tem um determinado atributo. `input[type] {border:1px solid black;}`	Não	Sim	Sim	Sim	Sim	2
Seleção por valor de atributo. Seleciona elementos que tem um atributo com valor especifico. `input[type=text] {border:1px solid black;}`	Não	Sim	Sim	Sim	Sim	2
Seleciona elementos com atributos cujo os valores são separados por espaços. `<rel="copyright copyleft copyeditor"> a[rel~="copyright"] {color:black;}`	Não	Sim	Sim	Sim	Sim	2
Seleciona elementos cujo valor do atributo seja igual ou inicie com o valor. `<hreflang="en=us"> link[hreflang\|="en"] {color:blue;}`	Não	Sim	Sim	Sim	Sim	2
Seleciona elementos com atributos cujo valor comece com... `a[href^=http://visie.com.br] {color:red;}`	Não	Sim	Sim	Não	Sim	2
Seleciona elementos com atributos cujo valor contenha... `a[href="visie"] {color:red;}`	Não	Sim	Sim	Não	Sim	2
Seleciona elementos com atributos cujo valor termine com... `a[href$=html] {color:red;}`	Não	Sim	Sim	Não	Sim	2

Recomendados para SELETORES

Pseudo-Classes
Seletor	IE 6	IE 7	FF 2	Opera 9	Safari 2	CSS
Para links normais. `a:link {color:blue;}`	Sim	Sim	Sim	Sim	Sim	2
:Para links visitados `a:visited {color:purple;}`	Sim	Sim	Sim	Sim	Sim	2
Quando o mouse passa em cima do elemento. Pode ser aplicado a qualquer elemento além do LINK. `div:hover {background:gray;}`	Parcial Só funciona com links.	Sim	Sim	Sim	Sim	2
Aplicado quando o elemento é ativado (quando você pressiona e segura o botão do mouse). `a:active {color:orange;}`	Parcial	Parcial	Sim	Sim	Sim	2
Seleciona quando o elemento recebe foco. Por exemplo quando você clica em um input. `input:focus {border:1px solid black;}`	Não	Não	Sim	Sim	Sim	2
Modifica o link que houver um ID igual ao target do URL. `<a href="#link1" id="link1"> a:target {background:red;}`	Não	Não	Sim	Não	Sim	3
Seleciona os elementos que contiverem o atributo LANG com um determinado valor. `<p lang="pt-br">Texto</p> p:lang {background:red;}`	Não	Não	Sim	Não	Não	3
O :root seleciona o elemento que é a RAIZ dos elementos. Que envolve todos os elementos. No HTML sempre será a tag <HTML>. Mas lembre-se, o CSS pode ser usado em XMLs, logo, o root pode variar. `:root div#filho {color:red;}`	Não	Não	Sim	Não	Sim	3
Seleciona o primeiro elemento que é o primeiro filho de um outro elemento. No caso, o primeiro P. `div p:first-child {background:red;}`	Não	Sim	Sim	Sim	Sim	3
Seleciona o último elemento de dentro de um outro elemento. No caso, o último P. `div p:last-child {background:red;}`	Não	Não	Sim	Não	Sim	3
Seleciona um elemento vazio, que não tem nada dentro dele. `p:empty`	Não	Não	Incorreto Ele aplica apenas para elementos que contém espaços em branco.	Não	Sim	3
Exclui um determinado elemento do estilo. `button:not([DISABLED])`	Não	Não	Sim	Não	Sim	3

Links para PSEUDO-CLASSES

Pseudo-Elementos
Seletor	IE 6	IE 7	FF 2	Opera 9	Safari 2	CSS
Seleciona a primeira linha do elemento `p:first-line {color:red;}`	Sim	Sim	Sim	Sim	Sim	2.1
Seleciona a primeira letra da frase. `p:first-letter {font:55px verdana;}`	Sim	Sim	Sim	Sim	Sim	2.1
Seleciona o começo do elemento para gerar conteúdo `p:before {content:">>";}`	Não	Não	Sim	Sim	Sim	2.1
Seleciona o final do elemento para gerar conteúdo `p:after {content:" <<";}`	Não	Não	Sim	Sim	Sim	2.1
Formata o elemento quando ele está CHECADO `input:checked`	Não	Não	Sim	Não	Não	3
Modifica o elemento quando ele é selecionado pelo usuário `p:selection`	Não	Não	Não	Não	Sim	3

Links para Pseudo-Elementos