Seletores CSS

       Seletores css
           podem indentificar um elemento html ou até mesmo definir uma classe ou pseudo classe que a
regra de estilo será aplicada.

Exemplos

p{font-size: 12px;}
O seletor é p e a regra css escrita determina que todos parágrafos terão uma fonte tamanho 12px.
No caso se quiser mudar o tamanho da fonte é so modificar

Exemplo

p(font-size: "Numero da fonte"px;}

Seletor Universal
           A marca do uso seletor universal é um asterisco *
O uso do * casa casa com todos elementos do documento.Ele quase não é usado em folhas de estilo,
ele é muito usado nos seletores ID e seletores de classe,mas se ele não for um unico componente de um
seletor simples o asterico NÃO deve ser usado.

Seletor universal Uso
      O uso mais comum do seletor universal na maioria das vezes é para zerar margens e paddings de
todos os elementos do documento.

 Exemplo

    *{margin:0;  padding:0;}
  
Seletor de tipo de elemento
   Os seletores permitem identificar os elementos baseado no seus atributos,
   esse seletor seliona Qualquer elemento que se queira aplicar uma regra.
 
   Exemplo
 
   e{font-family-sans-serif;}
 
 
   Seletor Contextual
        É uma regra que será aplicada a um determinado elemento que esta dentro de outro elemento.
      
        Exemplo
        h1{color:red;}
        As tags "h1" que estão dentro de outra tag article receberão a cor vemelha.
      
    Seletor de elementos filho - é um elemento dentro de outro elemento,O elemento que ele está dentro
    é chamado Seletor PAI
  
    Exemplo
  
    #auxiliar >p{
     font size:14px      (Como em um dos primeiros exemplos que eu citei "14" é o numero do tamanho da fonte,p Paragráfo
     }
A regra estabelece o tamanho de 14px para textos que estão dentro da #auxiliar.Parágrafos "filhos" de #auxiliar

Seletor adjacente
Essa regra é aplicada ao elemento que estiver a FRENTE de outro elemento.

h1+h2{color#fff;
padding:0;
}
A regra será aplicada em h2 (frente de h1)

Seletor de classe
     É um seletor que você pode inventar um nome e esse nome poderá ser aplicado em qualquer elemento html.
"A sintaxe seria um nome precedido de um ponto"(.) esse nome pode conter letras,números,hifen
ou carácter de escape e qualquer carácter unicode de codigo numérico,porem não pode começar com traço ou numeros
O Seletor classe é aplicavel a um ou mais elementos ou instancias de um ou mais elementos hml que seguirão
as regras css declarada na classe

Exemplo
.nomequeeuinventei{color.#f00;}

O nome da classe você que da seguindo algumas regras,a classe denominada
"nomequeeuinventei"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.
Então essa regra define a cor vermelha para o parágrafo e para o cabeçalho

Seletor de id
É um indentificador indvidual associado a apenas um elemento no documento.
Não pode ter mais que um elemento html com a mesma id,diferente das classes,que podem
conter 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 unicodes,caracter de escape ou qualquer caracter unicode de código numérico,So não podem começar com
numeros ou traços

Exemplo
#menu{
color:#000;
background:#fff;}

>/div>

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 agrupado como no exemplo abaixo.
p,.classet,span{color:#000;}


A sintaxe para agrupar seletores consiste em separá-los com virgula.
Como podem ver acima "p"e depois uma virgula ".classet" e depois uma virgula.

Seletores de atributo
É aquele que se refere a um atributo do elemento html,pode ser definido de quatro
maneiras diferentes:

Referencia ao atributo do elemento

img[width]{
         border:2px solid #ff0000;
         }
        
         A regra css mostrada coloca bordas de 2px de cor vermelha nas imagens
aonde foi definido o atributo width

Referencia ao atributo e o seu valor;

img[width="200px"]{
                   border: 2pxsolid solid #ff0000;
                   }
                 
Essa regra css coloca as bordas de 2px de cor vermelha na imagens que tenha
sido definido com 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 uma lista
de valores separados por espaço,
Como no exemplo abaixo;

Primeiro Parágrafo

Segundo Parágrafo

Terceiro Parágrafo
A Regra css mostrada se aplica aos parágrafos primeiro e terceiro,nao se aplica ao segundo parágrafo.

Referencia ao atributo e a um de seus valores

p[lang | =pt]{
              border: 2px solid #ff0000;
              }
Coloca bordas de 2px de cor vermelha nos parágrafos cujo atributo lang contenha a cligra pt
isolada ou como parte de uma lista de valores separados por um traço " | "
Observe o exemplo abaixo:

Primeiro Parágrafo

Segundo Parágrafo

Terceiro Parágrafo

Essa regra mostrada se aplica aos Parágrafos Primeiro e Segundo,Não se aplica ao terceiro.

PseudoClasses
São usados em CSS para colocar efeitos especiais em um elemento.Não sao elementos html,
Em alguns casos sao definidas apenas para o elemento a():

:link estiliza links não visitados.

a:link{
       background:#000;
       color:#fff;
       }
     
:visited estiliza links visitados.

a:visited{
         background:##ff0;
         color:#000;
         }
        
:hover estiliza os links com ponteiro do mouse em cima

a:hover{
        background:#ffc;
        color:#036;
        }
      
:active estiliza links ativos,Ja foram clicados.

a:active{
         background:#000;
         color:#0f0;
         }
  
:first-child é contido de outro elemento html

div > p:first-child{
        margin: 0 auto
}

a:focus Se destaca quando o foco estiver posicionado nele

a:focus{
         background:#ffffff;
}

e:lang(val) Se aplica ao elemento,Se estiver marcado com o idioma val

p:lang(pt){color:red;}
exemplo
lang="pt">exemplo2

e:first-line Ele Estiliza na primeira linha de uma frase

p:first-line {
              blackground-color:red;
              }
            
e:first-letter Ele estiliza a primeira letra do texto
             p:firstletter{
                           font-size:150%;background-color:red;}
Ola exemplo
Ola exemplo2

e:before Ele adiciona um conteúdo que estiver dentro do elemento "em"

Exemplo e Exemplo 2

e:after Ele adiciona um conteúdo que estiver antes da primeira palavra que estiver dentro do elemento
"em"

Exemplo e Exemplo2

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 no seletor ou em
partes dele."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 ":"
Os peseudos elementos podem ser combinados com classes

p.generica:first-letter{
                        font-style:italic;
                        }
                      
Na regra CSS vemos que a primeira letra dos parágrafos que pertencem a classe generica
será em italico.