Como faço para direcionar elementos com um atributo que tem algum valor em CSS?

Eu sei que posso direcionar elementos que têm um atributo específico em CSS, por exemplo:

input[type=text]
{
    font-family: Consolas;
}

Mas é possível direcionar elementos que têm um atributo de qualquer valor (exceto nada, ou seja, quando o atributo não foi adicionado ao elemento)?

Mais ou menos algo como:

a[rel=*]
{
    color: red;
}

Que deve ter como alvo a primeira e a terceira <a>tags neste HTML:

<a href="#" rel="eg">red text</a>
<a href="#">standard text</a>
<a href="#" rel="more">red text again</a>

Eu acho que é possível porque, por padrão, cursor: pointerparece ser aplicado a qualquer <a>tag que tenha um valor para seu hrefatributo.

O seguinte corresponderá a qualquer tag âncora com um relatributo definido:

a[rel]
{
    color: red;
}

http://www.w3.org/TR/CSS2/selector.html#pattern-matching

Atualização: Para dar conta do cenário @vsync mencionado, na seção de comentários (diferenciando entre valores vazios / não vazios), você pode incorporar a :not pseudoclasse CSS :

a[rel]:not([rel=""])
{
    color: red;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/:not

Sim, nos seletores CSS 3 existem vários seletores de atributos .

Por exemplo

[att] Representa um elemento com o atributo att, seja qual for o valor do atributo.

[att = val] Representa um elemento com o atributo att cujo valor é exatamente "val".

[att ~ = val] Representa um elemento com o atributo att cujo valor é uma lista de palavras separadas por espaços em branco, uma das quais é exatamente "val". Se "val" contiver espaços em branco, nunca representará nada (já que as palavras são separadas por espaços). Além disso, se "val" for uma string vazia, ela nunca representará nada.

[att ^ = val] Representa um elemento com o atributo att cujo valor começa com o prefixo "val". Se "val" for a string vazia, o seletor não representa nada.

[att $ = val] Representa um elemento com o atributo att cujo valor termina com o sufixo "val". Se "val" for a string vazia, o seletor não representa nada.

[att * = val] Representa um elemento com o atributo att cujo valor contém pelo menos uma instância da substring "val". Se "val" for a string vazia, o seletor não representa nada.

Deve adicionar que se um navegador define um atributo por padrão, você pode precisar contornar. Isso não parece ser um problema em navegadores "modernos", no entanto, é um problema que tenho visto, portanto, certifique-se de verificar o desempenho entre navegadores.

Por exemplo, descobri que no IE anterior a 9, colSpan é definido para todos os TDs em uma tabela, portanto, qualquer célula tem o valor colspan oculto de 1.

Portanto, se você tiver como alvo "qualquer TD com atributo colspan" que aplicar em seu webdoc, mesmo o td não tendo nenhum atributo colspan definido, como qualquer TD sendo uma única célula, receberá o estilo css. Ou seja, menos de 9 basicamente estilizará todos eles!

O único motivo de preocupação com isso são todos os usuários do XP restantes que não podem atualizar acima do IE8.

Por exemplo, tenho um grupo de tabelas onde o conteúdo pode mudar de ponta a ponta, deixando de 1 a 7 células em branco no final ou no início.

Desejo aplicar uma cor a todas as células em branco no final ou no início, utilizando o atributo colspan. Usar o seguinte não funcionará no IE inferior a 9

#my td[colspan] {background-color:blue;}

... todos os TDs serão estilizados (engraçado, já que o estilo do atributo condicional era supostamente superior no IE, mas estou divagando ...).

Usar o seguinte funciona em todos os navegadores quando defino o valor de colspan como 'single' para qualquer célula solitária / TD que desejo incluir no esquema de estilo, no entanto, é um 'hack' e não validará corretamente ...

#my td[colspan="single"] {background-color:blue;} /* 'single' could be anything */
#my td[colspan="2"] {background-color:blue;}
#my td[colspan="3"] {background-color:blue;}
#my td[colspan="4"] {background-color:blue;}
#my td[colspan="5"] {background-color:blue;}
#my td[colspan="6"] {background-color:blue;}
#my td[colspan="7"] {background-color:blue;}

Alternativamente, você deve ser capaz de resolver o problema de maneira mais apropriada usando um estilo condicional usando "if lt IE 9" para substituir. Seria a maneira correta de fazer isso, mas lembre-se de que você deve ocultar o "css adequadamente construído" do IElt9 no processo, e acho que a única maneira adequada de fazer isso é com folhas de estilo seletivas.

A maioria de nós já faz isso de qualquer maneira, mas independentemente disso, você ainda deve considerar e testar se um navegador aplica um atributo automático quando não vê nenhum, e como ele pode lidar com sua sintaxe correta para definir o estilo dos valores de atributo.

(aliás, o colspan não está na especificação do css ainda [a partir do css3], então este exemplo não gera nenhum erro de validação.)