it-swarm.com.ru

CSS Selector, который применяется к элементам с двумя классами

Есть ли способ выбрать элемент с CSS на основе значения атрибута класса, заданного для двух конкретных классов. Например, допустим, у меня есть 3 деления:

<div class="foo">Hello Foo</div>
<div class="foo bar">Hello World</div>
<div class="bar">Hello Bar</div>

Какой CSS можно написать, чтобы выбрать ТОЛЬКО второй элемент в списке, основываясь на том факте, что он является членом обоих классов foo И bar?

405
Adam

Цепи обоих селекторов класса (без пробела между ними):

.foo.bar {
    /* Styles for element(s) with foo AND bar classes */
}

Если вам все еще приходится иметь дело с древними браузерами, такими как IE6, имейте в виду, что он не правильно читает цепочечные селекторы классов: вместо этого он будет читать только последний селектор классов (в данном случае .bar), независимо от из каких других классов вы перечисляете.

Чтобы проиллюстрировать, как другие браузеры и IE6 интерпретируют это, рассмотрим следующий CSS:

* {
    color: black;
}

.foo.bar {
    color: red;
}

Вывод в поддерживаемых браузерах:

<div class="foo">Hello Foo</div>       <!-- Not selected, black text [1] -->
<div class="foo bar">Hello World</div> <!-- Selected, red text [2] -->
<div class="bar">Hello Bar</div>       <!-- Not selected, black text [3] -->

Результат на IE6:

<div class="foo">Hello Foo</div>       <!-- Not selected, black text [1] -->
<div class="foo bar">Hello World</div> <!-- Selected, red text [2] -->
<div class="bar">Hello Bar</div>       <!-- Selected, red text [2] -->

Примечания:

  • Поддерживаемые браузеры:
    1. не выбран так как этот элемент имеет только класс foo.
    2. Выбрано так как этот элемент имеет оба класса foo и bar.
    3. не выбран так как этот элемент имеет только класс bar.

  • IE6:
    1. не выбран так как этот элемент не имеет класса bar.
    2. Выбрано поскольку этот элемент имеет класс bar, независимо от других перечисленных классов.
638
BoltClock