Padrao Significado Exemplo CSS Exemplo (X)HTML * Seletor universal: qualquer elemento * { color: #000000; } Aplicavel a todos os elementos e Seletor de tipo de elemento: seleciona qualquer elemento e {font-family: sans-serif;} ... e f Seletor contextual:seleciona qualquer elemento que estiver contido num elemento h1 em { color: blue; } .......... e > f Seletor de elementos-filho: seleciona qualquer elemento descendente direto de um elemento body > p { line-height: 1.3; } ......... e + f Seletor adjacente: seleciona o elemento que estiver imediatamente apos um elemento h1 + h2 {margin-top: -5mm;} ... ... e.classe Seletor de classe: seleciona o(s) elemento(s) em que se aplicou a "classe" h1.pastoral {color: green;} e#Id Seletor de ID: seleciona o elemento identificado com Id h1#chapter1 { text-align: center; } e , f Agrupamento de seletores: Seleciona os elementos e do agrupamento h1, h2 { font-family: sans-serif; } ... ... ... e [atrib] Seletor de Atributo: seleciona o elemento que contenha o atributo indicado h1[title] {color: blue;} e [atrib="valor"] Seletor de Atributo: seleciona o elemento com o mesmo atributo e valor span[class=exemplo] {color: blue;} e [atrib~="valor"] Seletor de Atributo: seleciona o elemento em que valor de atributo esteja em uma lista de valores separadas por espacos a[rel~="copyright"]{ color: red; }? ... e [atrib|="val"] Seletor de Atributo: seleciona o elemento em que valor do atributo seja identico a val ou inicia-se com val *[lang|="pt"] { color: red; } e:first-child Pseudo-classe primeiro filho: seleciona o primeiro elemento descendente do elemento-pai div > p:first-child {text-indent: 0;} Ultimo P antes de 'nota' Primeiro P apos nota'. a:link Pseudo-classe link: aplica-se ao elemento com hiperlinks ou ancoras ainda nao visitados a:link { color: red; } link a:visited Pseudo-classe visited: aplica-se ao elemento com hiperlinks ou ancoras ja visitados a:visited {color: blue;} link e:active Pseudo-classe active: aplica-se ao elemento quando este for ativado pelo usuario a:active { color: lime; } link e:hover Pseudo-classe hover: aplica-se ao elemento quando o cursor estiver sobre ele, mas sem ativa-lo a:hover { color: yellow; } link e:focus Pseudo-classe focus: aplica-se ao elemento quando o foco estiver posicionado nele a:focus { background: yellow; } link e:lang(val) Pseudo-classe lang: aplica-se ao elemento se este estiver marcado com o idioma val html:lang(pt) {quotes: ' ' ' '; } e:first-line Pseudo-elemento first-line: aplica-se a primera linha do elemento p:first-line {text-transform: uppercase; } ... e:first-letter Pseudo-elemento first-letter: aplica-se a primera letra do elemento p:first-letter {font-size: 3em; font-weight: normal;} ... e:before Pseudo-elemento before: aplica conteudo especificado em posicao anterior ao elemento e:before { content: open-quote; } ... e:after Pseudo-elemento after: aplica conteudo especificado em posicao posterior ao elemento e:after { content: close-quote;} ... Notacao Modulo de notacao Padrao Descricao a b a seguido de b ( a b ) a e b agrupados [ a | b ] a ou b [ a || b ] a ou b ou ambos a? a e opcional a* Zero ou varios a a+ Um ou varios a a {n, m} a no minimo n vezes e maximo m Tipos de midia Modulo de tipos de midia Nome Midia all Todos os dispositivos braille Dispositivos