Как выбрать элемент, содержащий только класс "foobar", не выбирать, содержит ли он какие-либо другие классы?

Я хочу только выделить элемент, если он имеет один класс, а этот класс - 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>

Я знаю, что я мог бы выбрать его с добавлением стиля для .foobar.ipsum {сделать что-то} и .foobar {something else}, но у меня нет контроля над дополнительными классами. В основном, когда элемент имеет только класс foobar, я знаю его как элемент и откуда-то из другого. Это то, что происходит, когда миры библиотеки CSS сталкиваются. Я знаю, что здесь есть более глубокие проблемы, но сейчас это меня бросает.

Ответы

Ответ 1

Самый простой способ с чистым CSS - использовать селектор атрибутов:

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

У вас может не быть контроля над другими элементами, но если у вас есть контроль над вашим, и вы можете изменить его атрибут class, mayabelle делает хороший момент присваивая вашему элементу свой собственный специальный класс и вместо этого выбрав этот класс. Таким образом, вы явно указываете, какой элемент принадлежит вам, а не исходя из предположения, что отсутствие дополнительных классов означает его ваш.

Ответ 2

Вам нужно будет использовать селектор атрибутов:

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

http://jsfiddle.net/dA2dp/

Ответ 3

Если это "ваш элемент", вы можете применить к нему дополнительный класс? Затем вы можете выбрать, используя это:

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