> For the complete documentation index, see [llms.txt](https://favelaware.gitbook.io/favelaware/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://favelaware.gitbook.io/favelaware/5-css/5.3-seletores-classes-ids-e-tags.md).

# 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);
}
```

***


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://favelaware.gitbook.io/favelaware/5-css/5.3-seletores-classes-ids-e-tags.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.