Селекторы и идентификаторы в CSS
Селекторы в CSS включают теги, классы, идентификаторы (Id), универсальные селекторы, селекторы атрибутов, а также псевдоклассы и псевдоэлементы. Всего их существует семь видов.
Прежде чем изучать стилевые правила, необходимо понять, как и по каким принципам применять стили к элементам HTML-кода. Существует несколько видов селекторов, начиная от простых, которые используют названия тегов, и заканчивая более сложными, такими как классы, идентификаторы и составные селекторы.
/* Пример 1: Селектор тега */ p { color: red; background-color: gray; } /* Пример 2: Сложный селектор с классом */ div .exampleClass { font-size: 16px; }
В первом примере для всех тегов абзаца
задаются правила для красного цвета шрифта и серого фона. CSS-правило может содержать несколько селекторов, которые читаются справа налево, начиная с самого ближнего к открывающей фигурной скобке.
Во втором примере показан сложный селектор с использованием класса. Класс указывается в виде атрибута любого тега в HTML-коде. Значение класса может быть произвольным и использовать символы [0-9], [a-z], [A-Z], _, -.
Отличие между классами и идентификаторами (Id) заключается в уникальности последних. Значение Id должно быть уникальным и использоваться только один раз в HTML-коде, тогда как значение класса не обязательно уникально и может применяться к нескольким элементам.
/* Пример 3: Селектор с классом */ .exampleClass { color: blue; }
В данном примере селектор с классом «exampleClass» применяет стиль, задающий синий цвет текста, ко всем элементам с соответствующим классом в HTML-коде. Название класса указывается с предшествующей точкой в CSS-коде.
Согласно установленным правилам для указанных селекторов, содержимое представленных элементов HTML-кода должно представлять собой следующий облик:
<!-- Пример 1: Первый контейнер Div без класса --> <div> Содержимое первого контейнера Div </div> <!-- Пример 2: Второй контейнер Div с классом "a123" --> <div class="a123"> Содержимое второго контейнера Div </div> <!-- Пример 3: Третий контейнер Div с классом "xyz" --> <div class="xyz"> Содержимое третьего контейнера Div </div> <!-- Пример 4: Тег абзаца P с классом "a123" --> <p class="a123"> Содержимое абзаца с классом "a123" </p> <!-- Пример 5: Элемент параграфа с классом "xyz" --> <p class="xyz"> Содержимое абзаца с классом "xyz" </p>
Теперь рассмотрим, как браузер интерпретирует стилевое оформление данных элементов HTML-кода. Для первого контейнера Div, не имеющего указанного класса, применяется 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 с классом «a123», который не соответствует ни одному из трех указанных селекторов, цвет текста остается по умолчанию, то есть черным.
Далее, для элемента параграфа с классом «xyz» применяется последнее CSS-правило .xyz {color: blue}, и текст данного абзаца окрашивается в синий цвет.
Универсальный селектор и уникальный идентификатор ID
В настоящей части обучающего материала рассмотрим два важных элемента стилевого оформления в языке CSS: универсальный селектор и уникальные идентификаторы (ID).
Перейдем к обсуждению идентификаторов (ID), на которые мы уже затронулись ранее. При обнаружении в CSS-коде символа решетки (хеша), мы имеем дело с ID:
Этот селектор обычно записывают без указания тега, к которому он относится (первый вариант, приведенный в предыдущем примере), хотя второй вариант также допустим, но редко используется. Это обусловлено тем, что значение атрибута ID в коде является уникальным, и, следовательно, не может существовать двух элементов с одинаковыми ID. Таким образом, нет необходимости уточнять тег, хотя это и не запрещено.
Обычно достаточно написать решетку, а сразу после нее указать значение (название) атрибута ID. Предположим, у нас определено следующее правило для ID:
#back {color:red}а в коде имеется фрагмент:
<div id="back"> Контейнер Div с уникальным идентификатором </div>
который, после применения к нему правила, расположенного после «#back», будет интерпретирован браузером следующим образом:
Контейнер Div с уникальным идентификатором
Также в CSS предусмотрен универсальный селектор, обозначаемый символом звездочки, который указывает, что данное правило будет применяться ко всем элементам в коде:
* {color:black}
В этом случае текст внутри любого тега будет черным (цвет по умолчанию). Однако следует отметить, что все остальные селекторы (тегов, классов и ID) имеют более высокий приоритет, чем у универсального селектора.
Селекторы атрибутов и их перспективы в современном CSS
Рассмотренные ранее варианты (тега, класса, ID и универсального селектора) будут функционировать во всех современных браузерах. Однако существуют альтернативные варианты, которые не поддерживаются везде.
К таким вариантам относятся селекторы атрибутов, предоставляющие удобные возможности для точного воздействия на структуру верстки. К сожалению, эти селекторы не всегда имеют полную поддержку во всех браузерах.
Как известно, в языке HTML мы можем использовать различные атрибуты внутри тегов, задавая определенные свойства содержимому элементов. Было бы логично использовать именно эти атрибуты в CSS в качестве селекторов, не ограничиваясь только названиями тегов.
Фактически, мы уже делали это, рассматривая атрибуты class и ID, поскольку они являются атрибутами определенных тегов. Просто ID и class имеют высокое значение в верстке и были выделены в отдельные категории с собственным синтаксисом.
Как же использовать в селекторах остальные атрибуты HTML (не ID и не class)? Это довольно просто — заключать их в квадратные скобки:
[title] {color:green}
Теперь любой тег в HTML-коде, у которого есть атрибут «title», будет иметь зеленый цвет текста.
Это крайне удобно. Однако проблема использования селекторов атрибутов заключается в том, что в браузере Internet Explorer 6 и более ранних версиях они либо не работают вовсе, либо работают частично. Пока доля пользователей, использующих браузер IE 6, не сведена к нулю, этот удобный способ, вероятно, не получит широкого распространения при верстке. Тем не менее, важно знать о их существовании и уметь их использовать.
Как видно из примера, наличие или отсутствие значения в атрибуте, указанном в селекторе, не имеет значения. Однако это далеко не все возможности, которые они предоставляют. Мы можем указывать не только название атрибута, но и его значение:
[title="Первый параграф"] {color:green}
В результате CSS-правило, прописанное для такого селектора, будет применяться только к тегу, у которого есть «title» со значением «Первый параграф».
Использование другого селектора атрибута 
Указанный пример представляет собой строгое совпадение, но мы также можем записать селектор следующим образом:
[title~="параграф"] {color:green}
Таким образом, это CSS-правило применится только к элементам HTML-кода, у которых в «title» содержится слово «параграф».
Еще один пример использования селектора атрибута 
Синтаксис селектора атрибута интерпретирует «~=» как «содержится слово целиком». Например, для элемента с title=»Вторым параграфом», CSS-правило color:green уже не будет применяться.
Однако мы можем заменить это, используя «*=», и тогда будут учитываться не только отдельные слова, указанные в селекторе, но и части слов (любой фрагмент текста, содержащийся в любом месте атрибута):
[title*="параграф"] {color:green}
В этом случае CSS-правило color:green применится даже к элементу с title=»Вторым параграфом», и его текст окрасится в зеленый цвет.
Можно использовать и другой оператор «^=» (все, что начинается с указанного значения в скобках), который помогает создать аналогичный селектор атрибута: ```css [href^="http"] {color:red}
Напоминаю, что атрибут href используется в гиперссылках для указания URL-адреса в относительных или абсолютных ссылках. Приведенный в примере селектор [href^=»http»] позволяет окрасить все внешние ссылки на сайте (все абсолютные) в красный цвет. Относительные ссылки, не содержащие «http», останутся цветом, который был установлен по умолчанию.
Как видите, селекторы атрибутов предоставляют множество возможностей, и то, что они еще не получили широкого распространения, можно объяснить определенными ограничениями, вызванными использованием Internet Explorer 6. Однако постепенно они начинают применяться в CSS и, вероятно, в ближайшем будущем найдут более широкое применение.
Таким образом, остались еще два типа селекторов для рассмотрения: селекторы псевдоклассов и псевдоэлементов. Обсудим их в следующей статье, где также рассмотрим различные их комбинации.
Разнообразное оформление внутренних и внешних ссылок с использованием CSS
Возникла необходимость установить различное стилевое оформление для ссылок, ведущих с блога на внешние сайты, и для ссылок, указывающих на страницы того же ресурса. Мотивацию этого требования пока трудно определить, однако появившееся желание стало основой для соответствующей настройки стилей. Решение для данной задачи было найдено на этом блоге.
Суть метода заключается в использовании регулярных выражений и применении селекторов псевдоклассов after и before, о которых ранее было упомянуто. Способ форматирования внешних ссылок может быть выбран произвольным образом (рекомендуется ознакомиться с учебными материалами по стилям разметки и выбрать подходящий метод). Основной задачей является выделение внешних ссылок от внутренних.
При этом предложенный вариант с добавлением иконки со стрелочкой к внешней ссылке показался мне привлекательным. Подобное стилевое оформление применено к внешним ссылкам на Wikipedia, что делает назначение данной иконки понятным для большинства пользователей сети.
Для использования данного метода следует сохранить изображение иконки (ссылка на изображение) на вашем сервере. После чего открывается файл стилей (в WordPress он расположен в папке используемой темы по адресу: /wp-content/themes/Название темы/) и вставляется следующий код:
.post a.external-link { position: relative; } .post a.external-link:before { content: url('/wp-content/themes/Organic/images/external.png'); padding-left: 16px; /* Регулировка отступа от иконки */ }
Здесь необходимо заменить knep.ru на домен вашего сайта и путь /wp-content/themes/Organic/images/external.png на путь к сохраненной изображении на вашем сервере.
Важно отметить, что данное правило будет применяться ко всем внешним ссылкам на сайте, включая счетчики посещений. Чтобы избежать этого, я добавил условие выделения внешних ссылок только в постах, используя в качестве селектора не только тег a, но и класс контейнера, в котором упакованы все посты на моем блоге.
Для просмотра эффекта можно воспользоваться инструментами разработчика, такими как Фаербаг или встроенными средствами любого браузера. Кликнув правой кнопкой мыши по соответствующему элементу веб-страницы и выбрав «Просмотр кода элемента», можно ознакомиться с результатами.
В моем случае классом является post, поэтому код видоизменяется следующим образом:
.post a.external-link { position: relative; } .post a.external-link:before { content: url('/wp-content/themes/Organic/images/external.png'); padding-left: 16px; /* Регулировка отступа от иконки */ }
Все, что требуется — это просто внесение необходимых изменений. Если вы, например, хотите добавить не иконку со стрелочкой, а текст «Внешняя ссылка» или подобное, достаточно заменить содержимое свойства content:
.post a.external-link:before { content: "Внешняя ссылка"; /* Дополнительные стили по вашему выбору */ }
Можно также не добавлять ничего, а просто изменить цвет внешней ссылки относительно внутренней или сделать ее подчеркнутой пунктиром. Для этого достаточно добавить необходимые свойства CSS вместо content:. Надеюсь, данная информация окажется вам полезной.