Seletores css que facilitam a vida de um frontend

ideia por trás deste post, é apresentar 3 seletores que tornaram a minha vida como dev frontend mais fácil. 👍🏿

선택자 de Atributo

O seletor de atributo é um dos mais práticos que existem, basicamente você vai estilizar o elemento usando como identificador algum atributo que ele possui, que pode ser o name, type…, no código abaixo temos um exemplo, onde o botão com o name igual a first-button recebe o background vermelho (caso alguém não conheça variável em css recomendo utilizar).

<div>
  <h2>Seletor de Atributo</h2>
  <h3>Exemplo: [name='first-button']</h3>
  <div>
    <button name='first-button'>BOTÃO 1</button>
    <button name="second-button">BOTÃO 2</button>
  </div>
  </div>

button[name='first-button'] {
  background: var(--main-bg-red);
}

선택자 +

O 선택기 + é um dos meus seletores favitos, ele serve para estilizar um elemento seguido de outro elemento, no código abaixo temos um exemplo, onde o botão seguido de outro botão recebe como background a cor vermelha.

button + button {
  background: var(--main-bg-red);
}

선택자 : n번째 유형

O 선택자 :nth-of-type é mais versátil de todos os seletores apresentados, ele é parecido com o :nth-child, mas a diferença é que ele pega diretamente o elemento em vez dos filhos dele, no código abaixo temos um exemplo, onde o botão que está na primeira posição recebe como background a cor vermelha.

button:nth-of-type(1){
  background: var(--main-bg-red);
}

Caso você tenha interesse em descobrir mais sobre os seletores de css recomento dar uma olhada nos 링크 abaixo:

Mozilla
DevMedia
Maujor