Articles
Introducción a CSS
Detalles de los selectores de atributos en CSS

Detalles de los selectores de atributos en CSS

Este artículo explica los detalles de los selectores de atributos en CSS.

Puedes aprender a escribir coincidencia hacia adelante, coincidencia hacia atrás y coincidencia parcial para selectores de atributos.

YouTube Video

HTML para vista previa

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>

Detalles de los selectores de atributos en CSS

Los selectores de atributos en CSS se utilizan para seleccionar elementos HTML que tienen atributos específicos. Esto te permite dar estilo a los elementos según los valores de sus atributos. Ahora explicaremos paso a paso desde los conceptos básicos hasta el uso avanzado de los selectores de atributos.

Tipos y sintaxis de los selectores de atributos

Existen varios tipos de selectores de atributos. Aquí, echaremos un vistazo detallado a cada tipo de selector.

Seleccionar elementos con un atributo 

1a[target] {
2    font-weight: bold;
3}
  • Especificando el nombre del atributo, puedes seleccionar todos los elementos que tienen el atributo especificado.
  • En este ejemplo, todos los elementos <a> con el atributo target tienen su texto en negrita.

Seleccionar elementos con un valor de atributo específico 

1input[type="text"] {
2  border: 2px solid green;
3}
  • Usar = te permite seleccionar elementos cuyo valor del atributo coincide exactamente con un valor específico.
  • En este ejemplo, todos los elementos <input> cuyo atributo type esté configurado como "text" tendrán un borde verde aplicado.

Seleccionar elementos con coincidencia parcial del valor del atributo

Puedes especificar coincidencias parciales de valores de atributos usando los tres selectores siguientes.

  1. Empieza con (^=)
1a[href^="https://"] {
2    font-weight: bold;
3}
  • Selecciona elementos donde el valor del atributo comienza con la cadena especificada.
  • En este ejemplo, todos los enlaces con un atributo href que comienza con "https://" estarán en negrita.
  1. Termina con ($=)
1img[src$=".jpg"] {
2    border-radius: 10px;
3}
  • Selecciona elementos cuyo valor de atributo termina con la cadena especificada.
  • En este ejemplo, se aplican estilos con esquinas redondeadas a todas las imágenes con un atributo src que termina en .jpg.
  1. Contiene (*=)
1p[class*="highlight"] {
2    background-color: yellow;
3}
  • Selecciona elementos cuyo valor de atributo contiene la cadena especificada.
  • En este ejemplo, se aplica un color de fondo amarillo a todos los elementos <p> cuyo atributo class contiene "highlight".

Seleccionar elementos donde el valor del atributo contiene una palabra separada por espacios (~=) 

1div[class~="featured"] {
2  border: 1px solid red;
3}
  • ~= selecciona elementos si el valor del atributo contiene una palabra específica dentro de palabras separadas por espacios.
  • En este ejemplo, se aplica un borde rojo a todos los elementos <div> cuyo atributo class contiene la palabra "featured".

Seleccionando elementos donde el valor del atributo comienza con un valor separado por un guion (|=) 

1p[lang|="en"] {
2  font-style: italic;
3}
  • |= selecciona elementos si el valor del atributo coincide con la cadena especificada o comienza con ella seguida de un guion. Se utiliza principalmente con el atributo de idioma (lang).
  • En este ejemplo, se aplica cursiva a todos los elementos <p> cuyo atributo lang comienza con "en", como "en" o "en-US".

Ejemplos prácticos y aplicaciones

A continuación, veamos algunos escenarios prácticos.

Estilizando campos de entrada de formularios 
1input[required] {
2  background-color: #ffcccc;
3}
4
5input[placeholder] {
6  font-style: italic;
7  color: #999;
8}
  • En este ejemplo, se aplica un color de fondo rojizo a todos los campos de entrada con el atributo required, y el texto del marcador de posición de los campos de entrada con el atributo placeholder se estiliza en cursiva y con un color pálido.
Estilizando según protocolos de enlace 
1a[href^="http://"] {
2  color: orange;
3}
4
5a[href^="https://"] {
6  color: green;
7}
  • Aquí, los enlaces que comienzan con http:// se configuran en naranja, y los que comienzan con https:// se configuran en verde. Esto permite una diferenciación visual entre los enlaces seguros y no seguros.
Estilizando según formatos de imagen 
1img[src$=".png"] {
2  border: 2px solid blue;
3}
4
5img[src$=".jpg"] {
6  opacity: 0.5;
7}
  • En este ejemplo, se agrega un borde azul a las imágenes en formato .png, y la opacidad de las imágenes en formato .jpg se establece al 50%.

Resumen

Los selectores de atributos de CSS son una forma flexible y poderosa de seleccionar elementos en función de los atributos de HTML. Usar estos selectores permite un estilo más específico.

Utiliza la sintaxis básica y los ejemplos aplicados explicados en este artículo para lograr un estilo más avanzado fácilmente.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video

Herencia en CSSCaracteres especiales y funciones en CSS