Seletores CSS - cupcom

O que você vai ver aqui!

Os seletores CSS são usados para “encontrar” (ou selecionar) os elementos HTML que você deseja estilizar.

O seletor de id CSS

O seletor de id usa o atributo id de um elemento HTML para selecionar um elemento específico. O id de um elemento é único dentro de uma página, então o seletor de id é usado para selecionar um elemento único!

/* A regra CSS abaixo será aplicada ao elemento HTML com id = "elemento1" */ 
#elemento1 {
  text-align: left;
  color: blue;
}

O seletor de classe CSS

O seletor de classe seleciona elementos HTML com um atributo de classe específico. Para selecionar elementos com uma classe específica, escreva um ponto (.), Seguido do nome da classe.

/* A regra CSS abaixo será aplicada a todos elementos HTML com classe = "elemento1" */ 
.elemento1 {
  text-align: left;
  color: blue;
}

O seletor universal CSS

O seletor universal (*) seleciona todos os elementos HTML na página.

/* A regra CSS abaixo será aplicada ao elemento HTML com id = "elemento1" */ 
* {
  text-align: left;
  color: blue;
}

O seletor de agrupamento CSS

O seletor de agrupamento seleciona todos os elementos HTML com as mesmas definições de estilo. Observe o seguinte código CSS (os elementos h1, h2 e p têm as mesmas definições de estilo):

/* Observe o seguinte código CSS (os elementos h1, h2 têm as mesmas definições de estilo):  */ 
h1 {
  text-align: left;
}
h2 {
  text-align: left;
}

Seletores combinados

Um seletor CSS pode conter mais de um seletor simples. Entre os seletores simples, podemos incluir um combinador.

seletor descendente (espaço)
seletor filho (>)
seletor irmão adjacente (+)
seletor irmão geral (~)

Elemento	p	Seleciona todos <p>
Elemento, elemento	div, p	Seleciona todos <div> e todos elementos <p>
Elemento elemento	div div	Seleciona todos elementos <p> dentro de elementos <div>
Elemento > elemento	div > div	Seleciona todos <p> onde o pai é um elemento <div>
Elemento + elemento	div + div	Seleciona todos <p> que estão imediatamente depois de um elemento <div>
Elemento1 ~ elemento2	div ~div	Seleciona todo elemento <ul> que precede um elemento <p>

Seletor CSS [atributo]

O [attribute]seletor é usado para selecionar elementos com um atributo especificado.

[attribute]	[target]	Seleciona todos os elementos com um atributo target.
[attribute=value]	[target=_blank]	Seleciona todos os elementos com target=”_blank”
[attribute~=value]	[title~=flower]	Seleciona todos os elementos com um atributo title contendo a palavra “flower”
[attribute\|=value]	[lang\|=pt-br]	Seleciona todos os elementos com um atributo lang, cujo o atributo valor comece com “pt-br”
[attribute^=value]	a[href^=”https”]	Seleciona todo elemento <a> que tem um atributo href com o valor começando com “https”
[attribute$=value]	a[href$=”.pdf”]	Seleciona todo elemento <a> que tem um atributo href com o valor termina com “.pdf”
[attribute*=value]	a[href*=”tableless”]	Seleciona todo elemento <a> que tem um atributo href com o valor contém “tableless”


/* o seletor abaixo pegará todos elemento a com target=”_blank” */
a[target="_blank"] {
  background-color: yellow;
}

/* O exemplo a seguir seleciona todos os elementos com um atributo de título que contém uma lista de palavras separadas por espaço, uma das quais é "flor": */
[title~="flor"] {
  border: 5px solid yellow;
}

Referências: https://www.w3schools.com/, https://developer.mozilla.org/

Isto foi útil?

Obrigado pelo seu feedback!

Facebook Tweet Pin LinkedIn Email