Home
índice (CSS)
Página anterior

Pseudo-classes

O funcionamento dos seletores baseia-se na posição dos elementos, na árvore do documento. Dependendo de onde estiver a tag no documento xhtml, alcança-se com os seletores vistos até agora. Só que em alguns casos não dá para alcançar o conteúdo do documento, com os seletores comuns. Para resolver esse problema a css prevê as pseudo_classes e complementa estes seletores, com a finalidade de estilizar informações, que de outra forma seria inacessível nessa árvore. As pseudos-classes podem ocupar qualquer posição no seletor e os pseudos-elementos devem ser colocados após o último seletor simples.

Na folha de estilo ficaria assim:
div h1:first-child {
color:blue;
}

Código para modificar a cor do link

Pode-se modificar a cor do link, usando uma pseudo-classe.
Na folha de estilo ficaria assim:

link não visitado
a:link {
color:red;
}
link visitado
a:visited { color:green;
}
Link
regras-css
Cores

Para modificar a label

Na css existem as pseudo-classes dinâmicas. O agente de usuário modificará o comportamento de renderização, em resposta a uma ação do usuário. Em outras palavras, o browser mudará o estilo, de acordo com a ação do usuário.
Na folha de estilo ficaria assim:

input [type="tex"]:focus{
background-color:#FFFF00; /* mouse over label */
}
label:hover {
background-color: yellow;
}

Pseudo-Elementos

First-line

O pseudo-elemento first-line, destina-se a aplicar estilos na primeira linha do texto mas, ele precisa estar contido dentro de um elemento em bloco. Ele pode ser aplicado em rótulos, tabelas, tabulação, etc. E depende de alguns fatores, inclusive as dimensões da janela, se ela aumentar de tamanho a primeira linha também aumenta, e desta forma o estilo aplicado acompanha esta mudança.
Na folha de estilo ficaria assim:

p:first-line {
color:#0000FF;
}

First-letter

Efeito tipográfico, conhecido como capitalização incial, consiste em aumentar o tamanho da primeira letra, no início de um parágrafo. Não pode haver nenhum conteúdo antes no início do texto, como imagens ou outro elemento. w3schools-Fontes
Na folha de estilo ficaria assim:

p:first-letter {
font-size: 40px;
color:red;
}

Before

O pseudo-elemento before destina-se a inserir conteúdos no início do documento. Pode ser textos, imagens, diversos tipos de conteúdo.
Na folha de estilo ficaria assim:

p:before{
content:"INÍCIO";
}

After

O pseudo-elemento after destina-se a inserir conteúdos no fim do documento. Assim como em before pode ser textos, imagens, ou seja diversos tipos de conteúdo.
Na folha de estilo ficaria assim:

p:after{
content:"FIM";
} Lembrete: Pesquisar em w3schools-Seletores para maiores esclarecimentos.

Efeito Cascata

Mesmo numa folha de estilo simples, moderada pode ocorrer que duas ou mais regras selecionem o mesmo elemento. Exemplo:
p{
color:#0000FF;
}
div > p {
color:red;
}
A css resolve esse conflito por meio do processo conhecido como cascata, que é o calculo do que é considerado mais importante pelo browser. Existem três fontes distintas de folhas de estilo:
1- A folha de estilo do autor (ou do Programador de css).

2- A folha de estilo do usuário. Isso mesmo! O usuário pode ter a própria folha de estilo, para vincular ao browser). Cada browser tem uma forma diferente de vincular uma folha de estilo do usuário.

3- A folha de estilo do próprio browser. (Quando a folha de estilo é removida, fica o efeito da folha de estilo do browser).

Como o browser organiza a ordem de aplicação dessas folhas de estilo? A cascata vai funcionar atribuíndo uma importância a cada regra. As folhas de estilo do autor são considerada as mais importantes, seguidas da folha do usuário e por último, a folha padrão do navegador ou um outro leitor de folhas de estilo html. A ordem que ele utiliza é a descrita abaixo:

Folha do autor

  1. a) Estilo Inline
  2. b) Estilo Incorporado (head)
  3. c) Estilo Externo (importado)

Uma declaração marcada como important, tem precedência sobre as outras. Após ordenar as folhas de estilo, nessa sequência, será feito o cálculo da especificidade. As regras serão ordenadas pelo grau de especificidade do seletor. Regras com seletores mais específicos sobrescrevem àquelas com seletor menos específico. Se duas regras tiverem o mesmo grau de especificidade, a última é que será definida como mais importante. Como calcular o valor de especificidade de uma regra: Atribuir a cada tipo de seletor um valor numérico. Soma-se então o valor de cada seletor. A especificidade vai ser dividida em quatro níveis constituintes.

Forma pratica de calcular a especificidade:

Quanto maior a especificidade, maior a preferência.

Herança

A herança é mais simples de entender. Na verdade ela é um agrupamento de vários seletores para poder receber um determinado estilo. Assim:

p, h1, h2, a, ul, li, ol {
color:#000000;
}
Ou poderia simplesmente fazer desta forma:
body {
color:#000000;
}
Isso é Herança