Разница между двумя селекторами?

Question

[nluparev]

1. div #content { font-family: Arial, Helvetica, sans-serif; }

2. div#content { font-family: Arial, Helvetica, sans-serif; }

Я правильно понимаю что 1-ый будет работать с элементом который имеет id #content который находиться внутри div, тогда как 2-ой будет работать с div`ом имеющим id content?

Спасибо.

Answer 1

[Сергей Протько]

да. Но добавлю, лучше никогда не применять подобных селекторов. Они оба обладают слишком большой специфичностью. Даже если опустить тот факт, что использовать ID в CSS не стоит вовсе, на одной странице не должно быть двух элементов с одним ID. А это значит что уточнять что-то в селекторах вообще не стоит.

Изучите вопрос приоритетов селекторов и старайтесь использовать селекторы равного приоритета. Тогда жизнь будет чуть менее болью. Крайнее проявление этих идей - методология БЭМ. Можно следовать полностью ей либо чуть чуть адаптировать под себя.

Comments

[Евгений Петров]

Опять 25... Почему не следует? Давайте выкинем из CSS всё, что не укладывается в BEM?)
Я уже столько наслушался ерунды про «давайте откажемся от каскада» и прочих затей с теми же ID, что даже со счёта сбился.
Например, атрибут style обладает ещё большей специфичностью, чем ID. И от него откажемся?)
Не ожидал услышать такие советы от тебя...

[Евгений Петров]

А div#content — да, не следует применять. Просто #content. Не стоит опираться на имена универсальных тэгов и попутно снижать быстродействие.

[Сергей Протько]

Евгений Петров: большинство разработчиков не умеют пользоваться каскадом, так что лучше для них отказаться. В идеале каскад стоит применять в рамках блоков, но не глобально. Словом, я не говорю что от каскада надо избавляться, просто использовать его надо ооочень осторожно. Ну и да, от style точно надо отказываться.

[Евгений Петров]

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

Каскад невозможно отменить. В принципе. А комбинаторы уже крайне слабо влияют на производительность современных браузеров. Бесконечные советы не применять комбинаторы напоминают историю про 10 обезьян — никто не помнит, почему, но делать это нельзя.

Беда в том, когда что начинающие слышат эту ерунду про каскад, они верят этому, не проверяя. Именно так и множится невежество.

[nluparev]

что так БЭМ? Я первый раз про это слышу. Это методология разработки какая-то?

[Сергей Протько]

Евгений Петров: причем тут производительность? Мне надоело видеть неподдерживаемый CSS с дикой связанностью. Проблема именно в этом, а не в том что что-то там медленнее отрабатывает.

nluparev: https://www.youtube.com/watch?v=RM55tkWfHDc

[Евгений Петров]

Сергей Протько: Есть периодическая структура (скажем, товаров) отдельные части которой могут иметь различные статусы (заказан, отсутствует, нет на складе и прочее). Каждая часть структуры, описывающая товар, состоит из одинакового набора элементов.

Я добавляю товару соответствующий класс и (если нужно) data-атрибут. А изменения для всех вложенных элементов описаны с помощью комбинаторов. Это — идеологически верный подход.

Мне предлагается к каждому элементу структуры дописывать класс?) Не смешно ни разу.

[Сергей Протько]

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

Но когда у людей есть правила, согласно которым они меняют положение элементов страницы от класса body (этим любят страдать wordpress и joomla разработчики), скажем для одной страницы так, а для другой по другому, то это уже превращается в ад. Я много ужасов повидал, и могу сказать что следование БЭМ эти проблемы решает. А далее уже надо полагаться на собственное чутье. Проблема в том что у большинства нет достаточно опыта. Словом, пусть уж будет "обезьянка видит обезьянка делает" чем давать ей в руки гранату, которая превратит стили в неподдерживаемое гуано.

Answer 2

[Rsa97]

Правильно. Добавлю только, что в первом варианте элемент с id="content" может находиться на любом уровне вложенности внутри div.

Comments

[nluparev]

да, это важная деталь про любой уровень вложенности

Answer 3

[Alex]

Да, все верно