Um seletor CSS é uma declaração em um formato que "casa" com todos os elementos que sigam aquele formato na árvore do documento. Quando todas as condições estabelecidas no formato da declaração são satisfeitas o seletor "casa" com o elemento (ou elementos) no documento e as regras escritas no seletor são aplicadas. Considere a regra CSS bem simples escrita a seguir:
- p { color:#f00; }
O seletor
é a parte da regra CSS que está antes do sinal “{“ (chave de abertura). O
seletor aqui é p, que
"casa" com todos os elementos p do documento e faz com que qualquer texto dentro
de um parágrafo seja na cor vermelha. Bem básico.
Seletores - Simples e combinados
Existem
duas categorias básicas de seletores: os simples e os combinados.
Um seletor
simples consiste em um tipo qualquer de seletor ou o seletor universal
seguido por nenhum ou algum seletor de atributo, seletor tipo ID, seletor de
classe ou pseudo-classe. A seguir uma regra contendo um exemplo de seletor
simples:
- p.info { background:#ff0; }
Um seletor
combinado (algumas vezes chamado de seletor contextual) consiste de dois ou
mais seletores simples separados por um elemento de combinação. A seguir um exemplo
de seletor combinado.
- div p { font-weight:bold; }
A regra
acima aplica-se a todo elemento p que seja descendente do elemento div.
Um
pseudo-elemento pode ser colocado como apêndice a um seletor. Em seletores
combinados, o pseudo-elemento somente poderá ser adicionado como apêndice ao
último seletor simples.
Nas
Partes 2 e 3 deste artigo serão detalhados com mais profundidade os seletores
combinados, os elementos de combinação e os pseudo-elementos.
O seletor universal
O seletor
universal é representado por um asterisco, “*”, e casa com todos os elementos
do documento. É raro ver-se empregado em uma folha de estilos, mas o seletor
universal é muito usado com seletores tipo ID e seletores de classe. Se o
seletor universal não for o único componente de um seletor simples, o “*” não
deve ser usado :
- .myclass é equivalente a *.myclass
- #myid é equivalente a *#myid
Um uso
bastante popular para o seletor universal é o uso para zerar margens e paddings
de todos os elementos do documento:
- * { margin:0; padding:0; }
Seletores - tipo
Um
seletor tipo, casa com qualquer instância de um determinado tipo de elemento. A
regra a seguir casa com qualquer elemento (do tipo) parágrafo no documento e
configura seu tamanho de fonte para 2em:
- p { font-size:2em; }
Seletor - classe
O seletor
de classe é representado por um ponto, “.”, e tem como alvo elementos com um
determinado valor para seu atributo class. A regra a seguir aplica-se a
todo elemento parágrafo cuja classe tenha o nome “info”:
- p.info { background:#ff0; }
Você pode
atribuir vários nomes para a classe de um elemento – o atributo class pode conter uma lista de vários
nomes separados por espaço em branco. Assim, os seletores de classe podem ser
usados para casar com elementos cuja classe contenha vários nomes. A regra a
seguir casa com elementos p que tenham os nomes “info” e “error” declarados em seu atributo class:
- p.info.error { color:#900; font-weight:bold; }
Nota: Seletores com múltiplos nomes de
classes não são suportados pelas versões atuais do Internet Explorer, mas serão
pelo IE7.
O tipo de
elemento não precisa necessariamente ser declarado. Este procedimento, não
declarar o tipo de elemento, equivale a usar o seletor universal como tipo de
elemento. A regra a seguir casa com qualquer elemento da classe “info”,
independentemente do tipo de elemento:
- .info { background:#ff0; }
Seletor - ID
O seletor
ID é representado por um sinal de "tralha" (ou "jogo da
velha"), “#”, e tem como alvo elementos com um deteminado valor de
atributo ID. A regra a seguir aplica-se a todos os elementos cujo nome de ID
seja “info”, independentemente do tipo de elemento:
- #info { background:#ff0; }
Se você
especificar um determinado tipo de elemento a regra será aplicada somente
àquele tipo de elemento que tenha o nome da ID especificado:
- p#info { background:#ff0; }
É importante
lembrar que seletores ID tem uma especificidade maior que seletores de classe e
que um valor de ID deve ser único em um mesmo documento. Assim um determinado
seletor ID será aplicável a um único elemento no documento.
Elementos de combinação
Elementos
de combinação de seletores são usados para separar dois ou mais seletores
simples que compõem um seletor combinado. Os elementos de combinação
disponíveis são: espaço em branco (qualquer quantidade de espaço, tabulação ou
caracteres de espaçamento), o sinal de maior “>” e o sinal de adição “+” . A
função de cada um destes elementos de combinação dos seletores será descrita
adiante.
Seletores descendentes
Um
seletor descendente é uma combinação de dois ou mais seletores simples
separados por um espaço em branco. Casa com elementos que sejam descendentes do
primeiro elemento simples declarado no seletor. Por exemplo, na regra a seguir
o seletor casa com todos os elementos p que sejam descendentes do elemento div:
- div p { color:#f00; }
Cada um
dos seletores que compõem um seletor descendente pode ser um seletor simples de
qualquer natureza. Na regra a seguir o seletor casa com todo o elemento p da classe info contido em um elemento li que esteja contido em um
elemento div cuja id
seja myid.
- div#myid li p.info { color:#f00; }
Seletores
descendentes permitem que você case um elemento sem necessidade de atribuir-lhe
uma classe ou uma id, o que resultará em uma marcação mais limpa.
Para
atingir os itens de lista e links contidos na lista de navegação você poderia
usar as seguintes regras CSS:
- #nav li { display:inline; }
- #nav a { font-weight:bold; }
Estas
regras não serão aplicadas a nenhum outro item de lista ou links dentro do
documento. Agora compare com a opção de nomear uma classe para cada item da
lista e para os links e você perceberá quão mais limpa poderá tornar-se sua
marcação com o uso de seletores descendentes.
Seletores filho
Um
seletor filho tem como alvo um filho imediato de um elemento. O seletor filho
consiste de um ou mais seletores simples separados por um sinal de maior “>”.
O elemento pai fica à esquerda do sinal “>”, e é permitido deixar espaço em
branco entre o elemento de combinação e os seletores.
A regra a
seguir aplica-se a todos os elementos strong que sejam filhos de um elemento div:
- div > strong { color:#f00; }
Somente
elementos strong que
sejam descendentes diretos do elemento div serão afetados por esta regra. Se houver qualquer
outro elemento entre o elemento div e o elemento strong na árvore do documento, o
seletor não se aplicará.
Seletores irmãos adjacentes (sibling selectors)
Um
seletor irmão adjacente consiste de um ou mais seletores simples separados por
um sinal de adição, “+”. é permitido deixar espaço em branco entre o elemento
de combinação e os seletores. O seletor tem como alvo um elemento que seja
irmão e adjacente ao primeiro elemento. Os elementos devem ter o mesmo pai e o
primeiro elemento deve ser imediatamente anterior ao segundo.
- p + p { color:#f00; }
Para cada um dos
seletores. O erro que muitos cometem é o de não listar de modo completo todos
os seletores. Considere a segui
Agora
considere que você quer aplicar a mesma margem para cabeçalhos do nível 3 e
para listas não ordenadas que estejam dentro do elemento div cuja id é “news”. Aqui maneira errada:
- div#news h3, ul {
- margin:0 2em;
- }
Esta
regra será aplicada a ambos os elementos h3 e ul na div#news. O
problema é que atingirá todos os elementos ul contidos no documento, e não apenas aqueles na div#news.
Agora a
maneira correta de grupar os seletores para este caso:
- div#news h3,
- div#news ul {
- margin:0 2em;
- }
Assim,
quando grupar seletores lembre-se de escrever por completo cada um deles.
Seletores de atributo
Seletores
de atributo atingem elementos baseados no valor de atributo declarado no
seletor. Quatro são as maneiras de declarar um seletor de atributo:
[att]
Casa com qualquer elemento com o
atributo att
independente do seu valor.
[att=val]
Casa com qualquer elemento com o
atributo att cujo
valor seja “val”.
[att~=val]
Casa com qualquer elemento que
tenha um atributo att de valor
igual a um valor qualquer separado por um espaço de um valor igual “val”. Neste
caso “val” não pode conter espaços.
[att|=val]
Casa com qualquer elemento que
tenha um atributo att de valor
igual a um valor qualquer separado por um hífen de um valor começando com
“val”. O principal uso deste seletor é o de casar elementos com um valor de
idioma especificado no atributo lang (xml:lang em XHTML), por exemplo;“en”,
“en-us”, “en-gb”, etc.
Alguns
exemplos. O seletor na regra a seguir casa com todos os elementos p que tenham o atributo title, independentemente do valor do
atributo:
- p[title] { color:#f00; }
No
próximo exemplo o seletor casa com todos os elementos div que tem um valor para o atributo
class igual a error:
- div[class=error] { color:#f00; }
Para
atingir todos os elementos td cujo atributo headers contenha o valor “col1”, podemos usar o seguinte
seletor:
- td[headers~=col1] { color:#f00; }
E
finalmente, o seletor seguinte atinge todo elemento p cujo atributo lang comece com en:
- p[lang|=en] { color:#f00; }
Múltiplos
seletores de atributos podem ser usados em um mesmo seletor. Isto possibilita
atingir vários diferentes atributos para o mesmo elemento. a regra a seguir
aplica-se a todos os elementos blockquote que tenham o atributo class de valor igual a “quote”, e mais
o atributo cite
(independentemente do seu valor):
blockquote[class=quote][cite]
{ color:#f00; }
Pseudo-classes
A Sintaxe das pseudo-classes:selector:pseudo-class {property: value}
|
| selector.class:pseudo-class {property: value} |
Pseudo-classes Âncora
Um link ativo, visitado, não visitado, ou quando o mouse está sobre um link, podem todos ser exibidos de diferentes maneiras em um navegador que suporta CSS:a:link {color: #FF0000} /* unvisited link */
a:visited {color: #00FF00} /* visited link */
a:hover {color: #FF00FF} /* mouse over link */
a:active {color: #0000FF} /* selected link */
|
Observação: a:active DEVE vir após a:hover na definição da CSS de modo a ser efetivo!!
Observação: Os nomes das pseudo-classes não são sensíveis à caixa (maiúsculas ou mminúsculas).
Observação: O IE 4 e superior suporta a pseudo-classe âncora. O NN 4.5 e o Netscape 6 suportam a pseudo-classe âncora só parcialmente.
Pseudo-classes e Classes CSS
Pseudo-classes podem ser combinadas com classes CSS:a.red:visited {color: #FF0000}
CSS Syntax |
CSS2 - A Pseudo-classe :first-child
A pseudo-classe :first-child associa-se a um elemento específico que é o primeiro filho (first child) de outro elemento.Neste exemplo, o seletor associa-se a qualquer elemento p que seja o first child de um elemento div, e recua o primeiro parágrafo dentro de um elemento div:div > p:first-child
{
text-indent:25px
}
Este seletor associar-se-á com o primeiro parágrafo dentro de div na HTML seguinte:mas não associar-se-á com o parágrafo desta HTML:
|
Neste exemplo, o seletor associa-se a qualquer elemento que seja o first child de um elemento p, e especifica a espessura da fonte (font-weight) para negrito (bold) para o primeiro em dentro de um elemento p:p:first-child em
{
font-weight:bold
}
Por exemplo, o em na HTML abaixo é o first child do parágrafo:I am a strong man. |
Neste exemplo, o seletor associa-se a qualquer elemento a que seja o first child de qualquer elemento, e especifica a text-decoration para none (nenhuma):a:first-child
{
text-decoration:none
}
Por exemplo, o primeiro a na HTML abaixo é o first
child do parágrafo e não será sublinhado. Mas o segundo a no parágrafo
não é o first child do parágrafo e será sublinhado:Visite W3Schools e aprendaCSS! Visite W3Schools e aprenda HTML! |
CSS2 - A Pseudo-classe :lang
A pseudo-classe :lang permite ao autor especificar a linguagem a ser usada em um documento ou a ser usada num elemento específico.No exemplo abaixo, a regra especifica o tipo de marcas de citação para um documento em HTML que está em norueguês:
| html:lang(no) { quotes: '« ' ' »' } |
| blockquote:lang(no) { quotes: '« ' ' »' } |
Pseudo-classes
NN: Netscape, IE: Internet Explorer, W3C: Padrão Web| Pseudo-classe | NN | IE | W3C | Propósito |
|---|---|---|---|---|
| active | 4.0 | CSS1 | Adiciona um estilo especial a um vínculo selecionado | |
| hover | 4.0 | CSS1 | Adiciona um estilo especial a um vínculo quando o mouse está sobre ele | |
| link | 4.0 | 3.0 | CSS1 | Adiciona um estilo especial a um vínculo não visitado |
| visited | 4.0 | 3.0 | CSS1 | Adiciona um estilo especial a um vínculo visitado |
| :first-child | 7.0 | CSS2 | Adiciona um estilo especial a um elemento que é o first child de algum outro elemento | |
| :lang | CSS2 | Permite que o autor especifique uma linguagem a ser usada num elemento específico |
CSS Pseudo-elements
Sintaxe
A sintaxe dos pseudo-elementos:selector:pseudo-element {property: value}
|
| selector.class:pseudo-element {property: value} |
The :first-line Pseudo-element
O pseudo-elemento "first-line" é usado para adicionar estilos especiais à primeira linha de um texto em um seletor:p {font-size: 12pt}
p:first-line {color: #0000FF; font-variant: small-caps}
Algum texto que termine com duas ou mais linhas |
| Algum texto que termine com duas ou mais linhas |
Observação: O pseudo-elemento "first-line" pode somente ser usado com elementos em nível de bloco.
Observação: As seguintes propriedades aplicam-se ao pseudo-elemento "first-line":
- font properties (propriedades de fonte)
- color properties (propriedades de cor)
- background properties (propriedades de plano de fundo)
- word-spacing (espaçamento enter palavras)
- letter-spacing (espaçamento entre letras)
- text-decoration (decoração de texto)
- vertical-align (alinhamento vertical)
- text-transform (transformação de texto)
- line-height (altura da linha)
- clear (limpar)
Observação: O NN 4.5 não suporta o pseudo-elemento "first-line".
O Pseudo-elemento :first-letter
The "first-letter" pseudo-element is used to add special style to the first letter of the text in a selector:p {font-size: 12pt}
p:first-letter {font-size: 200%; float: left}
A primeira palavra de um artigo. |
| /\ primeira /—\ letra de um artigo. |
Observação: As seguintes propriedades aplicam-se ao pseudo-elemento "first-letter":
- font properties (propriedades de fonte)
- color properties (propriedades de cor)
- background properties (propriedades de plano de fundo)
- margin properties (propriedades de margem)
- padding properties (propriedades de enchimento)
- border properties (propriedades de borda)
- text-decoration (decoração de texto)
- vertical-align (alinhamento vertical) (somente se 'float' está 'none')
- text-transform (transformação de texto)
- line-height (altura da linha)
- float (flutuação)
- clear (limpar)
Observação: O NN 4.5 não suporta o pseudo-elemento "first-letter".
Os Pseudo-elementos e as Classes CSS
Pseudo-elementos podem ser combinados com classes CSS:p.article:first-letter {color: #FF0000}
|
Pseudo-elementos Múltiplos
Vários pseudo-elementos podem ser combinados:p {font-size: 12pt}
p:first-letter {color: #FF0000; font-size: 200%}
p:first-line {color: #0000FF}
As primeiras palavras de um artigo |
| /\ s primeiras /—\ palavras de um artigo. |
CSS2 - O Pseudo-elemento :before
O pseudo-elemento ":before" pode ser usado para inserir algum conteúdo antes de um elemento.O estilo abaixo tocará um som antes de cada ocorrência do elemento título um.
| h1:before { content: url(beep.wav) } |
CSS2 - O Pseudo-elemento :after
O pseudo-elemento ":after" pode ser usado par ainserir algum conteúdo depois de um elemento.O estilo abaixo tocará um som após cada ocorrência do elemento título um.
| h1:after { content: url(beep.wav) } |
Pseudo-elements
NN: Netscape, IE: Internet Explorer, W3C: Padrão Web| Pseudo-elementos | NN | IE | W3C | Propósito |
|---|---|---|---|---|
| first-letter | 5.5 | CSS1 | Adiciona um estilo especial à primeira letra de um texto | |
| first-line | 5.5 | CSS1 | Adiciona um estilo especial à primeira linha de um texto | |
| :before | CSS2 | Insere algum conteúdo antes de um elemento | ||
| :after | CSS2 | Insere algum conteúdo antes de um elemento |
Nenhum comentário:
Postar um comentário