Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updates "Learn/CSS/Building_blocks/Selectors/Attribute_selectors" content #16013

Merged
merged 13 commits into from
Oct 7, 2023
Merged
Show file tree
Hide file tree
Changes from 8 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: Attribute selectors
title: Seletores de atributo
slug: Learn/CSS/Building_blocks/Selectors/Attribute_selectors
---

Expand All @@ -10,26 +10,26 @@ Como você sabe de seu estudo de HTML, os elementos podem ter atributos que forn
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">Prerequisites:</th>
<th scope="row">Pré-requisitos:</th>
<td>
Basic computer literacy,
Conhecimentos básicos em informática,
<a
href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software"
josielrocha marked this conversation as resolved.
Show resolved Hide resolved
>basic software installed</a
>, basic knowledge of
>software básico instalado</a
>, conhecimentos básicos de
<a
href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files"
josielrocha marked this conversation as resolved.
Show resolved Hide resolved
>working with files</a
>, HTML basics (study
>trabalhando com arquivos</a
>, Basico de HTML (Estude
<a href="/pt-BR/docs/Learn/HTML/Introduction_to_HTML"
>Introduction to HTML</a
>), and an idea of how CSS works (study
<a href="/pt-BR/docs/Learn/CSS/First_steps">CSS first steps</a>.)
>Introdução para o HTML</a
>), e uma ideia de como CSS funciona (Estude
<a href="/pt-BR/docs/Learn/CSS/First_steps">CSS primeiros paços</a>.)
</td>
</tr>
<tr>
<th scope="row">Objective:</th>
<td>To learn what attribute selectors are and how to use them.</td>
<th scope="row">Objetivo:</th>
<td>Entender o que são seletores de atributo e como usa-los.</td>
</tr>
</tbody>
</table>
Expand All @@ -38,7 +38,7 @@ Como você sabe de seu estudo de HTML, os elementos podem ter atributos que forn

Esses seletores permitem a seleção de um elemento com base na presença de um atributo sozinho (por exemplo, href) ou em várias correspondências diferentes com o valor do atributo.

| Selector | Example | Description |
| Seletor | Example | Description |
orpos marked this conversation as resolved.
Show resolved Hide resolved
| ---------------- | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| `[attr]` | `a[title]` | Corresponde a elementos com um atributo attr (cujo nome é o valor entre colchetes). |
| `[attr=value]` | `a[href="https://example.com"]` | Corresponde a elementos com um atributo attr cujo valor é exatamente value - a string entre aspas. |
Expand All @@ -57,7 +57,7 @@ No exemplo abaixo você pode ver esses seletores sendo usados.

Esses seletores permitem uma correspondência mais avançada de substrings dentro do valor do seu atributo. Por exemplo, se você tivesse classes de `box-warning` e `box-error` e quisesse combinar tudo que começou com a string "box-", você poderia usar `[class^="box-"]` para selecionar os dois (ou `[class|="box"]` como descrito abaixo).

| Selector | Example | Description |
| Seletor | Exemplo | Descrição |
| --------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------- |
| `[attr^=value]` | `li[class^="box-"]` | Corresponde a elementos com um atributo attr (cujo nome é o valor entre colchetes), cujo valor começa com valor. |
| `[attr$=value]` | `li[class$="-box"]` | Corresponde a elementos com um atributo attr cujo valor termina com valor. |
Expand All @@ -73,7 +73,7 @@ O próximo exemplo mostra o uso desses seletores:

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}

## Case-sensitivity
## Sensibilidade a maiúsculas
josielrocha marked this conversation as resolved.
Show resolved Hide resolved

Se você deseja combinar valores de atributo sem distinção entre maiúsculas e minúsculas, você pode usar o valor i antes do colchete de fechamento. Este sinalizador informa ao navegador para corresponder caracteres ASCII sem distinção entre maiúsculas e minúsculas. Sem o sinalizador, os valores serão correspondidos de acordo com a distinção entre maiúsculas e minúsculas do idioma do documento - no caso do HTML, será sensível a maiúsculas e minúsculas.

Expand Down
2 changes: 1 addition & 1 deletion files/pt-br/learn/css/building_blocks/selectors/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,7 @@ Você pode dar uma olhada na tabela de referência de seletores abaixo para obte

A tabela a seguir fornece uma visão geral dos seletores disponíveis para uso, juntamente com links para as páginas deste guia que mostram como usar cada tipo de seletor. Também incluí um link para a página MDN de cada seletor, onde você pode verificar as informações de suporte do navegador. Você pode usar isso como uma referência para voltar quando precisar consultar os seletores mais tarde no material, ou quando você experimentar CSS em geral.

| Selector | Example | Learn CSS tutorial |
| Seletor | Exemplo | Tutorial CSS |
| ------------------------------------------------------------------------------ | ------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| [Type selector](/pt-BR/docs/Web/CSS/Type_selectors) | `h1 { }` | [Type selectors](/pt-BR/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Type_selectors) |
| [Universal selector](/pt-BR/docs/Web/CSS/Universal_selectors) | `* { }` | [The universal selector](/pt-BR/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#The_universal_selector) |
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Nesta lição, vamos analisar alguns dos seletores simples, o qual provavelmente
<table>
<tbody>
<tr>
<th scope="row">Pré-requistos:</th>
<th scope="row">Pré-requisitos:</th>
<td>Familiaridade básica com uso de computadores,
<a
href="/pt-BR/docs/Learn/Getting_started_with_the_web/Installing_basic_software"
Expand Down