Многие из вас наверняка знают и пользуются универсальным селектором * для того чтобы обнулить дефолтные значения margin и padding в стиле документа. Pepelsbey недавно писал об этом.
Как всегда есть сторонники и противники использования этого способа и в конце концов каждый решает для себя сам, в зависимости от привычек и поставленых задач. А я вам расскажу о еще одном, как оказалось нетривиальном для меня способе использования универсального селектора. На мой взгляд у него есть определенная оригинальность и привлекательность.
Допустим что у нас есть контейнер, для которого по определенным причинам нельзя указать padding. У контейнера есть дочерние элементы и для того чтобы сделать для всех них одинаковые боковые отступы нужно прописать всего лишь два правила вместо того чтобы делать это для каждого элемента:
#container {
width: 760px;
}
#container * {
margin: 0 10px;
}Здесь мы обращаемся ко всем элементам внутри контейнера и задаем им отступы. Вне зависимости от того какие они. Ведь мы не всегда знаем какими они будут.
Все отлично, но нужно прекратить наследование для последующих уровней вложености:
#container * * { /* Не забываем следить за тем чтобы присутствовал пробел между звездочками */
margin: 0;
}Это только один пример. При определенной фантазии и изобретательности можно развить тему и использовать универсальный селектор не только для отступов. Кстати если это очевидно и я “изобрел велосипед” – можете смело кинуть в меня камнем, при условии что он драгоценный ;)
Часто такая штука бывает полезна мне во всяких менюшках, когда отлично известно, что структура не будет ветвиться вглубь и звёздочка не заденет лишних. Т.е. вместо #nav A, #nav STRONG {…} я пишу #nav LI * {…} и всё получается красиво.
Браво! Пока нигде “велосипед” не встречал :)
[quote comment="101"]Часто такая штука бывает полезна мне во всяких менюшках, когда отлично известно, что структура не будет ветвиться вглубь и звёздочка не заденет лишних. Т.е. вместо #nav A, #nav STRONG {…} я пишу #nav LI * {…} и всё получается красиво.[/quote]
Отлично, я после отступов как раз и начал думать в сторону менюшек :)
[quote comment="102"]Браво! Пока нигде “велосипед” не встречал :)[/quote]
А вот Pepelsbey комментом выше активно юзает :)
Не проще ли сделать еще один вложенный блок с полями в размере нужных отступов?
[quote comment="107"]Не проще ли сделать еще один вложенный блок с полями в размере нужных отступов?[/quote]
Иногда бесспорно проще. Но иногда это лишнее. Хотя бы даже в случае с меню, как pеpelsbey описал выше.
Пока не проверил, но, надеюсь, работает.
На днях писал стили для сложного красивого меню с двумя вложениями — намучался с наследованием, а точнее с его отменой во втором уровне.
Метод пока нигде не видел — автору респект.
to Максим Несов
если не сработает, хотя вряд ли, можно попробовать прописывать свойства для вложенности второго уровня с использованием !important в конце свойства. Обычно помогает. Например: