Come selezionare l'elemento che contiene solo la classe di "foobar", non selezionare se contiene altre classi?

Question

Voglio selezionare solo l'elemento se ha una classe e quella classe è 'foobar'.

<style> 
.foobar { 
    /* only apply to an element if the element has a class and the only class is 'foobar'. */ 
    background: black; 
    color: white; 
} 
</style> 

<div class="foobar">i should be selected</div> 

<div class="foobar ipsum">i should not be selected</div> 

So che potrei selezionarlo con l'aggiunta di uno stile per .foobar.ipsum {fare una cosa} e {.foobar qualcos'altro}, ma non ho il controllo sulle classi aggiuntive. Fondamentalmente quando l'elemento ha solo la classe foobar, so che è il mio elemento e viene da qualche altra parte. Questo è ciò che accade quando i mondi della Libreria CSS si scontrano. So che ci sono problemi più profondi da risolvere qui, ma questo mi sta bloccando in questo momento.

Answer 1

Il modo più semplice con CSS puro è quello di utilizzare un selettore di attributo:

[class="foobar"] { 
    /* only apply to an element if the element has a class and the only class is 'foobar'. */ 
    background: black; 
    color: white; 
} 

Tu non puoi avere il controllo su altri elementi, ma se si ha il controllo su vostra e si può modificare l'attributo class, mayabelle makes a good point sull'assegnazione dell'elemento alla propria classe speciale e sulla selezione di quella classe. In questo modo dichiari esplicitamente quale elemento è tuo piuttosto che seguire il presupposto che non avere classi addizionali significhi che è tuo.

Answer 2

Sarà necessario utilizzare un attribute selector:

[class="foobar"] { 
    background: black; 
} 

http://jsfiddle.net/dA2dp/

Answer 3

Se è il "vostro elemento", si può applicare una classe aggiuntiva ad esso? Quindi è possibile selezionare utilizzando:

<style> 
.foobar.yourClass { 
    /* your css */ 
} 
</style> 

<div class="foobar yourClass">i should be selected</div> 
<div class="foobar ipsum">i should not be selected</div>