Articles
Introdução ao CSS
Detalhes dos Seletores de Atributos no CSS

Detalhes dos Seletores de Atributos no CSS

Este artigo explica os detalhes dos seletores de atributos no CSS.

Pode aprender a escrever correspondência direta, correspondência inversa e correspondência parcial para seletores de atributos.

YouTube Video

HTML para Visualização

css-attribute-selector.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Pseudo Class/Element</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-attribute-selector.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Attribute Selectors</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header><h2>CSS Attribute Selectors</h2></header>
 19        <article>
 20            <h3>element[attribute]</h3>
 21            <section>
 22                <header><h4>CSS</h4></header>
 23<pre class="sample">
 24a[target] {
 25    font-weight: bold;
 26}
 27</pre>
 28                <header><h4>HTML</h4></header>
 29<pre>
 30&lt;a href="https://example.com" target="_blank"&gt;Example Link (target="_blank")&lt;/a&gt;
 31&lt;a href="https://example.com"&gt;Example Link (no target)&lt;/a&gt;
 32</pre>
 33                <header><h4>HTML+CSS</h4></header>
 34                <section class="sample-view">
 35                    <a href="https://example.com" target="_blank">Example Link (target="_blank")</a>
 36                    <a href="https://example.com">Example Link (no target)</a>
 37                </section>
 38            </section>
 39        </article>
 40        <article>
 41            <h3>element[attribute=value] : =</h3>
 42            <section>
 43                <header><h4>CSS</h4></header>
 44<pre class="sample">
 45input[type="text"] {
 46    border: 2px solid green;
 47}
 48</pre>
 49                <header><h4>HTML</h4></header>
 50<pre>
 51&lt;input type="text" placeholder="Enter text here"&gt;
 52&lt;input type="password" placeholder="Password (no border)"&gt;
 53&lt;input type="text" placeholder="Another text input"&gt;
 54</pre>
 55                <header><h4>HTML+CSS</h4></header>
 56                <section class="sample-view">
 57                    <input type="text" placeholder="Enter text here">
 58                    <input type="password" placeholder="Password (no border)">
 59                    <input type="text" placeholder="Another text input">
 60                </section>
 61            </section>
 62        </article>
 63        <article>
 64            <h3>element[attribute^=value] : ^=</h3>
 65            <section>
 66                <header><h4>CSS</h4></header>
 67<pre class="sample">
 68a[href^="https://"] {
 69    font-weight: bold;
 70}
 71</pre>
 72                <header><h4>HTML</h4></header>
 73<pre>
 74&lt;a href="https://example.com"&gt;Secure Link (https)&lt;/a&gt;
 75&lt;a href="http://example.com"&gt;Non-Secure Link (http)&lt;/a&gt;
 76&lt;a href="https://another-example.com"&gt;Another Secure Link (https)&lt;/a&gt;
 77</pre>
 78                <header><h4>HTML+CSS</h4></header>
 79                <section class="sample-view">
 80                    <a href="https://example.com">Secure Link (https)</a>
 81                    <a href="http://example.com">Non-Secure Link (http)</a>
 82                    <a href="https://another-example.com">Another Secure Link (https)</a>
 83                </section>
 84            </section>
 85        </article>
 86        <article>
 87            <h3>element[attribute$=value] : $=</h3>
 88            <section>
 89                <header><h4>CSS</h4></header>
 90<pre class="sample">
 91img[src$=".jpg"] {
 92    border-radius: 10px;
 93}
 94</pre>
 95                <header><h4>HTML</h4></header>
 96<pre>
 97&lt;img src="image.jpg" alt="JPG Image" width="100"&gt;
 98&lt;img src="pattern.png" alt="PNG Image (no border radius)" width="100"&gt;
 99&lt;img src="example.jpg" alt="Another JPG Image" width="100"&gt;
100</pre>
101                <header><h4>HTML+CSS</h4></header>
102                <section class="sample-view">
103                    <img src="image.jpg" alt="JPG Image" width="100">
104                    <img src="pattern.png" alt="PNG Image (no border radius)" width="100">
105                    <img src="example.jpg" alt="Another JPG Image" width="100">
106                </section>
107            </section>
108        </article>
109        <article>
110            <h3>element[attribute*=value] : *=</h3>
111            <section>
112                <header><h4>CSS</h4></header>
113<pre class="sample">
114p[class*="highlight"] {
115    background-color: yellow;
116}
117</pre>
118                <header><h4>HTML</h4></header>
119<pre>
120&lt;p class="highlight-text"&gt;This paragraph is highlighted.&lt;/p&gt;
121&lt;p class="normal-text"&gt;This paragraph is not highlighted.&lt;/p&gt;
122&lt;p class="text-highlight-important"&gt;This is another highlighted paragraph.&lt;/p&gt;
123</pre>
124                <header><h4>HTML+CSS</h4></header>
125                <section class="sample-view">
126                    <p class="highlight-text">This paragraph is highlighted.</p>
127                    <p class="normal-text">This paragraph is not highlighted.</p>
128                    <p class="text-highlight-important">This is another highlighted paragraph.</p>
129                </section>
130            </section>
131        </article>
132        <article>
133            <h3>element[attribute~=value] : ~=</h3>
134            <section>
135                <header><h4>CSS</h4></header>
136<pre class="sample">
137div[class~="featured"] {
138    border: 1px solid red;
139}
140</pre>
141                <header><h4>HTML</h4></header>
142<pre>
143&lt;div class="featured"&gt;This div is featured.&lt;/div&gt;
144&lt;div class="content featured"&gt;This div is also featured.&lt;/div&gt;
145&lt;div class="content"&gt;This div is not featured.&lt;/div&gt;
146</pre>
147                <header><h4>HTML+CSS</h4></header>
148                <section class="sample-view">
149                    <div class="featured">This div is featured.</div>
150                    <div class="content featured">This div is also featured.</div>
151                    <div class="content">This div is not featured.</div>
152                </section>
153            </section>
154        </article>
155        <article>
156            <h3>element[attribute|=value] : |=</h3>
157            <section>
158                <header><h4>CSS</h4></header>
159<pre class="sample">
160p[lang|="en"] {
161    font-style: italic;
162}
163</pre>
164                <header><h4>HTML</h4></header>
165<pre>
166&lt;p lang="en"&gt;This paragraph is in English.&lt;/p&gt;
167&lt;p lang="en-US"&gt;This paragraph is in American English.&lt;/p&gt;
168&lt;p lang="fr"&gt;Ce paragraphe est en français.&lt;/p&gt;
169</pre>
170                <header><h4>HTML+CSS</h4></header>
171                <section class="sample-view">
172                    <p lang="en">This paragraph is in English.</p>
173                    <p lang="en-US">This paragraph is in American English.</p>
174                    <p lang="fr">Ce paragraphe est en français.</p>
175                </section>
176            </section>
177        </article>
178
179        <article>
180            <h3>CSS Attribute Selector Example : input[required] &amp; input[placeholder]</h3>
181            <section>
182                <header><h4>CSS</h4></header>
183<pre class="sample">
184input[required] {
185    background-color: #ffcccc;
186}
187
188input[placeholder] {
189    font-style: italic;
190    color: #999;
191}
192</pre>
193                <header><h4>HTML</h4></header>
194<pre>
195&lt;input type="text" required placeholder="Enter your name"&gt;
196&lt;input type="email" required placeholder="Enter your email"&gt;
197&lt;input type="text" placeholder="Optional field"&gt;
198</pre>
199                <header><h4>HTML+CSS</h4></header>
200                <section class="sample-view">
201                    <input type="text" required placeholder="Enter your name">
202                    <input type="email" required placeholder="Enter your email">
203                    <input type="text" placeholder="Optional field">
204                </section>
205            </section>
206        </article>
207        <article>
208            <h3>CSS Attribute Selector Example : a[href^="https://"]</h3>
209            <section>
210                <header><h4>CSS</h4></header>
211<pre class="sample">
212a[href^="http://"] {
213    color: orange;
214}
215
216a[href^="https://"] {
217    color: green;
218}
219</pre>
220                <header><h4>HTML</h4></header>
221<pre>
222&lt;a href="http://example.com"&gt;HTTP Link&lt;/a&gt;
223&lt;a href="https://secure.example.com"&gt;HTTPS Link&lt;/a&gt;
224&lt;a href="/relative/path"&gt;Relative Link&lt;/a&gt;
225</pre>
226                <header><h4>HTML+CSS</h4></header>
227                <section class="sample-view">
228                    <a href="http://example.com">HTTP Link</a>
229                    <a href="https://secure.example.com">HTTPS Link</a>
230                    <a href="/relative/path">Relative Link</a>
231                </section>
232            </section>
233        </article>
234        <article>
235            <h3>Attribute Selectors</h3>
236            <section>
237                <header><h4>CSS</h4></header>
238<pre class="sample">
239img[src$=".png"] {
240    border: 2px solid blue;
241}
242
243img[src$=".jpg"] {
244    opacity: 0.5;
245}
246</pre>
247                <header><h4>HTML</h4></header>
248<pre>
249&lt;img src="pattern.png" alt="PNG Image" width="100"&gt;
250&lt;img src="document.jpg" alt="JPEG Image" width="100"&gt;
251</pre>
252                <header><h4>HTML+CSS</h4></header>
253                <section class="sample-view">
254                    <img src="pattern.png" alt="PNG Image" width="100">
255                    <img src="image.jpg" alt="JPEG Image" width="100">
256                </section>
257            </section>
258        </article>
259
260    </main>
261</body>
262</html>

Detalhes dos Seletores de Atributos no CSS

Os seletores de atributos CSS são usados para selecionar elementos HTML que possuem atributos específicos. Isso permite que você estilize elementos com base nos valores de seus atributos. Agora explicaremos passo a passo desde o básico até o uso avançado dos seletores de atributos.

Tipos e Sintaxe dos Seletores de Atributos

Existem vários tipos de seletores de atributos. Aqui, examinaremos detalhadamente cada tipo de seletor.

Selecionando Elementos com um Atributo 

1a[target] {
2    font-weight: bold;
3}
  • Ao especificar o nome do atributo, você pode selecionar todos os elementos que possuem o atributo especificado.
  • Neste exemplo, todos os elementos <a> com o atributo target têm seu texto em negrito.

Selecionando Elementos com um Valor de Atributo Específico 

1input[type="text"] {
2  border: 2px solid green;
3}
  • O uso de = permite selecionar elementos cujo valor do atributo corresponde exatamente a um valor específico.
  • Neste exemplo, todos os elementos <input> com o atributo type definido como "text" terão uma borda verde aplicada.

Selecionando Elementos com Correspondência Parcial de Valor de Atributo

Você pode especificar correspondências parciais dos valores dos atributos usando os três seletores a seguir.

  1. Começa Com (^=)
1a[href^="https://"] {
2    font-weight: bold;
3}
  • Seleciona elementos onde o valor do atributo começa com a string especificada.
  • Neste exemplo, todos os links com um atributo href começando com "https://" estarão em negrito.
  1. Termina Com ($=)
1img[src$=".jpg"] {
2    border-radius: 10px;
3}
  • Seleciona elementos cujo valor do atributo termina com a string especificada.
  • Neste exemplo, estilos que arredondam os cantos são aplicados a todas as imagens com um atributo src terminando em .jpg.
  1. Contém (*=)
1p[class*="highlight"] {
2    background-color: yellow;
3}
  • Seleciona elementos cujo valor do atributo contém a string especificada.
  • Neste exemplo, uma cor de fundo amarela é aplicada a todos os elementos <p> cujo atributo class contém "highlight".

Selecionando Elementos Onde o Valor do Atributo Contém uma Palavra Separada por Espaços (~=) 

1div[class~="featured"] {
2  border: 1px solid red;
3}
  • ~= seleciona elementos se o valor do atributo contiver uma palavra específica dentro de palavras separadas por espaços em branco.
  • Neste exemplo, uma borda vermelha é aplicada a todos os elementos <div> cujo atributo class contém a palavra "featured".

Selecionando Elementos Onde o Valor do Atributo Começa com um Valor Separado por Hífen (|=) 

1p[lang|="en"] {
2  font-style: italic;
3}
  • |= seleciona elementos se o valor do atributo corresponder à string especificada ou começar com ela seguida por um hífen. É usado principalmente com o atributo de idioma (lang).
  • Neste exemplo, itálico é aplicado a todos os elementos <p> cujo atributo lang começa com "en", como "en" ou "en-US".

Exemplos Práticos e Aplicações

Em seguida, vamos ver alguns cenários práticos.

Estilizando Campos de Entrada de Formulário 
1input[required] {
2  background-color: #ffcccc;
3}
4
5input[placeholder] {
6  font-style: italic;
7  color: #999;
8}
  • Neste exemplo, uma cor de fundo avermelhada é aplicada a todos os campos de entrada com o atributo required, e o texto do espaço reservado dos campos de entrada com o atributo placeholder é estilizado em itálico e com uma cor pálida.
Estilizando com Base em Protocolos de Link 
1a[href^="http://"] {
2  color: orange;
3}
4
5a[href^="https://"] {
6  color: green;
7}
  • Aqui, links que começam com http:// são definidos em laranja, e links que começam com https:// são definidos em verde. Isso permite uma diferenciação visual entre links seguros e não seguros.
Estilizando com Base em Formatos de Imagem 
1img[src$=".png"] {
2  border: 2px solid blue;
3}
4
5img[src$=".jpg"] {
6  opacity: 0.5;
7}
  • Neste exemplo, uma borda azul é adicionada a imagens no formato .png, e a opacidade de imagens no formato .jpg é ajustada para 50%.

Resumo

Os seletores de atributos CSS são uma maneira flexível e poderosa de selecionar elementos com base em atributos HTML. Usar esses seletores permite uma estilização mais específica.

Utilize a sintaxe básica e os exemplos práticos explicados neste artigo para alcançar facilmente um estilo mais avançado.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video

Herança no CSSCaracteres Especiais e Funções em CSS