# 5.3  Seletores, classes, ids e tags

#### 🔹 **Seletores Básicos**

**📌 Seletor de Tipo (Tag)**

Seleciona elementos pelo **nome da tag** HTML.\
**Sintaxe:** `tagname`

```css
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`

```css
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`

```css
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:** `*`

```css
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):

```css
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:

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

***

**✅ \[atributo^="valor"]**

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

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

***

**✅ \[atributo$="valor"]**

Seleciona elementos cujo valor do atributo **termina com** determinado texto:

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

***

**✅&#x20;*****\[atributo="valor"]*****\***

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

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

***