Come faccio a scegliere come target elementi con un attributo che ha un valore in CSS?

So di poter scegliere come target elementi che hanno un attributo specifico in CSS, ad esempio:

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

Ma è possibile scegliere come target elementi che hanno un attributo di qualsiasi valore (tranne niente, cioè quando l'attributo non è stato aggiunto all'elemento)?

Più o meno qualcosa come:

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

Che dovrebbe indirizzare il primo e il terzo <a>tag in questo HTML:

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

Immagino che sia possibile perché per impostazione predefinita, cursor: pointersembra essere applicato a qualsiasi <a>tag che ha un valore per il suo hrefattributo.

Quanto segue corrisponderà a qualsiasi tag di ancoraggio con un relattributo definito:

a[rel]
{
    color: red;
}

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

Aggiornamento: per tenere conto dello scenario @vsync menzionato, nella sezione dei commenti (differenziando tra valori vuoti / non vuoti), potresti incorporare la :not pseudo-classe CSS :

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

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

Sì, nei selettori CSS 3 ci sono diversi selettori di attributi .

Per esempio

[att] Rappresenta un elemento con l'attributo att, qualunque sia il valore dell'attributo.

[att = val] Rappresenta un elemento con l'attributo att il cui valore è esattamente "val".

[att ~ = val] Rappresenta un elemento con l'attributo att il cui valore è un elenco di parole separate da spazi, una delle quali è esattamente "val". Se "val" contiene spazi bianchi, non rappresenterà mai nulla (poiché le parole sono separate da spazi). Inoltre, se "val" è la stringa vuota, non rappresenterà mai nulla.

[att ^ = val] Rappresenta un elemento con l'attributo att il cui valore inizia con il prefisso "val". Se "val" è la stringa vuota, il selettore non rappresenta nulla.

[att $ = val] Rappresenta un elemento con l'attributo att il cui valore termina con il suffisso "val". Se "val" è la stringa vuota, il selettore non rappresenta nulla.

[att * = val] Rappresenta un elemento con l'attributo att il cui valore contiene almeno un'istanza della sottostringa "val". Se "val" è la stringa vuota, il selettore non rappresenta nulla.

Dovrebbe aggiungere che se un browser imposta un attributo per impostazione predefinita potrebbe essere necessario aggirare il problema. Questo non sembra essere un problema nei browser "moderni", tuttavia, questo è un problema che ho riscontrato, quindi assicurati di controllare le prestazioni del browser.

Ad esempio, ho scoperto che in IE prima di 9, colSpan è impostato per tutti i TD in una tabella, quindi ogni singola cella ha il valore colspan nascosto di 1.

Quindi, se stavi mirando a "qualsiasi TD con attributo colspan" che applichi nel tuo webdoc, anche il td che non ha un attributo colspan impostato, come qualsiasi TD che è una singola cella, riceverà lo stile css. IE meno di 9 fondamentalmente li modellerà tutti!

L'unico motivo per preoccuparsi di questo è tutti i restanti utenti di XP là fuori che non possono aggiornare oltre IE8.

Quindi, ad esempio, ho un gruppo di tabelle in cui il contenuto può spostarsi da un capo all'altro, lasciando da 1 a 7 celle vuote alla fine o all'inizio.

Voglio applicare un colore a tutte le celle vuote alla fine o all'inizio utilizzando l'attributo colspan. L'uso di quanto segue non funzionerà in IE inferiore a 9

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

... tutti i TD avranno uno stile (divertente dato che lo stile degli attributi condizionali era apparentemente superiore in IE, ma sto divagando ...).

L'uso di quanto segue funziona su tutti i browser quando imposto il valore di colspan su 'single' per qualsiasi cella solitaria / TD che desidero includere nello schema di stile, tuttavia è un 'hack' e non convaliderà correttamente ...

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

In alternativa dovresti essere in grado di affrontare in modo più appropriato il problema usando lo stile condizionale usando "if lt IE 9" per sovrascrivere. Sarebbe il modo corretto per farlo, tieni presente che devi nascondere il "css costruito correttamente" da IElt9 durante il processo, e penso che l'unico modo corretto per farlo sia con fogli di stile selettivi.

La maggior parte di noi lo fa comunque, ma a prescindere, fai comunque bene a considerare e testare se un browser applica un attributo automatico quando non ne vede nessuno e come può gestire la sintassi altrimenti corretta per lo stile sui valori degli attributi.

(btw, colspan sembra non essere ancora nella specifica css [a partire da css3], quindi questo esempio non genera errori di convalida.)