Селектор обобщенных родственных элементов

[jMas]

Все понятно, спасибо за примеры. Новый селектер в активе.

[BR0kEN]

Буквально 20 минут назад написал $(«div.slide_item»).hover( function () { $(«a.video_button»).toggleClass(«video_button_hover»); });.

А все потому, что не знал о "~".

Голосовать не могу. Спасибо вам, хотя бы текстом.

[TITOFF]

Ох и минусанул бы я тому козлу, который Вам минусанул.

Автору много плюсиков! Это шедеврально!

Сижу балуюсь ))))

Почему то не работает DIV~DIV (хочу второй вложенный элемент покрасить)

[Niksg]

Если у вас оба дива имеют общего родителя, то заработает

[Niksg]

jsfiddle.net/CUuFc/1/

[TITOFF]

Не знаю как у вас а у меня покрасился в красный только второй DIV.
Разве они не оба должны были?

[Niksg]

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

[Akuma]

Добавьте, пожалуйста, в статью информацию о кросс-браузерности данного селектора

[realise]

Говорят, что поддерживают все нормальные браузеры, и IE 7+
www.quirksmode.org/css/contents.html

Так что вполне можно использовать в продакшене

[caffeinum]

А поддерживает ли его jQuery-селектор?

[Akuma]

На счет селектора — не пробовал, но есть метод siblings

[Vend3tta]

Селектор '~' и метод .sbilings() — не одно и то же, поскольку второе выбирает элементы вне зависимости от того, до или после заданного элемента они находятся.

[zerkms]

Если его поддерживает браузер — то jquery его поддерживает тем более. По дефолту sizzle пытается использовать `document.querySelectorAll`, и если он валится — тогда он перелючается на свой парсер, который поддерживает чуть более обширный список поддерживаемых селекторов.

[Niksg]

Конечно поддерживает. Вот посмотрите тут описание.

[Vend3tta]

Этот селектор еще хорошо подходит для осуществления всяких красивостей и некоего функционала при помощи связки input + label, как например здесь. Уверен, в ближайшем будущем появятся новые варианты использования такой связки — и не только в рамках демок, а и для практического применения.

[maxvipon]

Пример хорош. Вообще я дивлюсь иногда способам применять новые техники вот таким образом.
Да и на ресурсе есть на что ещё посмотреть.

[KindWizzard]

Прочитав комментарии, вспомнил как сложно было найти верстальщика в помощники. В целом, конечно, забавно, что кто-то занимается версткой, пусть даже косвенно, но при этом не интересуется, как же бывает еще! Ведь вещи базовые. Никого не хочу обидеть.

А по поводу статьи, вот отличное дополниение (которе, кстати, вверху списка по запросу «css selectors»):
The 30 CSS Selectors you Must Memorize

Тут вам и основные селекторы, в том числе и парочка, описанная в статье, и примеры, и совместимость с браузерами, и практические случае приминения. Enjoy %)

[kapuletti]

Мы семьей сидели и не знали что сделать вечером! И тут ваша статья про ~ селектор. Весь вечер сидели у компьютера, оторваться невозможно, спасибочки вам большое за эту прекрасную статью! Муж просто в восторге от селектора. Дай бог вам здоровья!

[standy]

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

Помню его еще по этой табличке совместимости, как один из немногих css3 селекторов, которые хоть немного поддерживались.
Обидно, что из-за кое-какого браузера всё новое хорошее в css пришлось так надолго отложить.

[qrazydraqon]

Ну новый не новый, а мне в своё время на него ни на StackOverflow, ни на Хабре не указали, когда задавал вопрос, к которому он является наиболее естественным решением.

[Dank]

На последок фотосинтез средствами селектора в CSS%)

[Glook]

знаю об этом селекторе давно, но не использую (и вам не советую) и вот почему. задавать стиль элементу используя его «соседа» на мой взгляд весьма неосмотрительно. использование данного селектора в коде РЕАЛЬНОГО проекта не добавит гибкости, а скорее наоборот. отсутствие основного элемета, задающего стиль, попытка перенести элемент или использовать его в другом месте с другим окружением потребует переписывание стилевых правил.

[VolCh]

Это справедливо для любых комбинаций нескольких селекторов, скажем .block h1 { ... } — «отсутствие основного элемета, задающего стиль, попытка перенести элемент или использовать его в другом месте с другим окружением потребует переписывание стилевых правил. ». Подобные конструкции вы тоже не используете?

[Glook]

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

[maxvipon]

Ну почему. Например, вы сделали div.block как обертку и вложили в него h1 и ещё кучу всего. Потом, спустя некоторое время понимаете, что div.block особо и не нужен, будет хорошо и без него. Убираете и давай переписывать все цепочки вида .block … и .block > …