É aplicado a todos os elementos dentro do documento. Todas as instâncias de todos elementos são alvos desse seletor. Ele é representado por um asterisco(*)
* h2{
color: #000066;
}
li {
color: #000066;
}
Este seletor é usado quando se deseja aplicar um estilo específico, a uma determinada tag. A mudança ocorrerá somente neste seletor.
Para o seletor classe é utilizado o atributo "xhtml class" (Lembrando, o atributo style é usado quando for inline, ou seja, somente a linha será modificada). Já o atributo class é usado
<p class= "destaque">para modificar uma classe, ou várias linhas.
Na folha de estilo, ficaria assim:
.destaque {
color: #000066;
}
<p class= "destaque detalhe"> com duas classes na mesma declaração.
Na folha de estilo, ficaria assim:
.destaque {
color: #000066;
}
.detalhe{
text-decoration: underline;
}
O exemplo anterior ficaria com a cor modificada e sublinhado, desse modo: Obs: O seletor do tipo class, tem prioridade sobre os outros. Ele é mais específico.
O seletor atributo, como o nome já diz, é aquele que casa com determinado atributo de um elemento. Por exemplo o elemento <p>. Coloca-se uma ênfase do lado em: title="seletor" <em>seletor </em> Formas de modificar os critérios do seletor do tipo atributo:
Colocando dentro da frase da seguinte forma: <em title=" " ><em>frase para modificar</em>
Na folha de estilo ficaria assim:
em [title~=do]
color: #FF0000;
font-size: 20px;
}
E{
[att~=val]
}
<em title|=" ">palavra-escrita-com-hífen</em> (fecha-se em com < >).
em [title|=do]{
color: #FF0000;
font-size: 20px;
}
O Seletor descendente é aplicado a um determinado elemento do documento, que descenda de outro. Exemplo, o elemento <em> está dentro diretamente do elemento <p>, mas indiretamente dentro do elemento <div>. Observar como existe uma ênfase em asterisco(*) no parágrafo que fala do seletor universal e também em palavra-escrita-com-hífen e outras mais, que foram enfatizadas com <em></em>.
Na folha de estilo ficaria assim:
div em{
color: red;
}
(não é necessário colocar a localização completa: o elemento em, está dentro de p, que está dentro de div).
Este seletor composto é marcado com sinal de >, e a diferença é que é um seletor filho e só será aplicado se <em> estiver diretamente dentro de <div>, se realmente for um filho de <div>(não é necessário colocar a localização completa: o elemento em, está dentro de p, que está dentro de div).
Na folha de estilo ficaria assim:
div > em{
text-decoration: underline;
}
No CSS, são usados seletores. Apesar disso, os seletores de CSS ainda são pouco utilizados. O CSS3 está chegando trazendo diversas funcionalidades, mas existe muito poder escondido no bom e velho CSS2. O uso inteligente dos seletores pode tornar o código mais eficiente. Entender como funcionam e guardar na memória pode ajudar e muito:
O seletor * (asterisco) é possivelmente o mais conhecido da lista, mas não é usado com a frequência que merece. Empregado isoladamente, ele pode especificar um estilo geral que abrange todos os elementos da página, ideal para resetar propriedades ou estabelecer padrões, como a fonte em uso no site.
Exemplo:
* {
margin: 0;
padding: 0;
font-family: helvetica, arial, sans-serif;
font-size: 16px;
}
Este seletor é chamado de seletor adjacente e o que ele faz é aplicar o estilo ao elemento B que vem imediatamente depois do elemento A. Por exemplo, para selecionar o primeiro parágrafo após um título <h2>.
Na folha de estilos:
h2 + p {
font-weight: bold;
}
Resultado:
<h2>Título</h2>
<p>Este parágrafo fica em negrito.</p>
<p>O seletor não se aplica ao segundo parágrafo. Apenas ao primeiro.</p>
Este seletor aplica o estilo somente aos filhos diretos de A, ao contrário do mais famoso A B, que seleciona todos os níveis de filhos de A. Este seletor é recomendado quando se deseja criar um estilo apenas para o primeiro nível dos filhos de um determinado elemento. Por exemplo, se a intenção não for selecionar os elementos <li> da sublista de uma lista principal, deve-se empregá-lo:
Na folha de estilo:
ul > li {
font-weight: bold;
}
Resultado:
<ul>
<li>Item em negrito
<ul>
<li>Item da sublista</li>
<li>Item da sublista</li>
<li>Item da sublista</li>
</ul>
</li>
<li>Item em negrito</li>
<li>Item em negrito</li>
</ul>
Se a opção tivesse sido pelo seletor ul li, os itens da sublista também teriam ficado em negrito.
Este seletor é uma carta na manga para quando se precisa que um determinado link tenha um estilo diferente dos outros. O seletor irá comparar o valor do atributo HREF com a string entre aspas e verificar se ela está presente antes de aplicar o estilo. Por exemplo, para gerar um estilo para todos os links de uma página que levam para o Facebook:
a[href*="facebook"] {
font-weight: bold;
}
Resultado:
<a href="http://www.facebook.com">Este link fica em negrito.</a>
<a href="http://www.google.com">O seletor não se aplica a este link.</a>
Se for removido o * (asterisco) do seletor, ele irá procurar o valor exato da string na URL do link.
Este seletor adiciona uma exceção ao elemento A. Na prática, o estilo é aplicado a todos os elementos A, exceto aqueles que sejam B. Por exemplo, para selecionar todas as divs de uma página, menos aquela que fica no rodapé, pode-se usar:
div:not(.footer) {
font-weight: bold;
}
Resultado:
<div>Esta div fica em negrito.</div>
<div>Esta div fica em negrito.</div>
<div>Esta div fica em negrito.</div>
<div class="footer">Esta div não fica em negrito.</div>
Estes dois seletores permitem especificar o primeiro e o último filho de um elemento pai, respectivamente. Este seletor pode ser de uma ajuda inestimável para aplicar estilos ao primeiro item de uma lista, para remover margens de itens com float, para especificar bordas de colunas etc.Exemplo, para aplicar um estilo ao primeiro e ao último item de uma lista:
ul li:first-child {
font-weight: bold;
}
ul li:last-child {
font-weight: bold;
}
Resultado:
<ul>
<li>Item em negrito</li>
<li>Item sem negrito</li>
<li>Item sem negrito</li>;
<li>Item em negrito</li>
</ul>
Este seletor é uma variação do anterior, onde especifica-se a posição do elemento filho dentro do elemento pai A. Exemplo, para selecionar apenas o terceiro item de uma lista:
Na folha de estilos:
ul li:nth-child(3) {
font-weight: bold;
}
Resultado:
<ul>
<li>Item sem negrito</li>
<li>Item sem negrito</li>
<li>Item em negrito</li>
<li>Item sem negrito</li>
</ul>
Este seletor pode ser usado para múltiplos daquela posição, aplicando a variável n no final do número. Exemplo, para selecionar os itens 3, 6, 9 e assim por diante de uma lista:
Na folha de estilos:
ul li:nth-child(3n){
font-weight: bold;
}
Este seletor é uma variação do anterior, onde a contagem de filhos começa do último. Exemplo, para selecionar apenas o antepenúltimo item de uma lista:
Na folha de estilos:
ul li:nth-last-child(3) {
font-weight: bold;
}
Este seletor pega o conceito de ordem estabelecido pelos seletores anteriores e mescla com tipos de elementos. Usando este seletor, pode-se aplicar um estilo ao elemento B que vem na posição n dentro do elemento A. Exemplo, para selecionar o terceiro parágrafo dentro de uma <div>:
Na folha de estilos:
div p:nth-of-type(3) {
font-weight: bold;
}
Resultado:
<div>
<p>O seletor não se aplica ao primeiro parágrafo.</p>
<p>O seletor não se aplica ao segundo parágrafo.</p>
<p>Este parágrafo fica em negrito.</p>
<p>O seletor não se aplica ao quarto parágrafo.</p>
<div>
Este talvez seja o mais antigo de todos os seletores vistos aqui. Tão antigo que já foi muito utilizado no passado e agora está quase completamente esquecido, gerando um problema sério de usabilidade… Ao fazer uma busca no Google, as páginas já visitadas aparecem com uma cor diferente. É exatamente isto o que este seletor faz.
Na folha de estilos:
a:visited {
color: blue;
}
Lembrete: Memorizar a função de cada um destes seletores e aplicar a lógica na página, pode economizar o uso indiscriminado de IDs para todos os lados, permitindo a criação de exceções complexas e trazendo flexibilidade ainda maior ao ainda útil e incompreendido CSS2.