Esta página ha sido traducida del inglés por la comunidad.Aprende más y únete a la comunidad de MDN Web Docs.
Selectores de atributo
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julio de 2015.
* Some parts of this feature may have varying levels of support.
Elselector 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 atributoattr.
[attr=value]Selecciona los elementos cuyo atributoattr tenga exactamente el valorvalue.
[attr~=value]Selecciona los elementos cuyo atributoattr tenga por valor una lista de palabras separadas por espacios, una de las cuales seavalue.
[attr|=value]Selecciona los elementos cuyo atributoattr tenga exactamente el valorvalue o empiece porvalue seguido de un guión
-(U+002D). Se puede usar para coincidencias de subcódigos en otros idiomas.[attr^=value]Selecciona los elementos cuyo atributoattr tenga un valor prefijado porvalue.
[attr$=value]Selecciona los elementos cuyo atributoattr cuyo valor tiene el sufijo (seguido) devalue.
[attr*=value]Selecciona los elementos cuyo atributoattr tenga un valor que contengavalue.
[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]ExperimentalAgregar 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 unatecnología experimental
Comprueba laTabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.
La especificación HTML requiere que el atributotype 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 atributotype de unalista ordenada no funciona sin el modificador de mayúsculas y minúsculas.
CSS
/*Los tipos de lista requieren poder distinguir entre mayúsculasy minúsculas debido al peculiar comportamiento que tiene HTMLcon 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
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
ParentNodemixin; veaParentNode.querySelector()yParentNode.querySelectorAll()