El CSS selector de atributos coincide con elementos en función de la presencia o el valor de un atributo determinado.
/* <a> elements with a title attribute */ aCss Attribute selectors example { color: purple; } /* <a> elements with an href matching "https://example.org" */ a[href="https://example.org"] { color: green; } /* <a> elements with an href containing "example" */ a[href*="example"] { font-size: 2em; } /* <a> elements with an href ending ".org" */ a[href$=".org"] { font-style: italic; } /* <a> elements whose class attribute contains the word "logo" */ a[class~="logo"] { padding: 2px; }
Sintaxis
[attr]
- Representa elementos con un nombre de atributo de attr.
[attr=value]
- Representa elementos con un nombre de atributo de attr cuyo valor es exactamente valor.
[attr~=value]
- Representa elementos con un nombre de atributo de attr cuyo valor es una lista de palabras separadas por espacios en blanco, una de las cuales es exactamente valor.
[attr|=value]
- Representa elementos con un nombre de atributo de attr cuyo valor puede ser exactamente valor o puede empezar con valor seguido inmediatamente de un guion,
-
(U + 002D). A menudo se utiliza para coincidencias de subcódigo de idioma. [attr^=value]
- Representa elementos con un nombre de atributo de attr cuyo valor está prefijado (precedido) por valor.
[attr$=value]
- Representa elementos con un nombre de atributo de attr cuyo valor tiene el sufijo (seguido) por valor.
[attr*=value]
- Representa elementos con un nombre de atributo de attr cuyo valor contiene al menos una aparición de valor dentro de la cadena.
[attr operator value i]
- Añadiendo un
i
(oI
) antes del corchete de cierre hace que el valor se compare sin distinción entre mayúsculas y minúsculas (para caracteres dentro del rango ASCII). -
[attr operator value s]
Esta es una API experimental que no debe usarse en código de producción. - Añadiendo un
s
(oS
) antes del corchete de cierre hace que el valor se compare entre mayúsculas y minúsculas (para caracteres dentro del rango ASCII).
Ejemplos de
Enlaces
CSS
a { color: blue; } /* Internal links, beginning with "#" */ a[href^="#"] { background-color: gold; } /* Links with "example" anywhere in the URL */ a[href*="example"] { background-color: silver; } /* Links with "insensitive" anywhere in the URL, regardless of capitalization */ a[href*="insensitive" i] { color: cyan; } /* Links with "cAsE" anywhere in the URL, with matching capitalization */ a[href*="cAsE" s] { color: pink; } /* Links that end in ".org" */ a[href$=".org"] { color: red; } /* Links that start with "https" and end in ".org" */ a[href^="https"][href$=".org"] { color: green; }
HTML
<ul> <li><a href="#internal">Internal link</a></li> <li><a href="http://example.com">Example link</a></li> <li><a href="#InSensitive">Insensitive internal link</a></li> <li><a href="http://example.org">Example org link</a></li> <li><a href="https://example.org">Example https org link</a></li> </ul>
Resultado
Idiomas
CSS
/* All divs with a `lang` attribute are bold. */ div[lang] { font-weight: bold; } /* All divs without a `lang` attribute are italicized. */ div:not([lang]) { font-style: italic; } /* All divs in US English are blue. */ div[lang~="en-us"] { color: blue; } /* All divs in Portuguese are green. */ div[lang="pt"] { color: green; } /* All divs in Chinese are red, whether simplified (zh-CN) or traditional (zh-TW). */ div[lang|="zh"] { color: red; } /* All divs with a Traditional Chinese `data-lang` are purple. */ /* Note: You could also use hyphenated attributes without double quotes */ 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 en HTML
La especificación HTML requiere type
atributo para ser emparejado sin distinción entre mayúsculas y minúsculas debido a que se utiliza principalmente en el <input>
elemento, tratando de utilizar selectores de atributos para con el type
atributo de un lista ordenada no funciona sin el modificador que distingue entre mayúsculas y minúsculas.
CSS
/* List types require the case sensitive flag due to a quirk in how HTML treats the type attribute. */ 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>
Resultado
Especificaciones
Especificación | Estado | Comentario |
---|---|---|
Selectores Nivel 4 La definición de ‘selectores de atributos’ en esa especificación. |
Borrador de trabajo | Agrega un modificador para la selección de valores de atributo que distinguen entre mayúsculas y minúsculas y no distingue entre mayúsculas y minúsculas ASCII. |
Selectores Nivel 3 La definición de ‘selectores de atributos’ en esa especificación. |
Recomendación | |
CSS Nivel 2 (Revisión 1) La definición de ‘selectores de atributos’ en esa especificación. |
Recomendación | Definición inicial |
Compatibilidad del navegador
Escritorio | Móvil | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Cromo | Borde | Firefox | explorador de Internet | Ópera | Safari | WebView Android | Chrome Android | Firefox para Android | Opera Android | Safari en IOS | Internet de Samsung | |
Attribute_selectors |
1 | 12 | 1 | 7 | 9 | 3 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |
case_insensitive_modifier |
49 | 79 | 47 | No | 36 | 9 | 49 | 49 | 47 | 36 | 9 | 5,0 |
case_sensitive_modifier |
Sin ver error 1041095. |
Sin ver error 1041095. |
66 | No |
Sin ver error 1041095. |
No |
Sin ver error 1041095. |
Sin ver error 1041095. |
66 |
Sin ver error 1041095. |
No |
Sin ver error 1041095. |
Ver también
attr()
- Seleccionar 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 la
ParentNode
mixin; verParentNode.querySelector()
yParentNode.querySelectorAll()
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)