Все о создании сайтов, блогов, форумов, интернет-магазинов, их продвижении в поисковых системах и заработке на сайте

CSS селекторы тега, класса (class), Id, универсальный селектор и селекторы атрибутов

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

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

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

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

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

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

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

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

Во второй строчке мы видим пример сложного селектора, в котором у нас появляется такой новый элемент как CSS класс (class). Класс (class) прописывается в качестве атрибута любого тега в Html коде. В атрибуте class мы можем использовать произвольное имя, используя символы [0-9],[a-z],[A-Z],[_],[-].

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

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

А как атрибут класс (class) используется в CSS селекторах? Его имя пишется с поставленной впереди точкой.

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

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

<p class="xyz"> Абзац с CSS классом (class) XYZ </p>

Абзац с CSS классом (class) XYZ

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

 .xyz {color:blue}

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

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

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

<div> Содержимое обычного контейнера Div </div>
<div class="a123"> Контейнер Div с классом (class) "a123"</div>
<div class="xyz"> Контейнер Div с классом (class) "xyz"</div>
<p class="a123"> Абзац Р с классом (class) "a123"</p>
<p class="xyz"> Абзац Р с классом (class) "xyz"</p>

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

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

Контейнер Div с классом (class) «a123»

Контейнер Div с классом (class) «xyz»

Абзац Р с классом (class) «a123»

Абзац Р с классом (class) «xyz»

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

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

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

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

Давайте двигаться дальше. В приведенном примере у нас дальше идет Html тег абзаца P, в котором прописан атрибут класса class="a123" (<p class="a123">). Получается так, что данный элемент не попадает ни под один из трех прописанных нами селектора (все три селектора мимо него промахнулись). У него есть только пересечение со вторым CSS селектором «div.a123», однако этот селектор будет использоваться только для тегов «Div» с классом «a123», но никак не для тега абзаца P. В результате цвет текста в этом абзаце останется принятым по умолчанию, т.е. черным.

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

CSS селекторы Id и универсальный селектор

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

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

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

#back {color:red}

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

<div id="back"> Контейнер Div с уникальным Id </div>

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

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

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

* {color:black}

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

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

CSS селекторы атрибутов (кроме браузера IE 6)

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

Просто эти два атрибута Id и class имеют очень большое значение в верстке и их вынесли в отдельные группы селекторов, каждый со своим собственным синтаксисом. А как использовать в селекторах остальные существующие Html атрибуты (не Id и не class)? Довольно просто — CSS селектор атрибута заключается в квадратные скобки:

[title] {color:green}

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

<p> Абзац с без title </p>
<p title="Первый параграф"> Абзац с title </p>
<p title="Второй параграф"> Абзац с title </p>
<p title=""> Абзац с пустым title </p>

Абзац с без title

Абзац с title «Первый параграф»

Абзац с title «Второй параграф»

Абзац с пустым title

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

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

[title="Первый параграф"] {color:green}

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

Абзац с без title

Абзац с title «Первый параграф»

Абзац с title «Второй параграф»

Абзац с пустым title

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

[title~="параграф"] {color:green}

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

Абзац с без title

Абзац с title «Первый параграф»

Абзац с title «Второй параграф»

Абзац с пустым title

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

[title*="параграф"] {color:green}

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

[href^="http"] {color:red}

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

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

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

[title$="раф"] {color:green}

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

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

Да, и еще, меня просили проанонсировать два конкурса. Первый называется «Лучший оптимизированный сайт года» и я там участвую, а второй запущен довольно известным и уважаемым форумом seobuilding.ru. Ну, как бы и все.

У Евгения Попова имеется видекурс по PHP+MySQL, который стоит того, чтобы с ним ознакомиться.

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

• Верстка сайта
  • Html для чайников
  • Что такое язык Html, валидатор W3C и Html тэги
  • Зачем нужен Doctype и комментарии в html
  • Спецсимволы (мнемоники) в Html, символ неразрывного пробела
  • Как использовать цвета в Html коде
  • Как в Html код вставить картинку и html ссылку
  • Как сделать в Html список с помощью тегов UL, OL, DL и LI
  • Html таблица и теги Tr, Th, Td, Table
  • Html формы - теги Form и Input
  • Div верстка сайта в Html и CSS ч.1
  • Html и CSS верстка сайта на DIV ч.2
  • Блочная верстка

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

• CSS (Ксс) селекторы псевдоклассов и псевдоэлементов (hover, first-child, first-line и др.)
• CSS (таблицы каскадных стилей) — что это такое, Style и Link для связывания языка Css и Html
• Приоритеты в Css (Important), примеры комбинаций и группировки селекторов, пользовательские и авторские стили
• Единицы размеров (пикселы, Em и Ex) в CSS для шрифтов, цвет и наследование правил в CSS
• Создание анонсов статьей на главной странице WordPress с помощью тега More, замена текста ссылки «Читать далее» на уникальный анкор, вставка в статьи и комментарии смайлов
• Оптимизация CSS в Page Speed — как сжать CSS и отключить внешние файлы стилей в WordPress для увеличения скорости загрузки сайта
• Css свойства Font (Weight, Family, Size, Style) и Line Height для оформления шрифтов в Html коде