несколько селекторов CSS

Question

Я хочу нацелить элемент HTML, когда ОБА селекторы идентификатора и класса совпадают.

Т.е., если fieldset имеет идентификатор 'id1' И класс 'свернут', применяется некоторое правило CSS (чтобы его высота была уменьшена до нуля).

Документы CSS 2.1 предполагают, что несколько селекторов атрибутов могут выполнять эту задачу:

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

Но следующий синтаксис, похоже, не вступает в силу (протестировано в Safari и FFox3):

div[id=id1][class=collapsed] { display: none ; }

Есть ли способ сделать что-то подобное?

div#id1.collapsed { /* rules */ }

Answer 1

Вы все делаете правильно, но порядок селекторов неправильный, вам нужно сначала поместить элемент, затем класс, а затем идентификатор

div.myclass#myid { /*rules*/ }

ВАЖНОЕ РЕДАКТИРОВАНИЕ:

div#myid.myclass { /*rules*/ }

Также работает.

Answer 2

Спасибо, Красти! И спасибо также DarkWulf за предупреждение об IE:)

Кстати, я обнаружил, что у меня был немного неправильный синтаксис для подхода, который я пробовал.

Правильный код для того, что я пробовал (несколько селекторов атрибутов), был бы

div[id="id1"][class~="collapsed"] { /* */ }

Тильда означает, что div [class ~ = "collapsed] будет совпадать с тем же правилом, что и div.collapsed, т.е. с любым из указанных классов.

div[class="collapsed"] { }

соответствует атрибуту класса точно , поэтому он будет соответствовать

<div class="collapsed"></div>

и не будут соответствовать

<div class="collapsible collapsed"></div>

Answer 3

Вы хотите div.myclass#myid { /*rules*/ }, но с одним предупреждением: это не будет работать в IE (как всегда)

См. http://css -discuss.incutio.com /? Page = InternetExplorerWinBugs (в частности, ошибка класса Multiple ID, которая обсуждается в http://archivist.incutio.com/viewlist/css-discuss/60941)