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 con un atributo title
a[title] {
color: purple;
}

Elementos
con un href que coincida con "https://example.org"
a[href="https://example.org"] {
color: green;
}

Elementos
con un href que contenga "example"
a[href*="example"] {
font-size: 2em;
}

Elementos
con un href que comience con "#"
a[href^="#"] {
color: #001978;
}

Elementos
con un href que termine en ".org"
a[href$=".org"] {
font-style: italic;
}

Elementos
cuyo atributo class contenga la palabra "logo"
a[class~="logo"] {
padding: 2px;
}

Para los idioma tenemos utilizaremos los siguientes ejemplos:


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;
}

Hello World!
Olá Mundo!
世界您好!
世界您好!
?世界您好!