Селекторы

[Avalon4eg]

Здравствуйте.

есть к примеру элемент

<div class="foo"></div>

В чем разница между селекторами

.foo 
и 
div.foo

?

[Andrey447]

Что ".foo" засчитает и элемент <span class="foo"></span> к примеру, любой тег с классом foo, а "div.foo" зачитает только элемент div с классом foo.

[Avalon4eg]

то-есть правило

.foo{
.........
}

работает со всеми элементами с этим классом

а

div.foo{
.........
}

будет переопределять/добавлять что-то только для элемента div с этим класом?

Хм сомнительная польза - не сталкивался с такими задачами для которых нужно было писать общее правило для разномастных элементов, а потом дорабатывать его под каждый конкретный элемент. Легче определить каждому элементу свой класс/айди ИМХО

[Catherine]

div.foo обладает не только большей специфичностью, но также имеет более высокий приоритет, по сравнению с .foo

[Avalon4eg]

А ну да. Теперь эта запись чуток приподнялась в моих глазах =)

[Catherine]

Хм сомнительная польза - не сталкивался с такими задачами для которых нужно было писать общее правило для разномастных элементов, а потом дорабатывать его под каждый конкретный элемент. Легче определить каждому элементу свой класс/айди ИМХО

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

Edited August 3, 2012 by Catherine

[troll]

div.foo обладает не только большей специфичностью, но также имеет более высокий приоритет, по сравнению с .foo

Что такое приоритет применительно к селекторам? Как он определяется?

[Great Rash]

http://habrahabr.ru/post/137588/

http://ru.wikipedia.org/wiki/%D0%9A%D0%B0%D1%81%D0%BA%D0%B0%D0%B4%D0%BD%D1%8B%D0%B5_%D1%82%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%D1%8B_%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9#.D0.9D.D0.B0.D1.81.D0.BB.D0.B5.D0.B4.D0.BE.D0.B2.D0.B0.D0.BD.D0.B8.D0.B5._.D0.9A.D0.B0.D1.81.D0.BA.D0.B0.D0.B4.D0.B8.D1.80.D0.BE.D0.B2.D0.B0.D0.BD.D0.B8.D0.B5._.D0.9F.D1.80.D0.B8.D0.BE.D1.80.D0.B8.D1.82.D0.B5.D1.82.D1.8B_.D1.81.D1.82.D0.B8.D0.BB.D0.B5.D0.B9_CSS.

[troll]

Спасибо, про этот приоритет я знаю. Думал, что имеется в виду какой-то другой, так как не совсем понял фразу "обладает не только большей специфичностью, но также имеет более высокий приоритет". Ведь на приоритет .foo и div.foo при прочих равных только специфичность и влияет, поэтому само собой разумеется, что у div.foo он будет выше.

[Avalon4eg]

Что б не создавать новую тему, воспользуюсь этой.

Как написать селектор только для тех тегов li в которые вложены ul.

[Catherine]

Что б не создавать новую тему, воспользуюсь этой.

Как написать селектор только для тех тегов li в которые вложены ul.

ul > li

?

UPD. Не верно прочитала) Присваивать класс нужным li, либо js.

Edited August 9, 2012 by Catherine

[SelenIT]

Пока никак. Ждем CSS4 с родительским селектором. Пока юзаем железобетонные классы или экспериментируем с другим содержимым этих li-шек, типа li > a:not(:only-child)...

[Viper]

Что б не создавать новую тему, воспользуюсь этой.

Как написать селектор только для тех тегов li в которые вложены ul.

С помощью CSS селекторов, никак.

Либо изначально задавать таким LI отдельный class, либо с помощь js определять и задавать соответствующий class) ИМХО

[Avalon4eg]

=(

Тупо натыкал мнемоники в нужные li тока пришлось из обернуть в спаны чтоб можно было к ним стили применять

[Viper]

=(

Тупо натыкал мнемоники в нужные li тока пришлось из обернуть в спаны чтоб можно было к ним стили применять

, а просто добавить этим LI еще один class не получается? LI в SPAN - плохо...( Та и фантазия не помогает понять - зачем там мнемоники?

[Catherine]

А что-то вроде этого не подойдет? Не универсально, конечно, но мало ли. Можно и со спецсимволами.

Edited August 9, 2012 by Catherine

[Avalon4eg]

Viper, не li в span, а span и li.

<li><a href="">СОТРУДНИЧЕСТВО<span> ▼</span></a>
    <ul class="sub">
        <li><a href="#" >ВАКАНСИИ</a></li>
        <li><a href="#">АРЕНДА ПОМЕЩЕНИЙ</a></li>
        <li><a href="#">КОНТАКТЫ</a></li>
    </ul>
</li>

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

[SelenIT]

Можно и через голые псевдоэлементы (и псевдоклассы), но только в новых браузерах (всякие IE8 и ниже тихо плачут в сторонке).

[wwt]

Что-то типо вот таких граблей http://jsfiddle.net/TJraL/3/ тока под браузеры понимающие css3, а лучше это сделать на JS.

Edited August 10, 2012 by wwt

[SelenIT]

wwt, так li-шки одного уровня вложенности стилизуются одинаково, независимо от того, есть ли ul в них или нет. А топикстартеру нужно различить эти случаи.

[wwt]

wwt, так li-шки одного уровня вложенности стилизуются одинаково, независимо от того, есть ли ul в них или нет. А топикстартеру нужно различить эти случаи.

Да эт я чото на ночь глядя не о том подумал =) твой вариант наверно единственно верен будет в данном случае.

PS яб сделал так http://jsfiddle.net/TJraL/4/ =)) Без замарочек и кроссбраузерно.

Edited August 10, 2012 by wwt