Seletores CSS

Em CSS para selecionar um ou mais elementos(tags) HTML que você deseja estilizar fazemos uso de seletores.

Podemos dividir os seletores CSS em cinco categorias:

• Seletores simples (selecione elementos com base no nome, id, classe)
• Seletores de combinação (selecione elementos com base em um relacionamento específico entre eles)
• Seletores de pseudo-classe (selecionar elementos com base em um determinado estado)
• Seletores de pseudo-elementos (selecione e estilize uma parte de um elemento)
• Seletores de atributo (selecione elementos com base em um atributo ou valor de atributo)

Seletores simples

O seletor universal

O seletor universal (*) seleciona todos os elementos HTML na página.

                            
p { color: red }

O seletor de elementos

O seletor de elemento seleciona elementos HTML com base no nome do elemento.

                            
p {
    text-align: center;
    color: red;
}
                        

O seletor de id

O seletor id usa o atributo id de um elemento HTML para selecionar um elemento específico.

O id de um elemento é único dentro de uma página, então o seletor de id é usado para selecionar um elemento único!

Para selecionar um elemento com um id específico, escreva um caractere hash (#), seguido do id do elemento.

                                
#para1 {
    text-align: center;
    color: red;
}
                            

O seletor de classe

O seletor de classe seleciona elementos HTML com um atributo de classe específico.

Para selecionar elementos com uma classe específica, escreva um caractere ponto (.), seguido do nome da classe.

                                
.center {
    text-align: center;
    color: red;
}
                            

Você também pode especificar que apenas elementos HTML específicos devem ser afetados por uma classe.

                                
p.center {
    text-align: center;
    color: red;
}
                            

Elementos HTML também podem se referir a mais de uma classe.

                            
<p class="center large">This paragraph refers to two classes.</p>
                        

O seletor de agrupamento

O seletor de agrupamento seleciona todos os elementos e classes HTML com as mesmas definições de estilo.

Veja o seguinte código CSS (os elementos h1, h2 e p têm as mesmas definições de estilo):

                                
h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;
}

p {
    text-align: center;
    color: red;
}
                            

Será melhor agrupar os seletores, para minimizar o código.

Para agrupar seletores, separe cada seletor com uma vírgula.

                                
h1, h2, p {
    text-align: center;
    color: red;
}
                            

Todos os seletores simples

Seletores de combinação/composto

Um combinador é algo que explica a relação entre os seletores.

Um seletor CSS pode conter mais de um seletor simples. Entre os seletores simples, podemos incluir um combinador.

Existem quatro combinadores diferentes em CSS:

• seletor descendente (espaço)
• seletor filho (>)
• seletor irmão adjacente (+)
• seletor geral de irmãos (~)

Seletor de Descendentes

O seletor descendente corresponde a todos os elementos que são descendentes de um elemento especificado.

O exemplo a seguir seleciona todos os elementos <p> dentro dos elementos <div>:

                                
div p {
    background-color: yellow;
}
                            

Seletor filho (>)

O seletor filho seleciona todos os elementos que são filhos de um elemento especificado.

O exemplo a seguir seleciona todos os elementos <p> que são filhos de um elemento <div>:

                                    
div > p {
    background-color: yellow;
}
                                

Seletor de irmãos adjacentes (+)

O seletor irmão adjacente é usado para selecionar um elemento que está diretamente após outro elemento específico.

Elementos irmãos devem ter o mesmo elemento pai, e "adjacente" significa "imediatamente a seguir".

O exemplo a seguir seleciona o primeiro elemento <p> que é colocado imediatamente após os elementos <div>:

                                            
div + p {
    background-color: yellow;
}
                                        

Seletor Geral de Irmãos (~)

O seletor irmão geral seleciona todos os elementos que são os próximos irmãos de um elemento especificado.

O exemplo a seguir seleciona todos os elementos <p> que são os próximos irmãos dos elementos <div>:

                                                
div ~ p {
    background-color: yellow;
}
                                            

Todos os seletores de combinação

Seletores de atributos

Estilizar elementos HTML com atributos específicos

É possível estilizar elementos HTML que possuem atributos ou valores de atributos específicos.

Seletor de CSS [atributo]

O [attribute] seletor é usado para selecionar elementos com um atributo especificado.

O exemplo a seguir seleciona todos os elementos <a> com um atributo target:

                                                
a[target] {
    background-color: yellow;
}
                                            

Seletor de CSS [attribute="value"]

O [attribute="value"] seletor é usado para selecionar elementos com um atributo e valor especificados.

O exemplo a seguir seleciona todos os elementos <a> com um atributo target="_blank":

                                                    
a[target="_blank"] {
    background-color: yellow;
}
                                                

Seletor de CSS [attribute~="value"]

O [attribute~="value"] seletor é usado para selecionar elementos com um valor de atributo contendo uma palavra especificada.

O exemplo a seguir seleciona todos os elementos com um atributo title que contém uma lista de palavras separadas por espaço, uma das quais é "flor":

                                                        
[title~="flower"] {
    border: 5px solid yellow;
}
                                                    

O exemplo acima corresponderá a elementos com title="flower", title="summer flower" e title="flower new", mas não title="my-flower" ou title="flowers".

Seletor de CSS [attribute|="value"]

O [attribute|="value"] seletor é usado para selecionar elementos com o atributo especificado, cujo valor pode ser exatamente o valor especificado, ou o valor especificado seguido de um hífen (-).

Nota: O valor deve ser uma palavra inteira, sozinha, como class="top", ou seguida por um hífen( - ), como class="top-text".

                                                        
[class|="top"] {
    background: yellow;
}
                                                    

Seletor de CSS [attribute^="value"]

O [attribute^="value"] seletor é usado para selecionar elementos com o atributo especificado, cujo valor começa com o valor especificado.

O exemplo a seguir seleciona todos os elementos com um valor de atributo de classe que começa com "top":

Nota: O valor não precisa ser uma palavra inteira!

                                                        
[class^="top"] {
    background: yellow;
}
                                                    

Seletor de CSS [attribute$="value"]

O [attribute$="value"] seletor é usado para selecionar elementos cujo valor de atributo termina com um valor especificado.

O exemplo a seguir seleciona todos os elementos com um valor de atributo de classe que termina com "test":

Nota: O valor não precisa ser uma palavra inteira!

                                                        
[class$="test"] {
    background: yellow;
}
                                                    

Seletor de CSS [attribute*="value"]

O [attribute*="value"] seletor é usado para selecionar elementos cujo valor de atributo contém um valor especificado.

O exemplo a seguir seleciona todos os elementos com um valor de atributo de classe que contém "te":

Nota: O valor não precisa ser uma palavra inteira!

                                                        
[class*="te"] {
    background: yellow;
}
                                                    

Formas de estilo

Os seletores de atributo podem ser úteis para estilizar formulários sem classe ou ID:

                                                        
input[type="text"] {
    width: 150px;
    display: block;
    margin-bottom: 10px;
    background-color: yellow;
}

input[type="button"] {
    width: 120px;
    margin-left: 35px;
    display: block;
}
                                                    

Todos os seletores de atributos

Seletores pseudo-classe

O que são pseudoclasses?

Uma pseudo-classe é usada para definir um estado especial de um elemento.

Por exemplo, pode ser usado para:

• Estilizar um elemento quando um usuário passa o mouse sobre ele.
• Estilize links visitados e não visitados de maneira diferente.
• Estilize um elemento quando ele estiver em foco.

Sintaxe

A sintaxe das pseudoclasses:

selector:pseudo-class {
    property: value;
}

Pseudo-classes âncora (Anchor)

Os links podem ser exibidos de diferentes maneiras:

/* unvisited link */
a:link {
    color: #FF0000;
}

/* visited link */
a:visited {
    color: #00FF00;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #0000FF;
}

Nota: a:hover DEVE vir depois a:linke a:visited na definição CSS para ser eficaz! a:active DEVE vir depois a:hover na definição CSS para ser eficaz! Os nomes de pseudoclasses não diferenciam maiúsculas de minúsculas.

Pseudo-classes e classes HTML

Pseudo-classes podem ser combinadas com classes HTML:

Quando você passa o mouse sobre o link no exemplo, ele muda de cor:

a.highlight:hover {
    color: #ff0000;
}

Passe o mouse em <div> Um exemplo de uso da :hover pseudoclasse em um elemento <div>:

div:hover {
    background-color: blue;
}
    

Dica de ferramenta simples.

p {
    display: none;
    background-color: yellow;
    padding: 20px;
}

div:hover p {
    display: block;
}
                

CSS - A pseudo-classe :first-child

A :first-child pseudoclasse corresponde a um elemento especificado que é o primeiro filho de outro elemento.

Corresponde ao primeiro elemento <p>.

No exemplo a seguir, o seletor corresponde a qualquer elemento <p> que seja o primeiro filho de qualquer elemento:

p:first-child {
    color: blue;
}
                

Corresponde ao primeiro elemento <i> em todos os elementos <p>

No exemplo a seguir, o seletor corresponde ao primeiro elemento <i> em todos os elementos <p>:

p i:first-child {
    color: blue;
}
                            

Corresponde a todos os elementos <i> em todos os primeiros elementos <p> filhos

No exemplo a seguir, o seletor corresponde a todos os elementos <i> em elementos <p> que são o primeiro filho de outro elemento:

p:first-child i {
    color: blue;
}
                                                

CSS - A pseudoclasse :lang

A :lang pseudo-classe permite definir regras especiais para diferentes idiomas.

No exemplo abaixo, :lang define as aspas para elementos <q> com lang="no":

<html>

<head>
<style>
q:lang(no) {
    quotes: "~""~";
}
</style>
</head>

<body>

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

</body>

</html>
                                                

Todas as pseudoclasses CSS

Seletores pseudo-elementos

O que são pseudo-elementos?

Um pseudo-elemento CSS é usado para estilizar partes especificadas de um elemento.

Por exemplo, pode ser usado para:

• Estilize a primeira letra, ou linha, de um elemento
• Inserir conteúdo antes ou depois do conteúdo de um elemento

Sintaxe

A sintaxe dos pseudo-elementos:

                            
selector::pseudo-element {
    property: value;
}

O ::Pseudo-elemento de primeira linha

O ::first-line pseudo-elemento é usado para adicionar um estilo especial à primeira linha de um texto.

O exemplo a seguir formata a primeira linha do texto em todos os elementos <p>:

                            
p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}

Nota: O ::first-line pseudo-elemento só pode ser aplicado a elementos de nível de bloco.

As seguintes propriedades se aplicam ao ::first-line pseudo-elemento:

• propriedades da fonte
• propriedades de cor
• propriedades de fundo
• espaçamento entre palavras
• espaçamento entre letras
• decoração de texto
• alinhamento vertical
• transformação de texto
• altura da linha
• Claro

Observe a notação de dois pontos - ::first-line contra :first-line

Os dois pontos substituiu a notação de dois pontos para pseudo-elementos em CSS3. Esta foi uma tentativa do W3C de distinguir entre pseudo-classes e pseudo-elementos.

A sintaxe de dois pontos foi usada para pseudoclasses e pseudo-elementos em CSS2 e CSS1.

Para compatibilidade com versões anteriores, a sintaxe de dois pontos é aceitável para pseudo-elementos CSS2 e CSS1.

O pseudo-elemento ::first-letter

O ::first-letter pseudo-elemento é usado para adicionar um estilo especial à primeira letra de um texto.

                            
p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}

Nota: O ::first-letter pseudo-elemento só pode ser aplicado a elementos de nível de bloco.

As seguintes propriedades se aplicam ao pseudo-elemento ::first-letter:

• propriedades da fonte
• propriedades de cor
• propriedades de fundo
• propriedades de margem
• propriedades de preenchimento
• propriedades da borda
• decoração de texto
• vertical-align (somente se "float" for "none")
• transformação de texto
• altura da linha
• flutuador
• Claro

Pseudo-elementos e classes HTML

Pseudo-elementos podem ser combinados com classes HTML:

                                
p.intro::first-letter {
    color: #ff0000;
    font-size: 200%;
}
    
    

O exemplo acima exibirá a primeira letra dos parágrafos com class="intro", em vermelho e em tamanho maior.

Vários pseudo-elementos

Vários pseudo-elementos também podem ser combinados.

No exemplo a seguir, a primeira letra de um parágrafo será vermelha, em um tamanho de fonte xx grande. O resto da primeira linha será azul e em versalete. O restante do parágrafo terá o tamanho e a cor da fonte padrão:

                                
p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}

p::first-line {
    color: #0000ff;
    font-variant: small-caps;
}
    
    

CSS - O pseudo-elemento ::before

O ::before pseudoelemento pode ser usado para inserir algum conteúdo antes do conteúdo de um elemento.

                                
h1::before {
    content: url(smiley.gif);
}
    
    

CSS - O pseudo-elemento ::after

O ::after pseudo-elemento pode ser usado para inserir algum conteúdo após o conteúdo de um elemento.

                                
h1::after {
    content: url(smiley.gif);
}
    
    

CSS - O pseudo-elemento ::marker

O ::marker pseudo-elemento seleciona os marcadores dos itens da lista.

                                    
::marker {
    color: red;
    font-size: 23px;
}
        
        

CSS - O pseudo-elemento ::selection

O ::selection pseudo-elemento corresponde à parte de um elemento selecionado por um usuário.

As seguintes propriedades CSS podem ser aplicadas a ::selection: color, background, cursore outline.

                                    
::selection {
    color: red;
    background: yellow;
}
        
        

Todos os pseudo elementos CSS