NamelessOne Sep 22 2008 at 07:35

Стилевые описания для нескольких селекторов, указанных одновременно

2 min

1.7K

Lumber room

+15

Comments 25

chip Sep 22 2008 at 07:44

> Хочу поделиться с хабрасообществом одним полезным свойством, которое не так часто используется

Ну незнаю, я думал это везде используется, и знакомо всем кто использует css…

Devgru Sep 22 2008 at 07:47

Что-то у меня по этому посту смутно всплывает воспоминание, что это не работает в IE6. Или работает, но не всегда… Был там какой-то нюанс точно.

NamelessOne Sep 22 2008 at 07:50

Работает точно в ie 6, 5.5 и 5, более ранние не знаю.

Devgru Sep 22 2008 at 08:01

Хм, надо будет проверить. У меня в своё время не работало, хотя наверное я что-то не так сделал (например забыл пробел перед «{» :-)

arestov Sep 22 2008 at 08:04

глючно работает
www.quirksmode.org/css/contents.html

NamelessOne Sep 22 2008 at 08:10

За полезную ссылку — спасибо! :)
По существу — я пока не сталкивался с реальными проявлениями этого «buggy», собственно, поэтому сюда и выложил. Если вы опишете реальные примеры — буду очень благодарен

Devgru Sep 22 2008 at 08:12

Там же:

Note the last rule: it says «any p that has a class underline AND small». Explorer 6- doesn't read this last rule correctly; it applies it to any paragraph that has a class «small».

Devgru Sep 22 2008 at 08:13


p.underline.small {font-variant: small-caps;}

NamelessOne Sep 22 2008 at 08:26

Да, действительно, с IE не так все однозначно оказалось, нужно быть внимательным.
Спасибо

arestov Sep 22 2008 at 08:23

это же не единственное бажное поведение, а единственное установленное заномерное бажное поведение
у меня не работало иначе:
.nav-math li.first.uncollapsed{} срабатывало как .nav-math li{}

Devgru Sep 22 2008 at 08:33

Я просто хотел показать что это потенциальное место для ошибок. Какие конкретно будут баги — уже дело другое… :)

no_smoking Sep 22 2008 at 08:30

Вот пример

no_smoking Sep 22 2008 at 08:31

в ие6 бордер будет у обоих дивов а должен только у первого :)

no_smoking Sep 22 2008 at 08:32

Блин куда код дивается…


<html>
<head>
<style>
.button,.button2 {width:100px;height:20px;background:#0FF}
.button.hover {border:1px solid #F0F}
</style>
</head>
<body>
<div class="button hover"></div>
<div class="button2 hover"></div>
</body>
</html>

NamelessOne Sep 22 2008 at 08:35

Да, спасибо
Уже ясно, что напрасно появляются иногда надежды, что IE делает что-то как нужно. Даже если при долгом использовании в разных проектах кажется, что все ок — это далеко не значит, что однажды он не подложит свинью…

no_smoking Sep 22 2008 at 08:46

В одном проекте накололся на этом, потом пришлось все переделывать :( а там и css и много много javascripta было замешано.

Eyes Sep 22 2008 at 12:39

Если «.button.hover» заменить на «.hover.button» — то бордер будет только у первого.

no_smoking Sep 22 2008 at 17:28

А знаете почему? Я отвечу потому, что применяется стиль к последнему классу, те у всех элементов с классом button будет бордер а это не совсем то что надо :)

UFO landed and left these words here

NamelessOne Sep 22 2008 at 07:50

да, уже откомментировал выше

NamelessOne Sep 22 2008 at 08:37

работает, но с багами :)

UFO landed and left these words here

kostos Sep 22 2008 at 08:01

это правило будет применяться, когда указаны одновременно оба предыдущих класса

Так по этому редко и применяется — не универсально. Хотя, иногда бывает полезно.
Лично мое мнение, лучше написать два класса например:

.red {color: red}
.blue {color: blue}

И применять их где угодно, а не в определенных тегах.

NamelessOne Sep 22 2008 at 08:07

Кроме классов можно комбинировать и селекторы атрибутов, в любых вариациях. В сложных динамических проектах иногда это позволяет избежать лишних вложенных тегов.
Хотя, разумеется, это не панацея и всегда нужно смотреть по ситуации

kostos Sep 22 2008 at 08:14

Я же и говорю, что иногда полезно. Сам использую, но не так часто, как приведенный пример.