Formação @leonelcunha.

net 2/17/10 7:54 PM

Tipos de selectores css

Como sabemos a definição de regras de CSS implicam a existência de selectores que identificam os
elementos HTML. Dos tipos de selectores mais usados (não é uma lista completa) podemos referir os
seguintes:
- Element selectors;
- ID selectors;
- Class;
- Group selectors;
- Descendent selectors;
- Pseudo-class selectors.

Estes tipos de selectores podem ser divididos em dois géneros: tipo e autor. O primeiro diz respeito
aos selectores que identificam os elementos de HTML, o segundo pode ser criado pelo autor da CSS.

Element selectors: <p> <h1> <em> <span>, etc. referenciam as tags HTML que formatam. Por exemplo:
o element selector corresponde à tag <h1>

h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 2em;
color: #333333;
}

ID selectors: definem-se com o sinal cardinal (#) e deve ser usado uma única vez em cada documento
HTML. Pode haver, no entanto, haver mais do que um selector com o mesmo ID, mas não está
conforme as especificações da W3C. O documento pode ser correctamente rendido pelo browser, mas
não será validado. Quando queremos usar vários selectores com o mesmo nome devemos usar
classes em vez de ID.
Os ID são muito usados para definir os elementos estruturais do documento HTML, como é o caso das
DIVs.

#caixa {
background-color: #FF9900;
margin: 0px;
padding: 5px;
float: left;
height: 300px;
width: 300px;
}

Class selectores: Com os selectores de classe podemos definir diferentes estilos para o mesmo tipo de
elemento num documento HTML.
Por exemplo, podemos ter dois tipos de parágrafos no documento:

p .right {text-align: right}

p .left {text-align: left}

Os atributos de classe podem ser usados localmente (inline) no documento HTML.

Os selectores de classe devem começar com um ponto e podem ter o nome que quisermos. Podemos
usar várias vezes a mesma classe no mesmo documento.

file:///Volumes/LC/%5BSITES%5D/leonelcunha.com/public_html/formacao/index.html Page 1 of 3
Formação @leonelcunha.net 2/17/10 7:54 PM

.imagem {
height: 300px;
width: 300px;
border: thin solid #333333;
margin: 20px;
}

Também, podemos atribuir classe a elementos HTML com atributos particulares, como por exemplo:

Input [type="text"]{background-color: FF0000}

Group selectors
É possível agrupar selectores e com isso reduzir o código. Os selectores agrupados devem estar
separados com vírgulas.

h1, h2, h3, h4, h5, h6 {

color: #009900;
font-family: Georgia, sans-serif;
}

Descendent selectors
Podemos usar selectores descendentes. É útil quando queremos formatar um determinado elemento
dentro de um contexto específico, ou só dentro de uma dada DIV. Deve existir um espaço entre os
descent selectors.
Por exemplo:

#lateral h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.97em;
line-height: 1;
font-weight: 900;
color: #FF6600;
}

Neste caso estaríamos a formatar os h1 existentes só na div lateral . Se quisermos formatar o

elemento h1 para todo o documento:

h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.97em;
line-height: 1;
font-weight: 900;
color: #FF6600;
}

Pseudo-class selectors
Permitem definir o aspecto das hiper-ligações, sendo, portanto,os selectores relevantes para o
aspecto gráfico e manipulação da interface. Diz-se que é uma pseudo-class, dado que o seu estado é
variável por depender da interacção do utilizador.
De notar que devem seguir esta ordem:

a: link, a: visited, a:hover, a:active

file:///Volumes/LC/%5BSITES%5D/leonelcunha.com/public_html/formacao/index.html Page 2 of 3
Formação @leonelcunha.net 2/17/10 7:54 PM

Geralmente, para uma interacção eficaz os selectores a e :visited , têm a mesma definição e o :active é
de pouca utilização. Portanto, são relevantes as definições dos selectores a e :hover.

a, :visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
color: #000;
text-decoration: none;
}

a:hover {
color: #FFF;
background-color: #666;
}

Exemplos:
- Selectores 1;
- Selectores 2.

file:///Volumes/LC/%5BSITES%5D/leonelcunha.com/public_html/formacao/index.html Page 3 of 3