Вложенные селекторы

[Justnewone]

Часто возникают вопросы по поводу вложенности селекторов. "Указываю свойство в CSS, а оно не применяется".

В том случае, если цепочка указания верная, существует вероятность, что достичь результата не позволяет более сильный селектор. Давайте попробуем разобраться:

Принцип состоит в следующем.

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

Менее сильным является id, который является уникальным и на одной отдельно взятой странице может встретиться только 1 раз.

Еще слабее class. Классы могут сколь угодно много раз встречаться на одной странице.

Предпоследнее по силе место занимает название самого элемента, название тега.

Самый слабый - это селектор *, который представляет из себя какой-угодно селектор. Это единственное правило, которое перенял CSS из регулярных выражений, в которых "*" - это все что угодно.

Есть небольшое исключение, это !important. Не являясь селектором, но будучи добавленным в свойство CSS, !important способен переназначить абсолютно любое свойство CSS, назначенное любым способом.

Теперь, о компоновке сложного селектора. Сложный селектор, это тот, в котором указано более одного простого селектора, да, все просто.

Если не применен !important, существует правило, некая табличка, которой можно пользоваться, чтобы переназначать стиль, очень напоминает отнимание одного числа от другого:

Представьте себе, четыре поля - X(inline) X(id) X(class) X(TAG-name), обратите внимания, они расположены в порядке убывания значимости в сложном селекторе. Для того, чтобы эта конструкция обрела смысл, необходимо при сравнении 2-х селекторов последовательно посчитать количество простых селекторов каждого типа и внести в эту табличку значения.

Пример:

1. HTML #main .menu UL LI SPAN.accent A

2. #main #left DIV.block A

В первом случае мы получим 0(inline) 1(id) 2(class) 4(TAG-name)

Во втором случае мы получим 0(inline) 2(id) 1(class) 2(TAG-name)

получаем 2 как-будто числа, 0124 и 0212. Отняв одно от другого как простые (в данном случае, ибо одинаковые соответствующие цифры в начале можно исключить) трехзначные числа, мы устанавливаем, что число 212 больше чем 124, соответственно, селектор #main #left DIV.block A несмотря на то, что он визуально короче и имеет меньше "колен" - сильнее, чем селектор HTML #main .menu UL LI SPAN.accent A.

Если же при арифметическом действе мы в конце получаем 0, значит более сильным окажется селектор, который браузер увидит самым последним.

Этим способом можно безошибочно вычислять абсолютно любые селекторы. Желаю Всем дальнейших творческих успехов.

PS:

А, кстати, забыл добавить, что селектор * актуален только в том случае, если не указано никаких более селекторов. Поэтому его можно не учитывать, никакого ВЕСА он в этой табличке не имеет. Псевдоклассы, типа hover и т.д. в подсчете тут тоже не участвуют.

Edited April 8, 2009 by Justnewone

[s0rr0w]

Чтобы лучше понимать то, про что здесь говорится, возьмем простой пример. Вы - начальник бригады разнорабочих.

style будет равнозначен следующему приказу: (указывая на конкретного человека) "Ты идешь со мной".

id: "Иванов Иван Иванович, на выход".

class: "Все Ивановы идут со мной".

имя тега: "Все сантехники, на выход"

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

[Justnewone]

Кто разместит сюда вопрос, сразу без разговоров получит бан. Писать только разъяснения по теме.