Селектор
Универсальный селектор

Схема CSS-кода выглядит следующим образом:

Селектор { CSS-свойство: значение; CSS-свойство: значение; ... и т.д. }

В универсальном селекторе, в качестве селектора, выступает знак звёздочки * :

* { CSS-свойство: значение; CSS-свойство: значение; ... и т.д. }

Универсальный селектор , влияет сразу на все теги HTML-документа.

Например, можно убрать все внутренние и внешние отступы у всех тегов HTML-документа:

* { margin: 0; padding: 0; }

Допустим, у нас есть HTML-документ содержащий следующий код:

Снежный барс

следующим образом .

Давайте с помощью универсального селектора, сделаем цвет шрифта у всех тегов зелёным green , имя шрифта arial , стиль шрифта oblique (наклонный).

Снежный барс

Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, Казахстана, Кыргызстана, Китая, Монголии, Непала, Пакистана, России, Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, относительно короткими лапами, небольшой головой и очень длинным хвостом. Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг. Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными пятнами.

Охотится снежный барс, в основном, на горных козлов и баранов, также в его рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по приблизительным оценкам их количество варьируется в районе около 10 тысяч особей. По состоянию на 2013 год, охота на снежных барсов повсеместно запрещена.

Страница в браузере будет выглядеть следующим образом .

Также можете поэкспериментировать с внешним отступом, сделайте его сначала 0 , а затем 15px , добавьте в CSS-код.

• Выполняемая задача — выбор всех элементов. Вообще всех.
• Обозначение — символ «звездочка» — *.
• Пример использования:

для всех элементов сбросить отступы по-умолчанию

Подробнее про универсальный селектор

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

Еще одна особенность универсального селектора — когда он используется в сочетании с другим селектором (например, селектором класса, идентификатора или атрибута) в составе простого селектора, то может быть безнаказанно пропущен. Это примерно то же самое, что вместо «Все дромадеры — это одногорбые верблюды» сказать просто «дромадеры — это одногорбые верблюды». Смысл не поменялся.

Пример:

*.error { color: red; } .error { color: red; } /* эти два правила эквивалентны. Универсальный селектор во втором случае пропущен */

Область применения

Собственно, удобнее всего применять универсальный селектор, как в первом примере — для сброса зависящих от браузера начальных значений стилей (в частности, отступов).

Но даже такое применение не всегда окажется удачной идеей. Из-за недостатков универсального селектора, описанных в статье , лучше использовать . То есть использовать селекторы типа.

Вот так плавненько мы с тобой и подошли к следующей теме. С универсальным селектором, вроде, разобрались. Самое время двигаться дальше. Следующая остановка — .

Здравствуйте, уважаемые читатели блога сайт. Сегодня мы продолжим наполнять материалами наш и начнем говорить о такой фундаментальной вещи, как селекторы в языке CSS.

Их существует семь видов — тега, класса (class), Id, универсальный, атрибутов, а так же псевдоклассов и псевдоэлементов. Многовато, не правда ли? Ну, ничего, потихоньку разберем их все и при том на подробных примерах.

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

Селекторы тегов и классов (class) в языке CSS

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

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

В приведенном примере в первой строчке показан селектор тега (элемента), который предписывает использовать красный цвет шрифта для всех контейнеров Div.

Содержимое обычного контейнера Div

Во второй строчке мы видим пример сложного селектора, в котором у нас появляется такой новый элемент, как класс (class) . Он прописывается в качестве . В качестве значения для class мы можем использовать произвольное имя, используя символы ,,,[_],[-].

Но кроме class в языке стилевой разметки используется еще и Id. Чем отличается класс от Id? Значение последнего должно быть уникальным, т.к. Id является уникальным идентификатором для Html тега и его название (значение) может использоваться в коде только один раз.

А значение для class не является уникальным и может использоваться для сколь угодно большого количества элементов в коде. Т.е. разные теги (Div, P, H1 и т.д) могут иметь одинаковое значение своего атрибута class:

А как он используется в селекторах CSS? Оказывается, что его имя пишется с поставленной впереди точкой .

Поэтому, когда мы видим в CSS коде что-то начинающееся с точки, то сразу понимаем, что речь идет про класс. Если рассматривать пример приведенный на скриншоте, то теперь во всех элементах Html кода, где будет прописан «class» со значение «Blue», текст будет покрашен в синий цвет.

Но это произойдет вовсе не из-за того, что название класса мы выбрали «Blue». Можно было назвать его как угодно (хоть «xyz»), а цвет в нашем примере задается именно приписанным для селектора с этим классом. Надеюсь, это понятно? Давайте поменяем название (значение) class в примере:

Абзац с текстом

Абзац с текстом

Т.е. теперь у нас класс XYZ и прописанное для него правило:

Xyz {color:blue}

покрасило текст абзаца в синий цвет. Этот пример еще раз подчеркивает, что название для атрибута class можно использовать любое. Однако, продолжим.

Давайте еще раз посмотрим на примере, как используются селекторы тегов и классов в CSS. Представим, что у нас прописаны следующие стилевые правила:

Div {color:red} div.a123 {color:green} .xyz {color:blue}

А так же представим, что в Html коде у нас присутствуют следующие элементы:

В соответствии с прописанными правилами для указанных селекторов содержимое приведенных элементов Html кода должно будет выглядеть так:

А теперь давайте посмотрим, почему именно так браузер интерпретировал стилевое оформления данных элементов Html кода. Для первого контейнера Div, в котором не прописано никакого class, будет действовать CSS правило применимое для всех контейнеров: div {color:red}. Следовательно, его содержимое будет окрашено в красный цвет. Что и требовалось показать.

В теге второго Div у нас прописан класс «a123». В этом случае будут применяться CSS правила соответствующие «div.a123» (ибо у нас как раз имеется в наличии тег Div с прописанным в нем атрибутом class="a123"). Поэтому содержимое второго контейнера будет окрашено в зеленый цвет.

Но вы, наверное, заметили, что ко второму Div можно ведь применить и первое CSS правило «div {color:red}», ибо оно предназначено для всех контейнеров без исключения. Получается противоречие, которое решается в CSS путем ввода понятия .

Мы с вами об этом поговорим подробно чуть позже, ну, а сейчас я просто скажу, что приоритет «div.a123» (для второго Div в рассматриваемом примере) будет выше.

Кстати, похожая ситуация возникает и с третьим Div из нашего примера. К нему подходят сразу два варианта: селектор тега «div» и класса «.xyz». Опять же в силу пока не объясненных мною причин (читайте об этом по приведено чуть выше ссылке), приоритет последнего будет выше, поэтому содержимое третьего контейнера будет окрашено в синий цвет.

Давайте двигаться дальше. В приведенном примере у нас дальше идет тег абзаца P, в котором прописан class="a123". Получается так, что данный элемент не попадает ни под один из трех прописанных нами селекторов (все три мимо него промахнулись).

У него есть только пересечение со вторым вариантом, однако этот селектор будет использоваться только для тегов «Div» с классом «a123», но никак не для тега абзаца P. В результате цвет текста в этом абзаце останется принятым по умолчанию, т.е. черным.

Дальше в примере у нас следует элемент параграфа с class="xyz". Для него будет применяться последнее CSS правило «.xyz {color:blue}». Следовательно, текст этого абзаца будет окрашен в синий цвет. Тут, думаю, все понятно.

Универсальный селектор и уникальный идентификатор ID

Теперь давайте перейдем к Id, о которых я уже успел упомянуть. Когда мы в CSS коде видим что то со стоящей впереди решеткой (хешем) , то это означает, что мы имеем дело с Id:

Обычно этот селектор пишут без упоминания тега , к которому он относится (первый вариант на приведенном чуть выше примере), хотя второй вариант написания тоже допустим, но употребляется редко. Связано это с тем, что значение атрибута Id в коде будет уникальным, а значит не может быть двух элементов с одинаковыми значениями Id. Т.е. нет смысла уточнять, хотя это не возбраняется.

Поэтому обычно просто пишут хеш (решетку), а сразу за ним значение (название) атрибута Id. Предположим, что у нас прописано следующее правило для Id:

#back {color:red}

а в коде имеется следующий фрагмент:

который в результате применения к нему правила, стоящего после «#back», будет интерпретирован браузером так:

Контейнер Div с уникальным идентификатором

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

* {color:black}

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

Селекторы атрибутов и их будущее в современном CSS

Все описанные выше варианты (тега, класса, Id и универсальный) будут работать абсолютно во всех браузерах. Но существуют еще варианты, работающипе не везде.

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

Как вы, наверное, помните, в языке Html внутри тегов мы можем использовать различные атрибуты, которые позволяют придать определенные свойства содержимому этих самих элементов. Поэтому было бы логично и в языке CSS использовать в качестве селекторов не только названия тегов, но и названия атрибутов.

Собственно, мы это уже делали, когда рассматривали class и Id, ибо они по сути являлись атрибутами каких-то тегов. Просто Айди и Класс имеют очень большое значение в верстке и их вынесли в отдельные группы, каждый со своим собственным синтаксисом.

А как использовать в селекторах остальные существующие в языке Html атрибуты (не Id и не class)? Довольно просто — заключать их в квадратные скобки :

{color:green}

Теперь любой тег в Html коде, у которого будет прописан «title», будет иметь цвет текста зеленый.

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

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

Можно в них указывать не только название атрибута, но и его значение :

{color:green}

В результате CSS правила, прописанные для такого селектора, будут применяться только для того тега, у которого имеется «title» со значением «Первый параграф» (в нашем примере это будет вторая строчка):

Описанный пример представлял из себя строгое равенство, но можно написать этот селектор и так:

{color:green}

Т.о. данное CSS правило применится только к тем элементам Html кода, у которых в «title» содержится слово «параграф» (в нашем примере это будут вторая и третья строки):

Синтаксис селектора атрибута интерпретирует «~=» как «содержится слово целиком». Например, для элемента с title="Вторым параграфом" CSS правило «color:green» уже применяться не будет.

Но можно вместо этого поставить «*=» и тогда будут учитываться не только отдельные слова указанные в селекторе, но и части слов (любой кусок текста, содержащийся в любом месте атрибута):

{color:green}

В этом случае и для элемента с title="Вторым параграфом" сработает правило «color:green» и его текст подкрасится зеленым цветом. Надеюсь, что это понятно. Есть еще такой оператор как «^=» (все что начинается с указанного в скобках значения), который помогает создать подобный селектор атрибута:

{color:red}

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

Следовательно, все внешние ссылки будут начинаться с «http», а внутренние могут задаваться в относительном виде без использования «http». Т.о. прописанный в нашем примере селектор позволит окрасить все внешние ссылки на сайте (все абсолютные) в красный цвет. Ну, а относительные, не содержащие «http», останутся того цвета, который был принят для них по умолчания. По моему супер!!!

Как вы можете видеть, селекторы атрибутов дают нам массу возможностей и то, что они еще широко не используются, является заслугой очень бедной и обиженной судьбой компании Мелкософт, а в частности их детища IE 6. Но потихоньку они начинают применяться в CSS и вскоре, конечно же, пробьют себе дорогу в жизнь.

Да, есть еще один оператор «$=» — все, что заканчивается на указанное в кавычках значение:

{color:green}

В результате в зеленый цвет будут покрашены вторая и третья строка из нашего первого примера, т.к. значения «title» у них заканчивается на «раф». Вот так вот замечательно работали бы селекторы атрибутов в современном языке CSS, если бы не существовал до сих пор определенный процент пользователей юзающих браузер IE 6.

Собственно, из всех типов нам осталось рассмотреть только два: . Но я хочу перенести это на следующую статью, где мы так же поговорим и про их различные комбинации.

Удачи вам! До скорых встреч на страницах блога сайт

Вам может быть интересно

Селекторы псевдоклассов и псевдоэлементов в CSS (hover, first-child, first-line и другие), отношения между тегами Html кода
Приоритеты в Css и их повышение за счет Important, комбинация и группировка селекторов, пользовательские и авторские стили
List style (type, image, position) - Css правила для настройки внешнего вида списков в Html коде
Background в CSS (color, position, image, repeat, attachment) - все для задания цвета фона или фоновой картинки Html элементов
CSS - что это такое, как таблицы каскадных стилей подключаются к Html коду с помощью Style и Link
Единицы размеров (пиксели, Em и Ex) и наследование правил в CSS
Для чего нужен CSS, как подключить каскадные таблицы стилей к Html документу и основы синтаксиса этого языка
Padding, Margin и Border - задаем в CSS внутренние и внешние отступы, а так же рамкидля все сторон (top, bottom, left, right) Как настроить чередование фонового цвета строк таблиц, списков и прочих Html элементов на сайте с помощью псевдокласса nth-child
Как найти и удалить неиспользуемые строки стилей (лишние селекторы) в CSS файле вашего сайта
Display (block, none, inline) в CSS - задаем тип отображения Html элементов на вебстранице

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

Описание

Он обозначается в виде символа «*». С его помощью можно выделить сразу все теги на странице не делая поправок на их назначение и вложенность. Например:

* { font- size: 18px; }

С помощью этой записи мы задали всем элементам имеющим текст высоту шрифта в 18 пикселей.

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

Также стоит отметить, что использование класса, идентификатора, атрибута позволяет без какого либо вреда пропустить универсальный селектор. Например:

*. left { border: 1px solid #000; } . left { border: 1px solid #000; }

Данные записи несут одинаковую смысловую нагрузку, и стиль будет применён одинаково как с использование универсального селектора, так и без.

Где его можно применить?

В основном универсальный селектор встречается на практике при обнулении стилей браузера, которые идут по умолчанию. Например, отступов, размеров шрифта и так далее.

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

Недостатки универсального селектора при сбрасывании стандартных стилей:

• некоторые из стилей сбросить не может
• для атрибута select не может обнулить отступ padding
• может «убить» стандартный вид кнопки в большинстве браузеров
• в браузере Mozila работает с небольшими багами
• существенно замедляет погрузку страницы для Mozila (однако это касается сайтов с CSS имеющим более тысячи строк, в ином случае задержка незаметна.)

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

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

* { свойство: значение; свойство: значение; ... }

Пример использования универсального селектора CSS

Параграф 1

Параграф 2

Параграф 3

Результат в браузере

Параграф 1

Параграф 2

Параграф 3

В этом примере были обнулены поля, отступы и убраны рамки элементов страницы. Для чего это может быть нужно? Как вы уже знаете из урока , некоторые HTML-элементы изначально имеют определенные значения некоторых свойств, например у параграфов это ненулевые верхние и нижние поля пустого пространства, у ссылок-изображений это рамки и т.д. Но не все так просто, дело в том, что в разных браузерах размер этих полей может несколько отличаться, а некоторые уже давно не устанавливают по умолчанию рамки у ссылок-изображений. И это далеко не все возможные отличия.

Так вот, многие верстальщики (а вы сейчас учитесь именно верстке) создают так называемый «Сброс стилей CSS», то есть в самом начале таблицы стилей они обнуляют все возможные ненулевые значения CSS, а потом, в процессе работы, добавляют стили элементам, но уже, естественно, со своими значениями. Таким образом можно быть уверенным, что во всех браузерах HTML-страница будет выглядеть одинаково.

Очень часто для сброса стилей как раз и применяется универсальный селектор, хотя некоторые предпочитают вместо него просто перечислять через запятую некоторые селекторы тегов, а другие вообще не используют сброс, полагаясь на свою внимательность. Как будете поступать вы - решать только вам, но в любом случае пока об этом думать рано. И будьте уверены, что со временем у вас сам собой выработается свой стиль написания стилей (извините за тавтологию) так что не заморачивайтесь на этом.

Домашнее задание.

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

1. Измените стили тега таким образом, чтобы он стал похож на параграф. Какое свойство для этого нужно подумайте сами.
2. Измените тег параграфа так, чтобы он наоборот стал похож на тег выделения длинных цитат.
3. Превратите тег из элемента уровня строки (inline) в блочный элемент. Используйте для этого свойство