CodeGym/Cursos/Frontend SELF PT/Seletores Básicos

Seletores Básicos

Disponível

4.1 Seletores por tipo

Os seletores em CSS são usados para definir quais elementos terão estilos aplicados. Os seletores principais incluem seletores por tipo, classe, identificador e seletores universais. Cada um desses seletores tem suas próprias características e aplicações.

Seletores por tipo (Type Selectors)

Os seletores por tipo aplicam estilos a todos os elementos de um determinado tipo. Por exemplo, você pode aplicar estilos a todos os parágrafos (<p>), cabeçalhos (<h1>, <h2> etc.) ou outras tags HTML.

tagname {
  propriedade: valor;
  propriedade: valor;
}
CSS
p {
  color: blue;
  font-size: 14px;
}

Esse seletor aplicará estilos a todos os elementos <p> no documento.

Características:

  • Aplica-se a todos os elementos do tipo especificado
  • Útil para estilos globais que devem ser aplicados a todos os elementos de um determinado tipo

4.2 Seletores por classe

Seletores por classe permitem aplicar estilos a um ou mais elementos que têm uma determinada classe. As classes são definidas usando o atributo class em HTML e são indicadas por um ponto (.) em CSS.

Sintaxe:

.classname {
  propriedade: valor;
  propriedade: valor;
}

Exemplo:

CSS
.button {
  background-color: green;
  color: white;
  padding: 10px;
}

Esse seletor aplicará estilos a todos os elementos que têm a classe button.

Características:

  • Pode-se usar a mesma classe para vários elementos
  • Permite aplicar facilmente os mesmos estilos a elementos diferentes

4.3 Seletores por identificador

Seletores por identificador aplicam estilos a um elemento com um identificador único. Os identificadores são definidos usando o atributo id em HTML e são indicados pelo símbolo de hash (#) em CSS.

Sintaxe:

#uniq-id {
  propriedade: valor;
  propriedade: valor;
}

Exemplo:

Esse seletor aplicará estilos ao elemento com o identificador main.

CSS
/* Seleciona o elemento com o identificador #main */
#main {
  width: 800px;
  background: yellow;
}
HTML
<div id="main">Este elemento terá largura de 800px.</div>
<div>Este elemento não será estilizado.</div>

Características:

  • O identificador deve ser único na página
  • Usado para estilizar elementos únicos, como cabeçalhos ou conteúdo principal

4.4 Seletores em grupo

Seletores em grupo permitem aplicar a mesma regra a vários elementos. Eles reduzem a quantidade de código e facilitam a administração de estilos.

Sintaxe:

seletor, seletor, … {
  propriedade: valor;
  propriedade: valor;
}

Exemplo:

CSS
/* Seleciona todos os elementos h1, h2 e h3 */
h1,
h2,
h3 {
  font-family: Arial, sans-serif;
}
HTML
<h1>Título 1</h1>
<h2>Título 2</h2>
<h3>Título 3</h3>
<p>Este texto não será estilizado por esta regra.</p>

4.5 Seletores universais

Seletores universais aplicam estilos a todos os elementos na página. Eles são indicados por um asterisco (*) e podem ser úteis para redefinir estilos ou para aplicar estilos gerais a todos os elementos.

Sintaxe:

* {
  propriedade: valor;
  propriedade: valor;
}

Exemplo:

Esse seletor aplicará estilos a todos os elementos na página, redefinindo suas margens e estabelecendo o modelo de caixa.

HTML
<div>Parágrafo 1</div>
<div>Parágrafo 2</div>
CSS
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Características:

  • Aplica-se a todos os elementos na página
  • Útil para redefinir estilos globais ou aplicar estilos básicos a todos os elementos
1
Tarefa
Frontend SELF PT,  nível 12lição 4
Bloqueado
Seletores de classe
Seletores de classe
1
Tarefa
Frontend SELF PT,  nível 12lição 4
Bloqueado
Seletores de ID
Seletores de ID
Comentários
  • Populares
  • Novas
  • Antigas
Você precisa acessar para deixar um comentário
Esta página ainda não tem nenhum comentário