1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
|
---
title: Selectores de atributo
slug: Learn/CSS/Building_blocks/Selectors/Attribute_selectors
translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors
original_slug: Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_atributos
---
<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p>
<p>Como ya explicamos en los artículos de HTML, los elementos pueden tener atributos que proporcionan un nivel de detalle mayor sobre el elemento que delimitan. En el CSS puedes utilizar selectores de atributo para seleccionar elementos definidos con unos atributos determinados. En este artículo veremos cómo utilizar estos selectores tan útiles.</p>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">Prerrequisitos:</th>
<td>Conocimientos básicos de informática, tener el <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">software básico instalado</a>, conocimientos básicos de <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">trabajar con archivos</a>, HTML básico (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción a HTML</a>) y nociones de cómo funciona el CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Primeros pasos con CSS</a>).</td>
</tr>
<tr>
<th scope="row">Objetivo:</th>
<td>Aprender a identificar y utilizar selectores de atributo.</td>
</tr>
</tbody>
</table>
<h2 id="Selectores_de_presencia_y_valor">Selectores de presencia y valor</h2>
<p>Estos selectores permiten seleccionar un elemento solo a partir de la presencia de un atributo (por ejemplo <code>href</code>) o a partir de varias coincidencias diferentes con respecto al valor del atributo.</p>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Selector</th>
<th scope="col">Ejemplo</th>
<th scope="col">Descripción</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>[<em>attr</em>]</code></td>
<td><code>a[title]</code></td>
<td>Relaciona elementos con un mismo nombre de atributo, <em>attr</em> (el valor que se indica entre corchetes).</td>
</tr>
<tr>
<td><code>[<em>attr</em>=<em>value</em>]</code></td>
<td><code>a[href="https://example.com"]</code></td>
<td>Relaciona elementos con un mismo nombre de atributo, <em>attr</em>, cuyo valor es exactamente el mismo, <em>value</em> (la cadena de caracteres que se indica entre corchetes).</td>
</tr>
<tr>
<td><code>[<em>attr</em>~=<em>value</em>]</code></td>
<td><code>p[class~="special"]</code></td>
<td>
<p>Relaciona los elementos con un mismo nombre de atributo, <em>attr</em>, cuyo valor es exactamente <em>value</em>, o los elementos con un mismo atributo <em>attr</em> que contiene uno o más valores de los cuales, al menos uno, coincide con <em>value</em>.</p>
<p>Ten en cuenta que en una lista que incluya más de un valor, los distintos valores se separan con un espacio.</p>
</td>
</tr>
<tr>
<td><code>[<em>attr</em>|=<em>value</em>]</code></td>
<td><code>div[lang|="zh"]</code></td>
<td>Relaciona los elementos con un mismo nombre de atributo, <em>attr</em>, cuyo valor puede ser exactamente <em>value</em> o puede comenzar con <em>value</em> seguido inmediatamente por un guion.</td>
</tr>
</tbody>
</table>
<p>En el ejemplo siguiente puedes observar cómo se utilizan estos selectores.</p>
<ul>
<li>Mediante el uso de <code>li[class]</code> podemos relacionar cualquier selector con un atributo de clase. Los relaciona todos menos el primer elemento de la lista.</li>
<li><code>li[class="a"]</code> relaciona un selector con una clase de <code>a</code>, pero no un selector con una clase de <code>a</code> con otra clase separada por un espacio como parte del valor. Selecciona el segundo elemento de la lista.</li>
<li><code>li[class~="a"]</code> coincidirá con una clase <code>a</code> pero también con un valor que contenga la clase de <code>a</code> como parte de una lista de elementos separados por un espacio. Selecciona el segundo y el tercer elemento de la lista.</li>
</ul>
<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}</p>
<h2 id="Selectores_coincidentes_con_subcadenas">Selectores coincidentes con subcadenas</h2>
<p>Estos selectores permiten un tipo más avanzado de relación entre las subcadenas de caracteres que constituyen el valor del atributo. Por ejemplo, si tienes las clases <code>box-warning</code> y <code>box-error</code> y quieres encontrar todos los elementos que empiezan con la cadena de caracteres “box-”, puedes seleccionarlas ambas con <code>[class^="box-"]</code>.</p>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Selector</th>
<th scope="col">Ejemplo</th>
<th scope="col">Descripción</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>[<em>attr</em>^=<em>value</em>]</code></td>
<td><code>li[class^="box-"]</code></td>
<td>Relaciona elementos con un mismo nombre de atributo, <em>attr</em>, cuyo valor empieza exactamente con la subcadena de caracteres <em>value</em>.</td>
</tr>
<tr>
<td><code>[<em>attr</em>$=<em>value</em>]</code></td>
<td><code>li[class$="-box"]</code></td>
<td>Relaciona elementos con un mismo nombre de atributo, <em>attr</em>, cuyo valor termina exactamente con la subcadena de caracteres <em>value</em>.</td>
</tr>
<tr>
<td><code>[<em>attr</em>*=<em> </em>]</code></td>
<td><code>li[class*="box"]</code></td>
<td>Relaciona elementos con un mismo nombre de atributo, <em>attr</em>, cuyo valor incluye al menos una ocurrencia de la subcadena <em>value</em> en algún punto de la cadena.</td>
</tr>
</tbody>
</table>
<p>El ejemplo siguiente muestra cómo se usan estos selectores:</p>
<ul>
<li><code>li[class^="a"]</code> relaciona cualquier valor de atributo que empieza con <code>a</code>; luego, relaciona los dos primeros elementos de la lista se verán iguales.</li>
<li><code>li[class$="a"]</code> relaciona cualquier valor de atributo que termina con <code>a</code>; luego, relaciona el primer y el tercer elemento de la lista.</li>
<li><code>li[class*="a"]</code> relaciona cualquier valor de atributo que contiene <code>a</code> en cualquier posición; luego, relaciona todos los elementos de la lista.</li>
</ul>
<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}</p>
<h2 id="Mayúsculas_y_minúsculas">Mayúsculas y minúsculas</h2>
<p>Si quieres relacionar los valores de atributo tanto si están escritos en mayúsculas como en minúsculas, puedes utilizar el valor <code>i</code> antes del paréntesis de cierre. Este indicador informa al navegador de que debe relacionar todos los caracteres ASCII independientemente de si las letras son mayúsculas o minúsculas. Sin este indicador, los valores se relacionarán según las directrices del lenguaje del documento con respecto a la distinción entre mayúsculas y minúsculas; en el caso del HTML, se distinguirá entre mayúsculas y minúsculas.</p>
<p>En el ejemplo siguiente, el primer selector relaciona valores que empiezan con <code>a</code>; luego, solo coincide el primer elemento de la lista porque los otros dos comienzan con una A mayúscula. El segundo selector utiliza el indicador de no distinción entre mayúsculas y minúsculas, así que relaciona todos los elementos de la lista.</p>
<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}</p>
<div class="blockIndicator note">
<p><strong>Nota</strong>: Recientemente se ha creado un valor <code>s</code>, que obliga a establecer la distinción de mayúsculas y minúsculas en contextos en que no se suele establecer esta distinción. Sin embargo, pocos navegadores lo utilizan y no resulta demasiado útil en un contexto HTML.</p>
</div>
<h2 id="Próximos_pasos">Próximos pasos</h2>
<p>Ahora que hemos terminado con los selectores de atributo, puedes avanzar al artículo siguiente y leer acerca de los <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">selectores de pseudoclases y pseudoelementos</a>.</p>
<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p>
<h2 id="En_este_módulo">En este módulo</h2>
<ol>
<li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">La cascada y la herencia</a></li>
<li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selectores CSS</a>
<ul>
<li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Selectores de tipo, de clase y de ID</a></li>
<li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Selectores de atributo</a></li>
<li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Las pseudoclases y los pseudoelementos</a></li>
<li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Operadores de combinación</a></li>
</ul>
</li>
<li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El modelo de caja</a></li>
<li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fondos y bordes</a></li>
<li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El uso de diferentes direcciones de texto</a></li>
<li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordamiento de los contenidos</a></li>
<li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Los valores y las unidades</a></li>
<li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Elementos de dimensionado en CSS</a></li>
<li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imágenes, media y elementos de formulario</a></li>
<li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estilo a las tablas</a></li>
<li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depurar el CSS</a></li>
<li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizar el CSS</a></li>
</ol>
|
