freeCodeCamp/guide/portuguese/css/class-selector/index.md

title	localeTitle
Class Selector	Seletor de Classe

Seletor de Classe

Um Class Selector é usado em um arquivo CSS para aplicar estilo aos elementos HTML com o nome da classe correspondente. Em HTML, você pode definir o nome da classe para qualquer elemento, adicionando um atributo "class".

Para selecionar elementos com uma classe específica, usamos um (.) Chamado de caractere de período, com o nome da classe.

Por exemplo .Centro { texto-alinhar: centro; cor vermelha; }

Aqui, todos os elementos HTML com class="center" serão vermelhos e alinhados ao centro.

Exemplos:

<h1 class="test">This is a heading 1</h1> 
 <p class="test">This is a paragraph 1</p> 
 <h2 class="test">This is a heading 2</h2> 
 <p class="test">This is a paragraph 2</p> 
 <div class="test2 test3">This is a div 1</div> 

Como um nome de classe não é exclusivo, o atributo de classe HTML possibilita definir estilos iguais para elementos com o mesmo nome de classe. Aqui está como você pode selecionar a classe em um arquivo CSS para os elementos de estilo (observe a notação):

Todos os elementos do test de classe serão aplicados com este estilo:

.test { 
  color: green; 
 } 

Todos os elementos <p> do test de classe serão aplicados com este estilo:

p.test { 
  border: 1px solid black; 
  color: red; 
 } 

Todos os elementos <h1> e <h2> do test de classe serão aplicados com este estilo:

h1.test, h2.test { 
  color: blue; 
 } 

Todos os elementos que tiverem tanto a classe test2 quanto o test3 serão aplicados com este estilo:

.test2.test3 { 
  color: green; 
 } 

Dicas: Sem espaço entre várias classes.

Mais Informações:

Sintaxe CSS e Seletores: w3schools