5.3 Seletores, classes, ids e tags

🔹 Seletores Básicos

📌 Seletor de Tipo (Tag)

Seleciona elementos pelo nome da tag HTML. Sintaxe: tagname

cssCopiarEditarp {
  color: blue;
}

Aplica a cor azul a todos os parágrafos <p> da página.

---

📌 Seletor de Classe (.class)

Seleciona elementos com um atributo class específico. Sintaxe: .nome-da-classe

cssCopiarEditar.index {
  font-weight: bold;
}

Aplica negrito a todos os elementos com class="index".

---

📌 Seletor de ID (#id)

Seleciona um único elemento com o atributo id. Sintaxe: #nome-do-id

cssCopiarEditar#menu {
  background-color: #f0f0f0;
}

Aplica um fundo cinza claro ao elemento com id="menu".

⚠️ Atenção: IDs devem ser únicos por página!

---

📌 Seletor Universal (*)

Seleciona todos os elementos da página. Sintaxe: *

cssCopiarEditar* {
  margin: 0;
  padding: 0;
}

Remove margens e preenchimentos padrão de todos os elementos.

---

🔸 Seletores de Atributo

Permitem selecionar elementos com atributos específicos, muito útil para estilizar formulários, links e componentes dinâmicos.

✅ [atributo]

Seleciona elementos que possuem um atributo (independente do valor):

cssCopiarEditarinput[required] {
  border: 2px solid red;
}

Aplica borda vermelha a todos os input com o atributo required.

---

✅ [atributo="valor"]

Seleciona elementos com valor exato no atributo:

cssCopiarEditarinput[type="text"] {
  background-color: lightyellow;
}

---

✅ [atributo^="valor"]

Seleciona elementos cujo valor do atributo começa com determinado texto:

cssCopiarEditara[href^="https"] {
  color: green;
}

---

✅ [atributo$="valor"]

Seleciona elementos cujo valor do atributo termina com determinado texto:

cssCopiarEditarimg[src$=".jpg"] {
  border-radius: 10px;
}

---

✅ [atributo="valor"]*

Seleciona elementos cujo valor do atributo contém determinado texto:

cssCopiarEditardiv[class*="card"] {
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

---