Selectores de atributo
El selector de atributos CSS coincide con los elementos en función de la presencia o el valor de un atributo determinado.
/* Elementos <a> con un atributo title */
a[title] {
color: purple;
}
/* Elementos <a> con un href que coincida con "https://example.org" */
a[href="https://example.org"]
{
color: green;
}
/* Elementos <a> con un href que contenga "example" */
a[href*="example"] {
font-size: 2em;
}
/* Elementos <a> con un href que comience con "#" */
a[href^="#"] {
color: #001978;
}
/* Elementos <a> con un href que termine en ".org" */
a[href$=".org"] {
font-style: italic;
}
/* Elementos <a> cuyo atributo class contenga la palabra "logo" */
a[class~="logo"] {
padding: 2px;
}
[attr]
-
Selecciona los elementos que tienen el atributo attr.
[attr=value]
-
Selecciona los elementos cuyo atributo attr tenga exactamente el valor value.
[attr~=value]
-
Selecciona los elementos cuyo atributo attr tenga por valor una lista de palabras separadas por espacios, una de las cuales sea value.
[attr|=value]
-
Selecciona los elementos cuyo atributo attr tenga exactamente el valor value o empiece por value seguido de un guión
-
(U+002D). Se puede usar para coincidencias de subcódigos en otros idiomas. [attr^=value]
-
Selecciona los elementos cuyo atributo attr tenga un valor prefijado por value.
[attr$=value]
-
Selecciona los elementos cuyo atributo attr cuyo valor tiene el sufijo (seguido) de value.
[attr*=value]
-
Selecciona los elementos cuyo atributo attr tenga un valor que contenga value.
[attr operator value i]
-
Agregar una
i
(oI
) antes del corchete de cierre hace que el valor sea comparado sin distinguir entre mayúsculas y minúsculas (para caracteres dentro del rango ASCII). [attr operator value s]
Experimental-
Agregar una
s
(oS
) antes del corchete de cierre hace que el valor sea comparado distinguiendo entre mayúsculas y minúsculas (para caracteres dentro del rango ASCII).
Ejemplos
Enlaces
CSS
a {
color: blue;
}
/* Enlaces internos, comenzando con "#" */
a[href^="#"] {
background-color: gold;
}
/* Enlaces con "example" en cualquier parte de la URL */
a[href*="example"] {
background-color: silver;
}
/* Enlaces con "insensitive" en cualquier parte de la URL,
independientemente de las mayúsculas */
a[href*="insensitive" i] {
color: cyan;
}
/* Enlaces que terminan en ".org" */
a[href$=".org"] {
color: red;
}
HTML
<ul>
<li><a href="#internal">Enlace interno</a></li>
<li><a href="http://example.com">Enlace de ejemplo</a></li>
<li><a href="#InSensitive">Enlace interno insensible Insensitive</a></li>
<li><a href="http://example.org">Ejemplo de enlace .org</a></li>
</ul>
Resultado
Idiomas
CSS
/* Todos los divs con un atributo `lang` están en negrita. */
div[lang] {
font-weight: bold;
}
/* Todos los divs en inglés de EE. UU. son azules. */
div[lang~="en-us"] {
color: blue;
}
/* Todos los divs en portugués son verdes. */
div[lang="pt"] {
color: green;
}
/* Todos los divs en chino son rojos, ya sean
simplificados (zh-CN) o tradicionales (zh-TW). */
div[lang|="zh"] {
color: red;
}
/* Todos los divs con `data-lang` Traditional Chinese
son de color púrpura. */
/* Nota: también puede usar atributos con guiones
sin comillas dobles */
div[data-lang="zh-TW"] {
color: purple;
}
HTML
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
<div lang="pt">Olá Mundo!</div>
<div lang="zh-CN">世界您好!</div>
<div lang="zh-TW">世界您好!</div>
<div data-lang="zh-TW">?世界您好!</div>
Resultado
Listas Ordenadas
Experimental: Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.
La especificación HTML requiere que el atributo type
distinga entre mayúsculas y minúsculas debido a que se usa principalmente en el elemento <input>
, tratando de usar selectores de atributos con el atributo type
de una lista ordenada no funciona sin el modificador de mayúsculas y minúsculas.
CSS
/*
Los tipos de lista requieren poder distinguir entre mayúsculas
y minúsculas debido al peculiar comportamiento que tiene HTML
con el atributo "type"
*/
ol[type="a"] {
list-style-type: lower-alpha;
background: red;
}
ol[type="a" s] {
list-style-type: lower-alpha;
background: lime;
}
ol[type="A" s] {
list-style-type: upper-alpha;
background: lime;
}
HTML
<ol type="A">
<li>Example list</li>
</ol>
Result
Especificaciones
Specification |
---|
Selectors Level 4 # attribute-selectors |
Compatibilidad con navegadores
BCD tables only load in the browser
Ver también
- Seleccionando un solo elemento:
Document.querySelector()
,DocumentFragment.querySelector()
, oElement.querySelector()
- Seleccionar todos los elementos coincidentes:
Document.querySelectorAll()
,DocumentFragment.querySelectorAll()
, oElement.querySelectorAll()
- Todos los métodos anteriores se implementan en base a
ParentNode
mixin; veaParentNode.querySelector()
yParentNode.querySelectorAll()