Что такое селекторы тегов классы и идентификаторы кратко
Обновлено: 02.07.2024
Ранее мы уже рассматривали HTML селекторы, которые представляют теги HTML. Однако кроме этого есть возможность также определять селекторы классов и идентификаторов. Преимущества подобных селекторов состоит в том, что можно иметь одни и те же элементы HTML, но применять к ним разные стили в зависимости от их класса или идентификатора.
Таким образом, декларация CSS может выглядеть следующим образом:
HTML элементы связываются с такими селекторами CSS при помощи атрибутов class и id. Выглядит это следующим образом:
Разница между идентификатором и классом состоит в том, что идентификатор может присваиваться только одному элементу, а класс – скольким угодно элементам.
Их существует семь видов — тега, класса (class), Id, универсальный, атрибутов, а так же псевдоклассов и псевдоэлементов. Многовато, не правда ли? Ну, ничего, потихоньку разберем их все и при том на подробных примерах.
В предыдущих публикациях мы уже успели рассмотреть как подключается CSS к Html коду, а так же познакомились с единицами размеров, такими как пиксель, Em и Ex и узнали о принципах наследования в CSS. Ну, а сегодня мы, как я и говорил, открываем очень серьезную главу в изучении языка стилевой разметки.
Селекторы тегов и классов (class) в языке CSS
Прежде, чем изучать стилевые правила, необходимо будет узнать, как и по каким принципам задавать те метки, по которым браузер поймет, к каким же именно элементам Html кода нужно их применять. Селекторы бывают разные. Самые простые, с точки зрения понимания, используют названия тегов, к которым должны будут применяться написанные после них правила языка CSS.
В данном примере для всех тегов абзаца P будет использоваться красный цвет шрифта и серый цвет для заливки фона. У любого CSS правила может быть прописано сразу несколько селекторов. Как нужно их будет читать при этом? Всегда справа налево, т.е. начинать с самого ближнего к открывающей фигурной скобке.
В приведенном примере в первой строчке показан селектор тега (элемента), который предписывает использовать красный цвет шрифта для всех контейнеров Div.
Содержимое обычного контейнера Div
Во второй строчке мы видим пример сложного селектора, в котором у нас появляется такой новый элемент, как класс (class). Он прописывается в качестве атрибута любого тега в Html коде. В качестве значения для class мы можем использовать произвольное имя, используя символы 9,[a-z],[A-Z],[_],[-].
Но кроме class в языке стилевой разметки используется еще и Id. Чем отличается класс от Id? Значение последнего должно быть уникальным, т.к. Id является уникальным идентификатором для Html тега и его название (значение) может использоваться в коде только один раз.
А значение для class не является уникальным и может использоваться для сколь угодно большого количества элементов в коде. Т.е. разные теги (Div, P, H1 и т.д) могут иметь одинаковое значение своего атрибута class:
А как он используется в селекторах CSS? Оказывается, что его имя пишется с поставленной впереди точкой.
Абзац с текстом
Т.е. теперь у нас класс XYZ и прописанное для него правило:
покрасило текст абзаца в синий цвет. Этот пример еще раз подчеркивает, что название для атрибута class можно использовать любое. Однако, продолжим.
Давайте еще раз посмотрим на примере, как используются селекторы тегов и классов в CSS. Представим, что у нас прописаны следующие стилевые правила:
А так же представим, что в Html коде у нас присутствуют следующие элементы:
В соответствии с прописанными правилами для указанных селекторов содержимое приведенных элементов Html кода должно будет выглядеть так:
А теперь давайте посмотрим, почему именно так браузер интерпретировал стилевое оформления данных элементов Html кода. Для первого контейнера Div, в котором не прописано никакого class, будет действовать CSS правило применимое для всех контейнеров: div . Следовательно, его содержимое будет окрашено в красный цвет. Что и требовалось показать.
Давайте двигаться дальше. В приведенном примере у нас дальше идет тег абзаца P, в котором прописан . Получается так, что данный элемент не попадает ни под один из трех прописанных нами селекторов (все три мимо него промахнулись).
Универсальный селектор и уникальный идентификатор ID
Теперь давайте перейдем к Id, о которых я уже успел упомянуть. Когда мы в CSS коде видим что то со стоящей впереди решеткой (хешем), то это означает, что мы имеем дело с Id:
Обычно этот селектор пишут без упоминания тега, к которому он относится (первый вариант на приведенном чуть выше примере), хотя второй вариант написания тоже допустим, но употребляется редко. Связано это с тем, что значение атрибута Id в коде будет уникальным, а значит не может быть двух элементов с одинаковыми значениями Id. Т.е. нет смысла уточнять, хотя это не возбраняется.
Поэтому обычно просто пишут хеш (решетку), а сразу за ним значение (название) атрибута Id. Предположим, что у нас прописано следующее правило для Id:
а в коде имеется следующий фрагмент:
Контейнер Div с уникальным идентификатором
Так же в CSS предусмотрен и универсальный селектор обозначаемый звездочкой, которая показывает, что данное правило будет применяться вообще к любому элементу в коде:
В этом случае текст, заключенный в любой тег, будет черным (цвет по умолчанию). Понятно, что все остальные селекторы (тегов, классов и Id) будут иметь приоритет выше, чем у универсального.
Селекторы атрибутов и их будущее в современном CSS
Все описанные выше варианты (тега, класса, Id и универсальный) будут работать абсолютно во всех браузерах. Но существуют еще варианты, работающипе не везде.
К такому типу относятся селекторы атрибутов, которые очень удобны и позволяют существенно расширить и одновременно упростить возможности точечного воздействия на верстку, но которые, к сожалению, не имеют стопроцентной поддержки всеми браузерами.
Как вы, наверное, помните, в языке Html внутри тегов мы можем использовать различные атрибуты, которые позволяют придать определенные свойства содержимому этих самих элементов. Поэтому было бы логично и в языке CSS использовать в качестве селекторов не только названия тегов, но и названия атрибутов.
Собственно, мы это уже делали, когда рассматривали class и Id, ибо они по сути являлись атрибутами каких-то тегов. Просто Айди и Класс имеют очень большое значение в верстке и их вынесли в отдельные группы, каждый со своим собственным синтаксисом.
А как использовать в селекторах остальные существующие в языке Html атрибуты (не Id и не class)? Довольно просто — заключать их в квадратные скобки:
Очень удобно, на мой взгляд. Но вся проблема использования селекторов атрибутов заключается в том, что в браузере IE 6 и ниже они не работают вообще или же работают, но только частично. Покуда доля пользователей выходящих в интернет с помощью IE 6 не будет равна нулю, этот удобный способ, скорее всего, не получит широкого распространения при верстке. Но тем не менее, знать об их существовании и уметь их использовать нужно.
Как вы видите из примера, не важно, имеет ли атрибут указанный в селекторе какое-либо значение или же он пустой. Но это еще далеко не все, что можно с ним вытворять, ибо это просто песня.
Можно в них указывать не только название атрибута, но и его значение:
Описанный пример представлял из себя строгое равенство, но можно написать этот селектор и так:
Вы, наверное, помните, что атрибут Href используется в гиперссылках для указания Url адреса в относительных или абсолютных ссылках. Так вот, довольно часто внутренние ссылки на сайте делают относительными, а внешние по другому, как сделать абсолютными, никак не получится.
Как вы можете видеть, селекторы атрибутов дают нам массу возможностей и то, что они еще широко не используются, является заслугой очень бедной и обиженной судьбой компании Мелкософт, а в частности их детища IE 6. Но потихоньку они начинают применяться в CSS и вскоре, конечно же, пробьют себе дорогу в жизнь.
Собственно, из всех типов нам осталось рассмотреть только два: селекторы псевдоклассов и псевдоэлементов. Но я хочу перенести это на следующую статью, где мы так же поговорим и про их различные комбинации.
Разное оформление для внутренних и внешних ссылок через CSS
У меня как-то возникло желание по разному оформить ссылки ведущие с блога на внешние сайта и ссылки ведущие на страницы моего же ресурса. Зачем это нужно? Пока не знаю, но если желание появилось, то его нужно было попытаться утолить. Собственно, решение было найдено на этом блоге.
Суть метода заключается в применении регулярных выражений и использовании селекторов псевдоклассов after и before, о которых я уже писал. В принципе, как именно вы выделите ссылки ведущие на внешние сайты не важно (можете сами пробежаться по урокам стилевой разметки и найти подходящий вам метод). Главное именно отделить эти самые внешние ссылки от внутренних.
Однако мне понравился вариант предложенный на найденном мною блоге, когда к внешней ссылки добавляется иконка со стрелочкой. Подобным образом оформлены внешние ссылки на Wikipedia (что это такое?), а значит большей части пользователей сети будет понятно назначение подобной иконки.
В этом случае вам нужно будет сохранить на своем сервере вот такую вот картинку (кликните по ней правой кнопкой мыши и выберите вариант сохранения изображения). После этого открывайте ваш файл стилей (в WordPress он лежит в папке с используемой вами темой по следующему адресу: /wp-content/themes/Название темы/ ) и дописывайте в него подобный код:
Правда, в этом случае данное правило применится ко всем внешним ссылка на вашем сайта, в том числе и к счетчикам посещений, что не есть хорошо. Поэтому я решил добавить выделение внешних ссылок только в постах, указав в качестве селектора не просто тег A, а еще и класс контейнера, в который обернуты все посты на моем блоге.
В моем случае это класс post, поэтому код видоизменился:
Собственно, все. Должно работать. Если захотите например, добавить не иконку со стрелочкой, а надпись "Внешняя ссылка" или что подобное, то просто поменяйте содержимое content:
Можно будет, кстати, и ничего не добавлять, а просто изменить цвет внешней ссылки относительно внутренней или сделать подчеркнутой, допустим пунктиром. Для этого вместо content: просо допишите нужные вас CSS свойства. Надеюсь, что вам это пригодится.
Комментарии и отзывы (8)
Мрет блог по-моему? все про верстку да про верстку — для этого книжки и справочники есть! Давно если честно ничего полезного про продвижение не было.
Что полезного уяснил для себя:
1. Наконец-то я осознал отличие class от id.
2. Назначение этого самого id.
3. И самое интересное: применение [href^="http"] . Теперь с легкостью можно на сайтах своих выделить все внешние ссылки специальным значком через подстановку фона.
Что касается ИЕ6. Я при верстке в последнее время на него вообще не обращаю внимания. Потому что те, кто еще его использует не должны быть удостоены внимание и считаю тратой времени впустую, оптимизируя верстку для ИЕ6.
Спасибо. Респект. Прогрессивного тебе развития.
Рас уж написал коммент, воспользуюсь случаем и задам автору вопрос: что за шайтан поиск используется у Вас в блоге? При попытке, что либо найти, страница с результатами начинает судорожно обновляться.
И правда хотелось бы чего-нибудь о продвижении прочитать. Написал бы автор какую-нибудь супер новую статью, тема которой ещё не до конца раскрыта в Рунете, но поможет с продвижением.
С другой стороны посещаемость сайта растёт удивительными темпами (если не секрет — как Вы этого достигли?), значит всё делается правильно.
Дмитрий делает то же самое, что и делал. Просто яндекс поменял какой-то алгоритм в поисковике. На моем проекте я не писал статьи около месяца, а хостов выросло с 1000 до 1500 человек в сутке. Причем выдача гугла осталась на прежнем уровне, зато яндекс в 2,5-3 раза начал больше давать выдач.
Дмитрий!Отличная статья, но для новичков!
Не забывай,что сложность твоего блога такова, что те, кто уже подписан это давно знают!
Но статья оч хорошая, как обычно! И все же не всегда же только на подписчиков рассчитывать, есть ведь начинающие — им будет полезно!
А вообще, Дмитрий, не знаешь о чем писать — обращайся к нам, своим постоянным читателям — мы всегда будем рады получить ответы на свои вопросы так хорошо, как ты умеешь.
Буду ждать новых статей!
Наконец-то! Первый сайт где нормально описана div-верстка. Даже для меня, водителя троллейбуса, понятно.
А вот у меня затык в коде, статья хорошая, но я ответ на свой вопрос не нашла, к сожалению.Не поможете?
Начальный уровень подойдет для небольших сайтов.
Дальше код идентичен, в идеале хочется получить 4 колонки, сверху каждой картинка, под ней текст, под текстом слово Цена и значок корзины. Но все уползает, корзину уменьшаю до нужных размеров и сдвигаю от левого края. Но с дивами беда какая-то, никак не ставятся ровно, в ряд, все колонки.
В стилях вот что прописала-
в стилях тег p поменяла, раньше стоял div и все уползало. впрочем и сейчас ползет.
В этом CSS правиле, p — это селектор , в данном случае — это селектор элемента . Это CSS правило устанавливает стили (CSS свойства, описанные в нём) для всех элементов p на странице.
В CSS очень много различных типов селекторов. Используя один из них или комбинацию из нескольких можно очень точно применить стили к нужным элементам.
Базовые селекторы
К базовым селекторам можно отнести селектор по классу, тегу, идентификатору, атрибуту и универсальный селектор.
Селектор по элементу (тегу)
Селектор по элементу предназначен для выбора элементов по имени тега.
Пример задания правила для всех элементов p на странице:
Селектор по классу
Селектор по классу предназначен для выбора элементов по классу (значению атрибута class ).
Пример задания правила для всех элементов, имеющих класс center :
Селектор по идентификатору (id)
Селектор по идентификатору предназначен для выбора элемента по идентификатору (значению атрибута id ).
Пример задания правила для элемента, имеющего в качестве значения атрибута id значение footer :
Универсальный селектор
Универсальный селектор (селектор звёздочка) предназначен для выбора всех элементов.
Пример задания правила для всех элементов на странице:
CSS селекторы по атрибуту
Селекторы по атрибуту предназначены для выбора элементов по имени атрибута и (или) его значению.
Типы селекторов по атрибуту:
- [attr] – по имени атрибута;
- [attr=value] – по имени и значению атрибута;
- [attr^=value] – по имени и значению, с которого оно должно начинаться;
- [attr|=value] – по имени атрибута и его значению, которое равно value или начинается со value- ;
- [attr$=value] – по имени атрибута и значению, на которое оно должно заканчиваться;
- [attr*=value] – по указанному атрибуту и значению, которое должно содержать value ;
- [attr~=value] – по имени атрибута и значению, которое содержит value отделённое от других с помощью пробела.
Пример задания правила для всех элементов на странице, имеющих атрибут target :
Пример задания правила для всех элементов на странице, имеющих атрибут rel со значением nofollow :
Пример задания правила для всех элементов на странице, имеющих атрибут class , значение которого начинается с col :
Пример задания правила для всех элементов на странице, имеющих атрибут class , значение которого равно test или начинается с test- (т.е. с обязательным дефисом, после которого идёт остальное содержимое значения):
Пример задания правила для всех элементов на странице, имеющих атрибут class , значение которого заканчивается на color :
Пример задания правила для всех элементов на странице, имеющих атрибут data-content , значение которого содержит news , отделённое от других с помощью пробела (например будет выбран элемент, если у него атрибут data-content равен hot-news news news-football ):
Псевдоклассы
Псевдоклассы предназначены для более точного выбора элементов в зависимости от их динамического состояния или расположения. С помощью них можно, например, установить стили элементу при поднесении к нему курсора или стилизовать элемент в зависимости от того какой он имеет порядковый номер.
Псевдоклассы — это дополнение к основному селектору, которое позволяет выбрать элемент в зависимости от его особого состояния. Добавляется он к селектору c помощью символа : , т.е. так селектор:псевдокласс .
Псевдоклассы для выбора элементов в зависимости от их состояния
К этой группе псевдоклассов можно отнести псевдоклассы: :link , :visited , :hover , :active и :focus .
Псевдоклассы :link и :visited предназначены исключительно для ссылок (элементов a с атрибутом href ).
Псевдоклассы :hover , :active и :focus могут применяться не только к ссылкам, но и к другим элементам.
Псевдокласс :link
Псевдокласс :link предназначен для выбора не посещённых ссылок.
Пример задания правила для всех элементов a с классом external , которые пользователь ещё не посетил:
Псевдокласс :visited
Псевдокласс :visited предназначен для выбора посещённых ссылок.
Пример задания правила для всех элементов a , расположенных в .aside , пользователь которые уже посетил:
Псевдокласс :active
Псевдокласс :active предназначен для выбора элементов в момент когда они активируются пользователем. Например, когда пользователь нажал левой кнопкой мышкой на ссылку, но её ещё не отпустил. В основном данный класс применяется для ссылок ( a ) и кнопок ( button ), но может также использоваться и для других элементов.
Пример задания CSS правила для всех элементов a когда они активируются пользователем:
Псевдокласс :hover
Псевдокласс :hover предназначен для выбора элементов при поднесении к ним курсора (при наведении на них).
Пример задания CSS правила для всех элементов .btn-warning при поднесении к ним курсора:
При задании CSS-правил для ссылок с использованием псведоклассов :link , :visited , :hover и :active , их следует распологать в следеующем порядке:
Если CSS-правила расположить в другом порядке, то часть из них могут не работать.
Псевдокласс :focus
Предназначен для выбора элемента, который в данный момент находится в фокусе. Например, данное состояние может активироваться когда мы кликаем мышью в текстовое поле или переходим в него с помощью клавиши tab на клавиатуре.
Пример задания CSS правила для элемента input[type="text"] при нахождении его в фокусе:
По расположению среди соседей
При выборе элементов можно дополнительно с помощью псевдоклассов задать условие (фильтр) по их расположению (порядковому номеру) в родителе.
Псевдоклассы, предназначенные для этого: :first-child , :last-child , :only-child , :nth-child(выражение) , :nth-last-child(выражение) .
Псевдокласс :first-child
Псевдокласс :first-child применяется для выбора элементов, которые являются первыми дочерними элементами своего родителя.
Пример задания CSS правила для элементов li являющимися первыми дочерними элементами своего родителя:
Псевдокласс :last-child
Псевдокласс :last-child применяется для выбора элементов, которые являются последними дочерними элементами своего родителя.
Пример задания CSS правила для элементов .alert-warning , которые являются последними дочерними элементами своего родителя:
Псевдокласс :only-child
Псевдокласс :only-child используется для выбора элементов, если они являются единственными дочерними элементами внутри родительского контейнера.
Селектор h2:only-child выберет все элементы h2 , если они являются единственными дочерними элементами своего родителя.
Действие аналогичное :only-child можно выполнить с помощью псевдоклассов :first-child и :last-child . Например селектор h2:only-child можно ещё реализовать так: h2:last-child:first-child .
Псевдокласс :nth-child(выражение)
Псевдокласс :nth-child() применяется для выбора элементов по их порядковому номеру в родителе. В качестве выражения можно использовать число, формулу или ключевые слова odd или even . Отсчёт элементов в родителе начинается с 1.
Формула имеет следующую запись: An + B . A и B - это числа, а n — счетчик, принимающий целые значения, начиная с 0 (т.е. 0, 1, 2, 3 . ).
Например, формула вида 3n + 2 будет определять элементы с порядковыми номерами (2, 5, 8, . ). Т.е. 3 * 0 + 2 , 3 * 1 + 2 , 3 * 2 + 2 , .
А например, формула вида 5n будет определять элементы с порядковыми номерами (0, 5, 10, . ). Т.е. 5 * 0 , 5 * 1 , 5 * 2 , .
Псевдокласс :nth-last-child(выражение)
Псевдокласс :nth-last-child() выполняет те же действия что и :nth-child() за исключением того, что отсчет элементов в родителе вёдется не с начала, а с конца. В псведоклассе :nth-last-child(выражение) в качестве выражения можно использовать те же вещи, т.е. число, формулу, или ключевые слова odd или even
По расположению среди соседей с учётом типа элемента
В CSS имеются псевдоклассы аналогичные :first-child , :last-child и т.д. Они отличаются от них только тем, что выполняют это с учётом типа элемента.
Список псевдоклассов, предназначенных для этого: :first-of-type , :last-of-type , :only-of-type , :nth-of-type(выражение) , :nth-last-of-type(выражение) .
Псевдокласс :first-of-type
Данный псевдокласс очень похож на :first-child , но в отличие от него он выбирает не просто первый элемент, а первый элемент своего родителя с учётом его типа .
Например, выберем все элементы p , которые являются первыми элементами указанного типа у своего родителя:
При использовании селектора p:first-child , не один элемент p не был выбран, т.к. не один из них не является первым дочерним элементом своего родителя.
Псевдокласс :last-of-type
Данный псевдокласс предназначен для выбора элементов, которые являются последними дочерними элементами данного типа своего родителя.
Псевдокласс :only-of-type
Псевдокласс :only-of-type применяется для выбора элементов, если каждый из них являются единственным дочерним элементом данного типа внутри своего родителя. В отличие от :only-child псведокласс :only-of-type работает аналогично, но с учётом типом элемента.
В этом примере стили будут применены к элементам p , которые являются единственным элементом p внутри своего родителя.
Псевдокласс :nth-of-type(выражение)
Данный псевдокласс предназначен для выбора элементов по их порядковому номеру в родителе с учетом их типа.
Псевдокласс :nth-of-type(выражение) похож на :nth-child(выражение) с разницей лишь а том, что он учитывает тип элемента. В качестве выражения также можно использовать число, формулу или ключевые слова odd или even . Отсчёт элементов в родителе начинается с 1.
Селектор p:nth-child(2) выберет второй по счёту элемент, если он является p , а селектор p:nth-of-type(2) веберет второй дочерний элемент p среди дочерних p .
Псевдокласс :nth-last-of-type(выражение)
Псевдокласс :nth-last-of-type(выражение) аналогичен классу :nth-of-type(выражение) с разницей в том, что отсчёт дочерних элементов ведётся с конца.
Псевдоклассы для элементов форм
К этой группе можно отнести псевдоклассы :enabled , :disabled и :checked .
Псевдоклассы этой группы, а также :hover , :active и :focus ещё называют событийными селекторами, т.к. они позволяют применить стили при наступлении определённых событий.
Псевдокласс :checked
Псевдокласс :checked предназначен для выбора элементов radio , checkbox и option внутри select , которые находятся во включенном состоянии.
В этом примере фон элемента label при отмеченном checkbox выделяется цветом. Выбор включенного чекбокса выполняется с помощью псевдокласса :checked .
Псевдокласс :enabled
Псевдокласс :enabled предназначен для выбора включенных элементов формы, с которыми пользователь может взаимодействовать, например, нажать на него или внести текст.
Пример, в котором установим для всех включенных элементов input фон:
Псевдокласс :disabled
Элементы формы могут кроме включенного состояния находиться ещё в отключенном.
Псевдокласс :disabled предназначен для выбора отключенных элементов формы, т.е. элементов с которыми пользователь в данный момент не может взаимодействовать.
Например, выберем все отключенные элементы input :
Остальные псевдоклассы
Псевдокласс :not(селектор)
Псевдокласс :not() предназначен для выбора элементов, которые не содержат указанный селектор.
В качестве селектора можно указывать селекторы по тегам, классам, атрибутам, использовать псевдоклассы, т.е. всё кроме псведокласса :not() , несколько сгруппированных селекторов, псевдоэлементы, дочерние и вложенные селекторы:
При необходимости можно использовать несколько псевдоклассов :not() .
Пример CSS селектора для выбора элементов, которые не содержат некоторый класс:
Псевдокласс :empty
Псевдокласс :empty предназначен для выбора пустых элементов (т.е. элементов, у которых нет дочерних узлов, в том числе текстовых).
Селектор div:empty выберет все пустые элементы div на странице.
Псевдокласс :root
Псевдокласс :root предназначен для выбора корневого элемента документа. В HTML документе данным элементом является . В отличие от селектора по тегу html данный псевдокласс имеет более высокий приоритет.
Применять :root можно например для объявления CSS переменных:
Псевдокласс :target
Псевдокласс :target предназначен для выбора элемента, идентификатор которого соответствует хэшу в URL-адресе.
Группировка селекторов
Для задания правил нескольким селекторам одновременно их необходимо перечислить через запятую.
Синтаксис: селектор1, селектор2, .
Пример задания правила для всех элементов h3 и h4 на странице:
Комбинирование селекторов
В CSS селекторы можно комбинировать. Осуществляется это очень просто, посредством последовательного их записывания, без использования пробела.
Пример селектора для выбора элементов, которые имеют одновременно два класса:
Пример селектора для выбора элементов, которые имеют указанный класс, атрибут, и является первым дочерним элементом в своём родителе:
Селекторы отношений
В HTML документе каждый элемент всегда связан с другими элементами.
Виды отношений между HTML элементами:
- родитель – элемент, непосредственно в котором находится рассматриваемый элемент;
- предок – это элемент, который расположен на одном из уровней иерархии элементов, до которого можно дойти двигаясь от рассматриваемого элемента к его родителю, от его родителя к родителю его родителя и т.д.
- дети – это элементы, непосредственно расположенные в текущем рассматриваемом элементе;
- потомки (дочерние элементы) – это любые элементы, которые находятся в текущем элементе вне зависимости от уровня иерархии, в котором они расположены;
- соседи (сиблинги) – это элементы, расположенные на том же уровне вложенности (иерархии), что и рассматриваемый элемент; или другими словами — это все другие элементы, которые имеют того же родителя что и текущий рассматриваемый элемент.
Более наглядно про отношения элементов приведено на рисунке. На этом рисунке отношения рассмотрены относительно элемента выделенного синим цветом.
В CSS имеется 4 вида селекторов отношений.
Первые два из них X Y и X > Y относятся к вложенным селекторам. Они предназначены для поиска элементов в зависимости от их нахождения внутри других.
Остальные два X + Y и X ~ Y являются CSS селекторами для выбора соседних элементов.
Эти селекторы называют составными или комбинацией селекторов. Так как они на самом деле состоят из нескольких селекторов, разделённых между собой с помощью специальных символов (комбинаторов). Всего различают 4 символа: пробел, знак > (больше), знак + и ~ (тильда).
Селектор X Y (для выбора вложенных или дочерних элементов)
Селектор X Y (предок потомки) предназначен для выбора элементов Y , находящихся в X .
Другими словами, селектор X Y предназначен для выбора элементов Y , являющихся потомками элементов определяемым селектором X .
Селекторы X Y называют контекстными или вложенными.
Например, селектор дочерних элементов div p выберет все элементы p , расположенные в div .
Селектор X > Y
Селектор X > Y (родитель > дети) предназначен для выбора элементов, определяемым селектором Y непосредственно расположенных в элементе, определяемым селектором X .
По другому можно сказать, что селектор X > Y предназначен для выбора Y , у которых родителем является элемент, определяемым X .
Например, комбинация селекторов li > ul выберет все элементы ul , которые непосредственно расположены в li .
Селектор X + Y
Селектор X + Y предназначен для выбора элементов Y , каждый из которых расположен сразу же после X . Элементы определяемым селектором X и Y должны находиться на одном уровне вложенности, т.е. быть по отношению друг к другу соседями (сиблингами).
Например, комбинация селекторов input + label выберет все элементы label , которые расположены сразу же за элементом input , и являющиеся друг по отношению к другу соседями (сиблингами).
Селектор X ~ Y
Селектор X ~ Y предназначен для выбора элементов Y , которые расположены после X . При этом элементы, определяемые селектором X и Y , должны являться по отношению друг к другу соседями (сиблингами).
Например, p ~ span выберет все элементы span , расположенные после элемента p на том же уровне вложенности.
Приоритет селекторов
Когда в CSS имеется несколько правил, устанавливающих одно и тоже CSS свойство некоторому элементу, приоритетным из них является то, в котором селектор имеет большую специфичность (вес).
Специфичность селекторов удобно представлять в виде 4 чисел: 0,0,0,0 .
При этом сравнение селекторов по весу нужно выполнять слева направо. Если первая цифра одного селектора больше, чем у другого, то он является более специфичным и к элементу будет применяться CSS-свойство, заданное в нём. Если цифры равны, то выполняем сравнение следующих цифр селекторов и т.д.
Если у сравниваемых селекторов все цифры равны, то будет применяться тот, который ниже из них расположен по коду.
Как считать эти цифры? Каждый селектор в зависимости от типа имеет вес:
- универсальный селектор (не добавляет вес) – 0,0,0,0 ;
- селекторы по тегу, псевдоэлемент добавляют единичку к четвёртой цифре – 0,0,0,1 ;
- селекторы по классу и по атрибуту, псевдоклассы добавляют единичку ко третьей цифре – 0,0,1,0 ;
- селектор по идентификатору добавляют единичку ко второй цифре – 0,1,0,0 ;
Стили, расположенные в атрибуте style элемента, являются более специфичными по сравнению с селекторами. Вес этих стилей определяется единицей в первой цифре – 1,0,0,0 .
Повысить важность определённого CSS свойства можно с помощью ключевого слова !important . В этом случае будет использоваться именно данное CSS-свойство.
В этом примере элементу будет установлен тот фон к которому добавлено слово !important . !important перебивает любой вес.
Интересный случай, когда нужно определить какое значение CSS-свойства будет применено к элементу, если !important добавлено к нескольким из них.
В этом случае будет применено то значение CSS-свойства c !important у которого больше вес селектора.
К примеру, если добавить !important к CSS-свойству расположенному в style , то получим максимальную возможную специфичность, которую уже никак не перебьёшь.
Каких селекторов нет в CSS
В CSS нет селектора для получения родительского элемента. Этот селектор может появиться в новой спецификации CSS, но в CSS3 так выбрать элемент нельзя.
CSS классы и идентификаторы CSS. CSS селекторы.
Стоит сразу сказать, что селекторы классов CSS и идентификаторов CSS можно будет использовать только если внести соответствующие изменения в HTML документа, добавить HTML атрибуты. В этой публикации мы как раз таки и поговорим про HTML атрибуты id и class, которые существенно облегчают оформление HTML страниц и позволяют выбирать и группировать HTML элементы в таблице стилей CSS более точно.
Селекторы классов CSS
В прошлой публикации я уже писал о том, что в каскадных таблицах стилей CSS можно группировать CSS селекторы и CSS объявления. В принципе, CSS классы и CSS идентификаторы предназначены для того, чтобы сгруппировать HTML элементы и разнообразить условия отбора нужных HTML элементов. Группировка, которая демонстрировалась в прошлой публикации, была очень простой и основывалась на выборе нужных элементов при помощи соответствующих селекторов. То есть мы обращались только к каким-то конкретным HTML элементам и задавали для них CSS стили.
Помимо простых CSS селекторов существует два специальных CSS селектора: селекторы классов CSS (class) и селекторы идентификаторов CSS (id). Данные селекторы позволяют задать CSS стили независимо от HTML элементов. Селекторы классов и селекторы идентификаторов можно применять независимо от селекторов элементов, а можно их использовать вместе. CSS селекторы классов, как и CSS селекторы идентификаторов будут работать только в том случае, если задать соответствующие атрибуты для нужных тегов в HTML документе.
Допустим, у нас есть HTML документ, есть текст про кошек и собак. Текст разбит на заголовками
на логические части, и нам нужно, чтобы заголовки, относящиеся к описанию кошек были синего цвета, а заголовки, относящиеся к тексту про собак были серыми. Получается, что мы не сможем разделить заголовки про кошек и собак простыми CSS селекторами, потому что:
Мы не сможем задать два цвета при помощи простых CSS селекторов одному и тому же HTML элементу, следовательно, нужно внести какое-то разнообразие в HTML документ и сделать HTML элементы более уникальными, чтобы разнообразить условия выбора при помощи CSS селекторов. Для этого мы можем использовать HTML атрибут id и HTML атрибут class, а затем использовать уже CSS селекторы классов и CSS селекторы идентификаторов.
CSS классы. CSS селекторы классов
Самой распространенной практикой оформления веб-страниц без использования простых CSS селекторов, является практика использования CSS селекторов класса. Но, чтобы использовать CSS классы требуется внести изменения в код HTML документа, добавить HTML атрибут class к требуемым HTML элементам. Например, вернемся к кошкам и собакам и создадим HTML документ:
! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
О происхождении собаки выдвигается масса различных гипотез , наиболее вероятным предком современной span class = ” dogs ” > собаки / span > считается волк и некоторые виды шакалов . В суждениях ученых о предках домашней собаки присутствуют две точки зрения . Одни считают , что собаки — полифилетическая группа ( происходящая от нескольких предков ) , другие придерживаются мнения , что все span class = ” dogs ” > собаки / span > произошли от одного предка ( монофилетическая теория ) [ 3 ] [ неавторитетный источник ? ] . Этолог , лауреат Нобелевской премии Конрад Лоренц выдвинул теорию о происхождении собак от волков и от шакалов [ 4 ] , подчёркивая диаметральные различия между их характерами и повадками . / p >
Как вы можете видеть, у каждого тега
HTML страница без CSS стилей
Довольно скучная и невзрачная страница. Давайте добавим несколько CSS стилей к нашей странице:
В каскадных таблицах стилей CSS используется краткая запись для добавления имени CSS селектора класса, достаточно добавить точку перед именем, класса, которое мы задали, как значение атрибута class. Например: .dog, .cat или .dogs. Селекторы CSS классов можно объединять вместе с другими селекторами классов, с селекторами идентификаторов CSS, с селекторами элементов. А вот то, что получится, когда мы добавим CSS стили, написанные выше:
HTML страница с добавлением CSS стилей
Мы видим, что стили соответствующих классов применились сразу ко всем элементам на HTML странице. Чтобы продемонстрировать то, как можно комбинировать CSS селекторы элементов с селекторами классов, давайте немного изменим пример:
! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
Теперь у каждого HTML тега в документе используется класс со значением “cat”. Соответственно те CSS стили, которые мы задали ранее, будут работать не так, как нам требуется, вот что мы увидим (со старыми стилями):
В общем, мы увидим, что весь тест принял стиль, который мы создали для HTML заголовка в первом случае, давайте это исправим. Достаточно скомбинировать CSS селекторы:
Теперь мы скомбинировали селекторы CSS элементов и CSS классов и получили то, что нам нужно:
HTML страница с CSS стилями
Таким образом, получилось, что CSS стили, прописанные для селекторов h3.cat будут распространяться только на заголовки третьего уровня, у которых значения атрибута class равно “cat”, соответственно стили, которые написаны для селектора p.cat будут действовать только на все HTML элементы
, у которых класс равен “cat”, аналогично и для тэга . Обратите внимание: я не ставил запятые между CSS селекторами, если поставить запятые, то получится совсем другой результат, просто ко всему HTML документу применится стиль, который мы задали последним (это относится к высоте и цвету текста на странице), абзац и заголовок будет расположен по центру, шрифт будет использован Arial, а их ширина будет равна 600 пикселов, также появится нижняя часть рамки под каждым HTML элементом на странице. Все это связано с тем, что объявления, которые написаны позже, имеют больший приоритет.
Множественные классы CSS
Вы уже видели, что значение атрибута class может состоять из одного слова, но в HTML значение атрибута class может состоять из двух слов и более слов, в этом случае слова разделяются пробелами. Вернемся к собакам, например, мы описываем, какую-нибудь пароду собак, например немецкую овчарку и нам необходимо выделить это слово и как собака и как немецкая овчарка. Для этого мы можем использовать множественный класс, HTML атрибут class будет выглядеть следующим образом:
! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
span class = ” shepherd dog ” > Немецкая овчарка / span > — порода span class = ” dog ” > собак / span > , изначально использовалась в качестве пастушьей и служебно - розыскной собаки . span class = ” shepherd ” > Немецкая овчарка / span > была получена в результате селекции и скрещивания некоторых разновидностей гуртовых собак Центральной и Южной Германии . Различают гладкошёрстную и длинношёрстную разновидности .
Теперь мы можем задать три различных стиля отображения для множественного CSS селектора и для двух селекторов классов dog и shepherd. Синтаксис для множественных CSS селекторов очень прост:
Обратите внимание: Internet Explorer до 7 версии не всегда правильно обрабатывает множественные селекторы CSS классов. В IE6 можно выбирать одно из нескольких слов, которые входят в состав множественного селектора. Если вы напишите два или более слов в CSS селекторе, то браузер IE6 выполнит выборку по последнему слову, то есть отберет все элементы, в значение атрибута class есть последнее слово.
Селекторы CSS идентификаторов
Соответственно CSS правило будет выглядеть следующим образом:
Атрибут id, который присваивает идентификатор можно прописать практически для любого HTML тэга. Название CSS идентификатора может состоять только из символов латинского алфавита, тире, символов подчеркивания, цифр, но цифра не должна быть первой при именовании идентификаторов, регистр букв при именовании идентификаторов не имеет значение в случае HTML, но если мы создаем XHTML или XML документ, то регистр будет учитываться браузером. Аналогичные правила именования действуют и на имена селекторов классов CSS.
Что использовать? CSS идентификаторы или CSS классы
Как вы могли заметить: у селекторов идентификаторов и у селекторов классов CSS есть свои уникальные особенности, но что же лучше использовать? Однозначного ответа на этот вопрос дать невозможно, все зависит от ситуации или привычки разработчика. Из всего выше сказанного нужно было вынести следующее: CSS классы можно задавать любому количеству элементов на HTML странице. В примерах мы использовали один класс “dog” и для тега
, и для тэга
, и для тега . В свою очередь, CSS идентификаторы можно использовать в HTML документе только единожды. Поэтому если в вашем документе есть HTML элемент с атрибутом id, значение которого равно “container”, то вы не имеете права присваивать любому другому HTML элементу в документе такое же значение атрибута id.
Читайте также: