logo

Seletor CSS

Seletores CSS são usados para selecionar o conteúdo que você deseja estilizar . Os seletores fazem parte do conjunto de regras CSS. Os seletores CSS selecionam elementos HTML de acordo com seu id, classe, tipo, atributo etc.

Existem vários tipos diferentes de seletores em CSS.

  1. Seletor de elementos CSS
  2. Seletor de ID CSS
  3. Seletor de classe CSS
  4. Seletor Universal CSS
  5. Seletor de grupo CSS

1) Seletor de elementos CSS

O seletor de elemento seleciona o elemento HTML por nome.

número aleatório em java
 p{ text-align: center; color: blue; } <p>This style will be applied on every paragraph.</p> <p id="para1">Me too!</p> <p>And me!</p> 
Teste agora

Saída:

Este estilo será aplicado em todos os parágrafos.

Eu também!

E eu!


2) Seletor de ID CSS

O seletor de id seleciona o atributo id de um elemento HTML para selecionar um elemento específico. Um id é sempre único na página, por isso é escolhido para selecionar um elemento único e exclusivo.

É escrito com o caractere hash (#), seguido do id do elemento.

img alinhamento css

Vejamos um exemplo com o id 'para1'.

 #para1 { text-align: center; color: blue; } <p id="para1">Hello Javatpoint.com</p> <p>This paragraph will not be affected.</p> 
Teste agora

Saída:

Olá Javatpoint.com

Este parágrafo não será afetado.


3) Seletor de classe CSS

O seletor de classe seleciona elementos HTML com um atributo de classe específico. É usado com um caractere de ponto final. (símbolo de ponto final) seguido do nome da classe.

javafx no Eclipse

Nota: O nome de uma classe não deve começar com um número.

Vejamos um exemplo com uma classe 'centro'.

 .center { text-align: center; color: blue; } <h2>Hello Javatpoint.com (In smaller font)</h2> <p>This is a paragraph.</p> 
Teste agora

Saída:

Olá Javatpoint.com

Olá Javatpoint.com (em fonte menor)

Este é um parágrafo.