Seletores CSS
Os seletores css, identifica um elemento html ou define uma classe ou pseudo classe que a regra de estilo será aplicada.
exemplo:
p {font-size: 12px;}
o seletor é p e a regra css escrita determina que todos parágrafos terão uma fonte tamanho 12px.
Seletor universal - a marca do uso do seletor universal é um asterisco,' * ', o uso dele casa com todos os elementos do documento. Dificilmente se usa ele em uma folha de estilo, ele é muito usado com seletores ID e seletores de classe, porem se ele não for único componente de um seletor simples o asterisco não deve ser usado.
O uso mais comum do seletor universal geralmente é para zerar margens e paddings de todos os elementos do documento
* { margin:0; padding:0; }
Seletor de tipo de elemento - Com o CSS3, os seletores permite identificar o elemento baseado no seu atributo, esse seletor seleciona "qualquer elemento que se queira aplicar uma regra".
e {
font-family-sans-serif;
}
Seletor contextual - é uma regra que será aplicada a um determinado elemento que estiver dentro de um outro elemento.
h1 {color:red;}
As tags h1 que estiver dentro de uma tag article recebera a cor vermelha, porem assim:
" A regra não será aplicada".
As tags h1 que estiver dentro de uma tag article recebera a cor vermelha, porem assim:
teste
" A regra não será aplicada".
Seletor de elementos filho - é aquele contido dentro de outro elemento html,chamado seletor pai
#auxiliar > p {
font-size:14px
}
Esta regra estabelece tamanho de fonte 14px para textos nos páragrafos que estão dentro da #auxiliar. Páragrafos filhos de #auxiliar
Seletor adjacente - Essa regra será aplicada ao elemento que estiver a frente de outro elemento.
h1+h2 { color#fff;
padding: 0;
}
A regra será aplicada consequentemente em h2.
Seletor de classe - é um seletor que você pode inventar um nome e pode ser aplicado a qualquer elemento html. "A sintaxe seria um nome precedido de um ponto" ( .) . Esse nome pode conter letras, números, hífen ou carácter de escape e qualquer carácter unicode de código numérico, porem não pode começar com traço - ou um numero.
Seletor classe é aplicavel a um ou mais elementos html ou a instâncias de um ou mais elementos html que serão estilizados segundo as regras css declarada na classe
exemplo
.minhaclasse {color: #f00;}
O nome da classe você que da seguindo algumas regras, a classe denominada "minhaclasse" define a cor vermelha(#f00) para as letras do elemento onde ela for aplicada, a sintaxe do tipo classe tem um ponto ( . ) antes do nome da classe.
texto do paragrafo.......
texto do cabeçalho....
Essa regra define a cor vermelha para o parágrafo e para o cabeçalho.
Seletor de id - é um identificador individual associado a apenas um elemento no documento. Não pode ter mais de um elemento html com a mesma id, diferente das classes, que podem ser aplicadas a vários elementos html em um mesmo documento.
A sintaxe para o seletor id é o caracter #, seguido de um nome qualquer, podendo conter letras, digitos, hifén, ou caracter de escape, caracteres unicode ou qualquer caracter unicode de código numérico, porem não podem começar com traço ou numero
exemplo
#menu {
color: #000;
background:#fff;
}
A regra mostrada estiliza o div #menu
Agrupamento de seletores - é uma forma de juntar, reunir seletores que tenham as mesmas regras de estilo
exemplo
p { color: #000;}
.classet {color: #000;}
span {color: #000;}
os seletores p, .classet e span podem ser agrupados como a seguir.
p, .classt, span { color:#000;}
a sintaxe para agrupar seletores consiste em separá-los com vírgula.
Seletores de atributo - é aquele que se refere a um atributo do elemento html, pode ser definido de quatro maneiras distintas:
- referência ao atributo do elemento.
img[width] {
border: 2px solid #ff0000;
}
A regra css mostrada coloca bordas de 2px de cor vermelha nas imagens onde foi definido o atributo width
- Referência ao atributo e seu valor;
img[width="200px"] {
border: 2px solid #ff0000;
}
Essa regra css coloca bordas de 2px de cor vermelha nas imagens que tenha sido definido o atributo width com um valor igual a 200px.
- Referência ao atributo e a um de seus valores.
p[class~=cor] {
border 2px soid #ff0000;
}
Essa regra coloca bordas de 2px de cor vermelha nos parágrafos cujo atributo class contenha a palavra cor isoladamente ou como parte de umalista de valores separados por espaço, observe a seguir;
Paragrafo 1
Paragrafo 2
Paragrafo 3
A regra css mostrada se aplica aos parágrafos 1 e 3, não se aplica ao parágrafo 2.
- Referênca ao atributo e a um de seus valores, outra maneira
p[lang | =pt] {
border: 2px solid #ff0000;
}
Coloca bordas de 2px de cor vermelha nos parágrafos cujo atributo lang contenha a sigla pt isoladamente ou como parte de uma lista de valores separados por um traço, observe a seguir;
Parágrafo 1
Parágrafo 2
Parágrafo 3
Essa regra mostrada se aplica aos parágrafos 1 e 2, não se aplica ao parágrafo 3.
Pseudo-classes - São usadas em CSS para por efeitos especiais em um elemento. Não são elementos html, em alguns casos são definidas apenas para o elemento html a ( ):
:link estiliza links não visitados.
a:link {
background:#000;
color: #fff;
}
:visited estliza links visitados.
a:visited {
background: # #ff0;
color: #000;
}
:hover estliza links com ponteiro do mouse em cima
a:hover {
background: #ffc;
color: #036;
}
:active estiliza links ativos, clicados.
a:active {
background: #000;
color: #0f0;
}
:first-child é contido de outro elemento html
div > p:first-child {
margin: 0 auto
}
a:focus destacado quando o foco estiver posicionado nele
a:focus {
background: #ffffff;
}
e:lang(val) Aplica-se ao elemento, se estiver marcado com o idioma val
p:lang (pt){ color:red;}
teste
lang="pt"> teste2
e:first-line Ele da uma estilizada na primeira linha de uma frase
p:first-line {
blackground-color:red;
}
e:first-letter Ele da uma estilizada na primeira letra de um determinado texto
p:first-letter { font-size:150%; background-colo:red; }
Ola teste1
Ola teste2
e:before Ele adiciona um conteúdo que estiver dentro do elemento "em"
Teste 1 e Teste 2
e:after Ele adiciona um conteudo que estiver antes da primeira palavra que estiver dentro do elemento "em"
div > p:first-child {
margin: 0 auto
}
a:focus destacado quando o foco estiver posicionado nele
a:focus {
background: #ffffff;
}
e:lang(val) Aplica-se ao elemento, se estiver marcado com o idioma val
p:lang (pt){ color:red;}
teste
lang="pt"> teste2
e:first-line Ele da uma estilizada na primeira linha de uma frase
p:first-line {
blackground-color:red;
}
e:first-letter Ele da uma estilizada na primeira letra de um determinado texto
p:first-letter { font-size:150%; background-colo:red; }
Ola teste1
Ola teste2
e:before Ele adiciona um conteúdo que estiver dentro do elemento "em"
Teste 1 e Teste 2
e:after Ele adiciona um conteudo que estiver antes da primeira palavra que estiver dentro do elemento "em"
teste1 e teste2
As pseudos-classes podem ser combinadas com classes:
a.topo:link {
background: #000;
color: #fff;
}
a.topo:hover {
background: #fff;
color: #000;
}
Pseudo-elementos - São usados em CSS para por efeitos especiais a um seletor ou a parte de um seletor. "Não são elementos html".
p:first-line { font-size:160%;}
h3:first-letter { color:#000;}
Os pseudo-elementos são separados por dois pontos ( : )
:first-line estiliza a primeira linha de uma frase
:first-letter estiliza a primeira letra de uma frase
Os pseudos elementos podem ser combinados com classes
p.generica:first-letter {
font-style: italic;
}
Aqui vemos na regra CSS que a primeira letra dos parágrafos que pertencem a classe generica será em itálico.
