Seletores CSS

O que são Seletores CSS?

Seletores são padrões utilizados para selecionar elementos específicos em um documento HTML para aplicar estilos CSS. Eles permitem que você estilize elementos de forma precisa e eficiente.

Exemplo de seletor no CSS:

                p {
                    color: red;
                }

O exemplo acima seleciona todos os elementos <p> e aplica a cor vermelha ao texto.

Tipos de Seletores CSS

Dica de aula: Atalho para comentar no VSCode: selecione o trecho que deseja comentar e pressione: "ctrl + ;"

Seletor de ID: #

O atributo id é utilizado para identificar de forma única um elemento HTML. Ele serve para aplicar estilos específicos via CSS ou manipular o elemento diretamente com JavaScript. Cada id deve ser único dentro de um documento HTML, garantindo que o elemento possa ser selecionado e estilizado de maneira precisa.

Exemplo no HTML:

<h1 id="capitulo">Capítulo 15</h1>

Exemplo no CSS:

#capitulo {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 2.5em;
    background-image: radial-gradient(circle, #567eb942, #bad5dd);
}

OBS.: Se houver personalização conflitante entre o h1 e o id, o CSS vai sempre priorizar a personalização de id.

OBS.: Segundo o W3C, não podemos usar mais de um id no mesmo HTML. Por mais que funcione, isso não está correto.

Atalho:
Para selecionar mais de uma parte do texto ao mesmo tempo, basta segurar a tecla "ALT" e clicar ou selecionar com o mouse os locais que deseja editar simultaneamente.

Seletor de Classe: .

A classe é um atributo utilizado para aplicar estilos a um ou mais elementos HTML. Ao contrário do id, que deve ser único em um documento, várias tags podem compartilhar a mesma classe, permitindo a aplicação de estilos comuns a múltiplos elementos.

Exemplo no HTML:

<p class="destaque">Texto em destaque</p>

Exemplo no CSS:

.destaque {
    color: red;
    font-weight: bold;
}

Exemplo de funcionamento:

Texto em destaque

Mais de uma classe no mesmo elemento

É possível adicionar mais de uma classe no mesmo elemento. Exemplo no HTML:

<p class="mark mark2"></p>

Exemplo no CSS:

.mark {
    background-color: yellow;
}
.mark2 {
    font-size: 2.5em;
}

Também é possível adicionar id e classe no mesmo elemento. Mas, nesse caso, as configurações do id se sobrepõem caso haja conflito com a classe.

O que NUNCA fazer!

Nunca devemos nomear a classe com a característica que ela gera para o elemento. Pois, quando se faz isso, você perde toda a semântica do seu HTML. Outro ponto é que, se por acaso quiser mudar a personalização da classe um dia, provavelmente irá acontecer algo do tipo:

.bgvermelho {
    background-color: yellow;
}
.fontgrande {
    font-color: #7bd768;
}

Note que o exemplo acima ficou uma zona!

Pseudo-classes: :

Pseudo-classes são palavras-chave adicionadas aos seletores que especificam um estado especial do elemento selecionado. Elas permitem que você aplique estilos a um elemento em seu estado ou comportamento dinâmico. Por exemplo, você pode usar pseudo-classes para mudar o ponteiro do mouse para uma mãozinha que indica que pode clicar, ou para destacar um campo quando o mouse passa sobre ele.

Exemplo de funcionamento:

Passe o mouse aqui

Veja abaixo alguns exemplos de pseudo-classes:

Lista com cores alternadas

Exemplo de código no head:

<style>
    ul.alternating li:nth-child(odd) {
        background-color: lightgray;
    }
    ul.alternating li:nth-child(even) {
        background-color: lightcoral;
    }
</style>

Exemplo de código no body:

<ul class="alternating">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

Exemplo de funcionamento:

Note que os itens ímpares têm um fundo cinza claro, enquanto os itens pares têm um fundo coral claro. Isso é feito usando as pseudo-classes :nth-child(odd) e :nth-child(even) para selecionar os elementos ímpares e pares, respectivamente.

Pseudo-elementos: ::

Pseudo-elementos são acessórios que ficam em volta do elemento principal. É como uma personalização, porém, em vez de modificar cores ou fontes, essa personalização insere novos elementos como uma seta ou textos para dar destaque, ou alertas, vai depender da sua intenção.

Agora veja exemplos de funcionamento e códigos:

Exemplo de código no head:

<style>
    .exafter::after {
        content: '<<<<';
    }
</style>

Exemplo de código no body:

<p class="exafter">
    agora
</p>

Exemplo de funcionamento:

agora

Note que não dá para selecionar o after.

Pseudo-elementos mais utilizados

Hierarquia CSS

Como já vimos, quanto mais específico maior o grau hierárquico do estilo, logo se usar uma children para definir um item essa será a prioridade do CSS.

  1. Inline
  2. Interno
    1. id
    2. class
    3. children
    4. comum
  3. Externo
    1. id
    2. class
    3. children
    4. comum

Materiais de apoio

15 -Seletores personalizados.pdf