Tipos de Seletores

Roger.Santos 03/01/2023

Módulo Progresso

0% Concluído

Imagine o seletor como uma ferramenta de pesquisa onde ele vai procurar esse seletor no seu HTML e aplicar os atributos dentro do seu bloco de declaração.

Seletor Universal

irá aplicar os atributos para todos os elementos que aceitarem essa propriedade, então nesse caso tudo irá ter cor verde e irá usar a fonte verdana.

* {
    color: green;
    font-family: Verdana;
}

Seletor Elemento

irá aplicar os atributos para todos os elementos <p> dentro do seu HTML, e ira aplicar cor verde e irá usar a fonte verdana.

p {
    color: green;
    font-family: Verdana;
}

Seletor ID

O seletor por ID é especifico e único já que apenas um id com esse valor pode ser atribuído no HTML. o seletor irá buscar pelo elemento que tiver o atributo id=”titulo” dentro do HTML e ira aplicar cor verde e irá usar a fonte verdana.

no CSS o seletor id é identificado por começar com o simbolo # seguido do valor do id.

#titulo {
    color: green;
    font-family: Verdana;
}

Seletor Classe

O seletor por classe é generico e aplica para todos os elementos que tiverem a classe associada a ele, mesmo que sejam diferentes elementos distintos. o seletor irá buscar por elementos que contenham o atributo class=”minha-classe” dentro do HTML e ira aplicar cor verde e irá usar a fonte verdana.

no CSS o seletor classe é identificado por começar com o . seguido pelo nome da classe.

elementos html podem ter múltiplas classes

.minha-classe {
    color: green;
    font-family: Verdana;
}

Exercício 1: Aplicando Estilos com Seletores

Dado o seguinte HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Exercício de CSS</title>
</head>
<body>
    <p>Este é um parágrafo.</p>
    <h1 id="titulo">Título Principal</h1>
    <p class="minha-classe">Outro parágrafo.</p>
</body>
</html>

Crie regras CSS para estilizar os elementos com base nos diferentes seletores mencionados:

Use o Seletor Universal (*) para definir a cor do texto como verde (#008000) e a fonte para “Verdana” para todos os elementos na página.
Use o Seletor Elemento (p) para alterar a cor do texto dos parágrafos para azul (#0000FF) e a fonte para “Arial”.
Use o Seletor ID (#titulo) para definir o tamanho da fonte do título principal como 24 pixels e a cor do texto como vermelho (#FF0000).
Use o Seletor de Classe (.minha-classe) para aplicar negrito (font-weight: bold) a todos os elementos com a classe “minha-classe”.

Exercício 2: Estilizando Elementos de uma Lista