Базовые селекторы


Содержание

Некоторые концепции для новичков: Как работают селекторы в CSS

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

В примере, приведенном ниже, CSS будет содержаться в файле с именем style.css ссылка на который будет содержаться в HTML — документе с именем index.html . Это — два разных файла. И это — одна из важных особенностей CSS, хранение дизайна отдельно от разметки.

Вот как выглядит HTML — файл:

А CSS — файл будет содержать лишь блок селекторов, который мы видим ниже.

CSS селекторы

Селектор — это часть CSS-правила, которая сообщает браузеру, к какому элементу (или элементам) веб-страницы будет применён стиль.

Термин селектор может относиться к простому селектору (simple selector), составному селектору (compound selector), сложному селектору (complex selector) или списку селекторов.

К простым селекторам относятся:

  • селектор типа
  • универсальный селектор
  • селекторы атрибутов
  • селектор идентификатора
  • селектор класса
  • псевдо-классы
CSS селектор Пример Описание CSS
.class .myClass Выбирает все элементы с классом myClass ( ). 1
#id #main Выбирает элемент с идентификатором main ( ). 1
* * Выбор всех элементов. 2
элемент span Выбор всех элементов . 1
элемент,элемент div,span Выбор всех элементов

и всех элементов .

1
[атрибут] [title] Выбирает все элементы с атрибутом title . 2
[атрибут=»значение»] [title=»cost»] Выбирает все элементы с атрибутом title , значение которого в точности совпадает со значением указанным в селекторе ( title=»cost» ). 2
[атрибут

=»значение»]

[title

=»один»]

Выбирает все элементы с атрибутом title , в значении которого (в любом месте) встречается подстрока (в виде отдельного слова) «один» ( title=»один и два» ). 2
[атрибут|=»значение»] [lang|=»ru»] Выбор всех элементов с атрибутом lang , значение которого начинается с «ru». 2
[атрибут^=»значение»] a[href^=»https»] Выбор каждого элемента с атрибутом href , значение которого начинается с «https». 3
[атрибут$=»значение»] [src$=».png»] Выбирает все элементы с атрибутом src , значение которого оканчивается на «.png» ( src=»https://puzzleweb.ru/css/some_img.png» ). 3
[атрибут*=»значение»] [title*=»один»] Выбирает все элементы с атрибутом title , в значении которого (в любом месте) встречается подстрока (в виде отдельного слова или его части) «один» ( title=»один и два» ). 3

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

Сложный селектор — это последовательность селекторов, которые разделены комбинаторами.

Список селекторов — это селекторы, перечисленные через запятую.

Комбинаторы

Для объединения простых CSS селекторов, используются комбинаторы, которые указывают взаимосвязь между простыми селекторами. Существует несколько различных комбинаторов в CSS2, и один дополнительный в CSS3, когда вы их используете, они меняют характер самого селектора.

Комбинатор Пример Описание CSS
элемент элемент div span Выбор всех элементов внутри

.

1
элемент>элемент div>span Выбирает все дочерние элементы , у которых родитель — элемент
.
2
элемент+элемент div+p Выбирает все элементы

, которые расположены сразу после элементов

ol

Выбор всех элементов

    , которым предшествует элемент

Псевдо-классы

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

Псевдо-класс Пример Описание CSS
:link a:link Выбор всех не посещенных ссылок. 1
:visited a:visited Выбор всех посещенных ссылок. 1
:active a:active Выбор активной ссылки. 1
:hover a:hover Выбор ссылки при наведении курсора мышки. 1
:focus input:focus Выбор элемента , который находится в фокусе. 2
:first-child p:first-child Выбор каждого элемента

, который является первым дочерним элементом своего родителя.

2
:lang(язык) p:lang(ru) Выбор каждого элемента

с атрибутом lang , значение которого начинается с «ru».

2
:first-of-type p:first-of-type Выбор каждого элемента

, который является первым из элементов

своего родительского элемента.

3
:last-of-type p:last-of-type Выбор каждого элемента

, который является последним из элементов

своего родительского элемента.

3
:only-of-type p:only-of-type Выбор каждого элемента

, который является единственным элементом

своего родительского элемента.

3
:only-child p:only-child Выбор каждого элемента

, который является единственным дочерним элементом своего родительского элемента.

3
:nth-child(n) p:nth-child(2) Выбор каждого элемента

, который является вторым дочерним элементом своего родительского элемента.

3
:nth-last-child(n) p:nth-last-child(2) Выбор каждого элемента

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

3
:nth-of-type(n) p:nth-of-type(2) Выбор каждого элемента

, который является вторым дочерним элементом

своего родительского элемента.

3
:nth-last-of-type(n) p:nth-last-of-type(2) Выбор каждого элемента

, который является вторым дочерним элементом

своего родительского элемента, считая от последнего дочернего элемента.

3
:last-child p:last-child Выбор каждого элемента

, который является последним элементом своего родительского элемента.

3
:root :root Выбор корневого элемента в документе. 3
:empty p:empty Выбор каждого элемента

, который не содержит дочерних элементов (включая текст).

3
:target :target Выбор текущего целевого элемента на странице, то есть элемента, к которому был осуществлён переход по ссылке внутри страницы. 3
:enabled input:enabled Выбор каждого включенного элемента . 3
:disabled input:disabled Выбор каждого выключенного элемента . 3
:checked input:checked Выбор элемента , выбранного по умолчанию или пользователем. 3
:not(селектор) :not(p) Выбор всех элементов, кроме элемента

Псевдо-элементы

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

Составные селекторы CSS

В спецификации CSS2 определены следующие виды составных селекторов, элементами которых являются простые селекторы:

· селекторы дочерних элементов;

· селекторы родственных элементов

· селекторы соседних элементов.

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

Пример 4.3.28. Задание списка селекторов для следующих правил:

Эти правила можно задать в виде одного правила со списком селекторов

Тогда фрагмент документа HTML

Часть 1

Раздел 1

Глава 1

будет выведен на Web-странице следующим образом:

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

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

Выборка элементов

Cелекторы

Одним из важных функциональностей jQuery является выборка элементов. Чтобы что-то делать с элементами, манипулировать ими, применять к ним методы jQuery, нам надо сначала их получить. Библиотека предоставляет нам удобный способ выбора элементов, основанный на селекторах. Нам достаточно передать в функцию jQuery селектор и мы можем получить нужный нам элемент, который соответствует данному селектору. Например, если необходимо получить все эелементы img , то мы можем использовать следующее выражение: $(«img») . В данном случае «img» будет выступать в качестве селектора.

Рассмотрим основные селекторы jQuery, которые используются для выборки элементов.

Базовые селекторы jQuery

Выборка всех элементов страницы

Например, выражение $(«*»).css(‘background-color’, ‘red’) окрасит все элементы страницы и саму страницу в красный цвет

Выборка всех элементов с данным именем тега

$(«img») выбирает все элементы img
$(«input») выбирает все элементы input

Выборка элемента с данным значением атрибута id

$(«#btn1») выбирает элемент, у которого значение id равно btn1 (например,

Выборка всех элементов с данным значением атрибута class

$(«.redStyle») выбирает элементы, у которого значение class равно redStyle (например,

Выборка всех элементов, которые соответствуют указанным селекторам

Например, у нас есть такой код:

то селектор $(«.apple, .orange») выберет элементы, выделенные жирным

Конкретизация выбора

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

В данном случае мы используем селектор #tab, то есть выбираем нашу таблицу, которая имеет >css(‘background-color’, ‘silver’) устанавливает цвет элемента — в данном случае серебряный.


Запустив данную страничку в веб-браузере мы получим следующую картину:

Но мы также можем использовать набор селекторов, чтобы более детально произвести действие. Например, нам надо, чтобы была закрашена только первая строка, которая имеет атрибут . Тогда мы можем использовать следующий селектор: $(«#tab .tabhead») . В этом случае селектор выберет элемент с .

При этом мы можем для сужения выборки использовать множество различных селекторов, например: $(«div#menu a.redStyle») . К примеру данный селектор может найти например такой элемент:

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

Выборка всех элементов, которые соответстуют второму селектору и являются дочерними для элементов первого селектора

Например, чтобы получить элемент ссылки в предыдущем примере мы можем использовать селектор $(«#menu > a»)

Выборка элементов с селектором ‘селектор2’, которые располагаются непосредственно за элементами ‘селектор1’. Причем оба элемента должны находиться на одном уровне

Например, у нас есть следующий блок ссылок:

Тогда селектор $(«.closed + .open») выберет те ссылки, которые выделены жирным, так как эти элементы с атрибутом .

Выборка элементов с селектором ‘селектор2’, которые располагаются на одном уровне с элементами с селектором ‘селектор1’.

Например, у нас есть следующий блок ссылок:

Тогда селектор $(«.closed

.open») выберет те ссылки, которые выделены жирным, так как эти элементы с атрибутом .

Селекторы атрибутов

Чтобы сузить поиск кроме базовых и иерархических селекторов, рассмотренных выше, мы можем применять селекторы атрибутов. В данном случае jQuery будет возвращать элементы в зависимости от значений и определения указанных атрибутов.

Выборка всех элементов с атрибутом attr

Например, выражение $(«a[class]») выберет все элементы ссылок, которые имеют атрибут class

Выборка всех элементов, у которых значение атрибута attr равно value

Например, выражение $(«a[ ]») выберет все элементы ссылок, которые имеют атрибут

Выборка всех элементов, у которых значение атрибута attr начинается со строки value

Например, выражение $(«a[ ]») выбрать элементы ссылок, которые имеют атрибут , так как слово ‘redStyle’ начинается на ‘red’.

Выборка всех элементов, у которых значение атрибута attr оканчивается на строку value

Например, выражение $(«a[ ]») выбрать элементы ссылок, которые имеют атрибут , так как слово ‘redStyle’ оканчивается на ‘Style’.

Выборка всех элементов, у которых атрибут attr имеет список значений, разделенных пробелом, и одно из этих значений равно value

Например, выражение $(«a[ ]») выбрать элементы ссылок, которые могут иметь следующее значение атрибута .

Выборка всех элементов, у которых значение атрибута attr имеет имеет подстроку value

Например, выражение $(«a[ ]») выбрать элементы ссылок, которые могут иметь следующее значение атрибута .

Выборка всех элементов, у которых значение атрибута attr представляет либо значение value, либо список значений, разделенных дефисами, и первое значение в этом списке равно value

Например, выражение $(«a[ ]») выбрать элементы ссылок, которые могут иметь следующее значение атрибута .

Контекст селекторов

Выше мы использовали такую запись для выборки элемента: $(селектор). Данное выражение просматривало все дерево DOM на соответствие элемента селектору. Однако мы можем ограничить поиск, применив контекст поиска. Контекст представляет собой селектор, в рамках которого наждо производить выборку элементов. Например, у нас есть такая веб-страница:

На странице у нас три ссылки, у всех у них определен один и тот же класс, но две из них находятся в элементе div и именно их мы хотим получить. Тогда мы используем выражение $(«.open», «div#menu») — здесь второй параметр-селектор будет являться контекстом выборки. А результатом в данном случае будет следующая страница:

Важно не путать это выражение с выборкой по множеству селекторов, например, $(«.open, div#menu «) — это разные выражения, которые будут давать разный результат.

Селекторы. Часть 1.

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

Основная функция селекторов заключается в том, чтобы контролировать дизайн веб страниц, выбирая элемент, или элементы по определенным критериям и стилизуя их с помощью CSS свойств, которые вы указываете в блоке объявлений (описаний).

Селектор типа

В предыдущих примерах, да и в практическом задании предыдущей статьи «Создание первой таблицы стилей» мы с Вами использовали селекторы типа, которые определяют HTML элемент, к которому будет применен стиль. Если вы хорошо знакомы с HTML тегами, то вам будет легко определять в стилях селекторы типа, так как они имеют одноимённые наименования с форматируемыми элементами, например:

    p — сообщает браузеру, что необходимо отформатировать все HTML теги

Давайте рассмотрим пример, в котором с использованием селектора типа мы стилизуем все заголовки второго уровня (

Результат нашего примера:

Рис. 3б Пример использования селектора типа.

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

Селектор класса

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

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

После того как мы создали наш класс в таблице стилей, нам необходимо применить его к интересующему нас элементу, или элементам, которые мы хотим стилизовать. Чтобы указать класс для определенного элемента, необходимо добавить к этому элементу глобальный HTML атрибут class со значением нашего класса, но без точки:

Обратите внимание на следующие правила, которые необходимо соблюдать при работе с селекторами класса:

  • в отличии от селекторов типа все названия селекторов класса должны начинаться с точки (благодаря ей браузеры находят эти селекторы в таблице стилей). Точка требуется только в названии селектора таблицы стилей (в значении глобального HTML атрибута class она не ставится, будьте внимательны из-за этого возникает много ошибок).
  • используйте только буквы алфавита (A-Z, a-z), числа, дефисы, знаки подчеркивания.
  • название после точки всегда должно начинаться с символа (неправильно: .50cent, .-vottakvot).
  • Учитывайте регистр при наименовании стилевых классов, т.к. они к этому чувствительны и очень ранимы (.vottakvot и .VotTakVot разные классы).

Теперь соберем это в одном примере и посмотрим результат:

Результат нашего примера:

Рис. 5 Использование селектора класса.

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

Результат нашего примера:

Рис. 6 Пример выделения одного слова с использованием селектора класса.

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

ID селекторы

Основная задача селектора id заключается в том, чтобы выбрать элемент с определённым идентификатором. Для начала необходимо создать идентификатор, назначив ему имя, которое нам необходимо придумать самостоятельно:

После того как мы создали наш идентификатор в таблице стилей, нам необходимо применить его к интересующему нас элементу, который мы хотим стилизовать. Чтобы указать идентификатор для элемента, необходимо добавить к этому элементу глобальный HTML атрибут id со значением нашего идентификатора, но уже без решетки:

Обратите внимание на следующие правила, которые необходимо соблюдать при работе с id селекторами:

  • значение идентификатора должно быть уникально на странице, размещение нескольких одноименных идентификаторов на странице считается ошибкой (выборка остановится на первом идентифакторе).
  • все названия id селекторов должны начинаться с решётки (благодаря ей браузеры находят эти селекторы в таблице стилей). Решетка требуется только в названии селектора таблицы стилей (в значении глобального HTML атрибута id она не ставится, будьте внимательны из-за этого возникает много ошибок).
  • используйте только буквы алфавита (A-Z, a-z), числа, дефисы, знаки подчеркивания.
  • название после решётки всегда должно начинаться с символа (неправильно: #50cent, #-vottakvot).
  • Учитывайте регистр при наименовании id селекторов, т.к. они к этому чувствительны (#vottakvot и #VotTakVot разные идентификаторы).

Теперь соберем это в одном примере и посмотрим результат:

Результат нашего примера:

Рис. 7а Пример использования id селектора.

В настоящее время id селекторы в основном применяются на веб страницах с целью динамического управления элементами с использованием языка программирования JavaScript.

Групповые селекторы

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

Первым групповым селектором мы указываем, что заголовки

Вторым групповым селектором мы указываем, что кроме заднего фона элементы с классами test и элемент с идентификатором test получат синий цвет текста.

Рассмотрим следующий пример:

В этом примере мы использовали три групповых селектора:

    Первым групповым селектором мы указываем, что заголовки

Результат нашего примера:

Рис. 7б Пример использования групповых селекторов.

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

Селектор * позволяет выбрать все элементы внутри документа (универсальный селектор).


Давайте рассмотрим пример использования:

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

Результат нашего примера:

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

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

Селекторы потомков будут подробно рассмотрены в следующей статье «Селекторы. Часть 2.».

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:
  • Составьте следующую HTML страницу, в которой заголовки имеют шрифт Arial, а абзацы, которые относятся к статье Verdana:

Практическое задание № 2.

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

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

Синтаксис CSS — правила, селекторы, свойства, их значения (параметры) и комментарии в языке каскадных таблиц стилей

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

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

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

Синтаксис и варианты записи правил CSS

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

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

  • значения (или параметры), которые выражается в числах, коде цвета, названии шрифта и т.п., в соответствии с нашей аналогий можно считать буквами;
  • структурной единицей CSS является свойство, определяющее свою часть внешнего вида элемента на странице (его цвет, шрифт текста, размеры, отступы, позицию и т.д.), которому соответствуют конкретные значения (одно или несколько). Здесь совокупность названия свойства и его параметра можно сравнить со словом (которое также может состоять из одной или более букв) в стандартном текстовом фрагменте;
  • правило CSS —селектор (наименование стиля) вместе с набором свойств CSS для каждого элемента полностью определяет его оформление и местоположения на странице. Структурно ассоциируется с предложением (совокупностью отдельно взятых слов в обычном тексте);
  • полное собрание всех правил CSS для конкретного документа (веб-страницы) обеспечивает его корректное отображение в браузере. Сравним это с завершенным отрывком текста.

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

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

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

Обратите внимание на то, что свойство background имеет сразу несколько значений: цвет фона (#00ff00), путь до фонового изображения («west.png») и разрешение на его повторение по горизонтали (repeat-x). Наверное, вы заметили, что подобный вариант записи несколько отличается от схемы, представленной чуть выше.

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

Скажем, расширенная запись правила, образец которой только что был представлен, наиболее удобна для восприятия, а потому применяется обычно для изучения стилей, ну или в «сыром» файле style.css, который создан для нового сайта, а потому еще не доведен до ума. Есть и другая разновидность этого же самого варианта записи CSS правила:

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

Расширенный вариант записи можно представить и без переносов:

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

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

Селекторы, свойства и применение стилей

Я уже отмечал, что с течением времени происходит все более тесное сближение HTML и CSS. Если на заре зарождения интернета в его сегодняшнем виде внешний вид элементов на веб-странице описывался с помощью атрибутов тегов гипертекстовой разметки, то в наши дни слишком частое использование такого метода считается моветоном, поскольку перегруженный ХТМЛ-код часто не способствует должной оптимизации страниц сайта, что в том числе вредит его SEO продвижению.

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

Кстати, в том числе и по этой причине из всех способов привязки стилей к HTML коду документа наиболее востребованным является вынесение всех стилевых свойств в отдельный файл style.css.

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

1. Базовые (селекторы тегов) — самый простой для понимания, название которого совпадает с именем соответствующего тега в ХТМЛ коде документа.

Возьмем в качестве примера горизонтальную линию как элемент дизайна страницы сайта. Мы уже знаем, что эта линия создается с помощью тега hr, который прописывается в HTML-коде. Если вы перейдете по только что данной ссылке, то сможете отследить, как меняется внешний вид этого элемента при применении атрибутов тега hr, которые задаются в ХТМЛ-документе вместе с ним.

Однако, как я уже говорил, современные тенденции направлены на разгрузку HTML кода за счет использования оформления с помощью стилей CSS, представленных в отдельном файле. Поэтому приведенные в той статье атрибуты тега hr (width, size, color, noshade) заменяем на свойства стилей, прописанные в style.css:

Которые позволяют получить точно такой же результат:

2. Классы (class) и идентификаторы (id) — имеют некоторую общность, поскольку являются атрибутами тегов, к которым они добавляются в HTML-коде, и одновременно селекторами, кои и указываются в файле CSS, каждый со своим набором свойств.

Cвязь элементов, описываемых тегами с классами и идентификаторами, осуществляется тем, что параметрами id и class являются названия селекторов. Примеры ниже.

Тег с классом «text-x» в HTML-коде:

Стили для этого класса в CSS (впереди обязательно нужно поставить точку):

То же самое для идентификаторов (пример с контейнером див). HTML:

CSS (перед идентификатором ставится значок решетки):

Последующие ниже варианты могут содержать как селекторы тегов, так и классы с идентификаторами.

3. Дочерние селекторы — как известно, в HTML различают родительские элементы (теги) и дочерние (их потомки), которые в них вложены. Весьма логично, что в CSS точно такое же разделение существует между соответствующими этим элементам селекторами.

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

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

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

6. Универсальный селектор — применяется в тех случаях, когда нужно задать единый стиль оформления для тех или иных элементов на веб-странице, расположенных в различных ее областях. Например, определить вид и размер шрифта. Этот селектор обозначается звездочкой:

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

Либо определенным элементам:

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

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

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

Виды значений (параметров) свойств

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

Числа

Роль значения того или иного свойства может играть целое число, в котором содержаться цифры от 0 до 9, либо десятичная дробь, где целая и дробная часть разделяются точкой:

Здесь для абзаца, определяемого тегом p, заданы свойства со значениями, которые задают жирный шрифт и интервал между строками. Если целая часть десятичной дроби равно 0, то ее можно не писать, а просто впереди ставить точку. То есть записи: 0.6 и .6 абсолютно идентичны.

Размеры в абсолютных и относительных единицах

Для указания размера того или иного элемента в CSS применяются абсолютные и относительные единицы измерения. Абсолютные отображают размер вне зависимости от устройства, в котором просматривается документ (скажем, монитор компьютера), а относительные единицы определяют размер элемента относительно какого-то иного размера.

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

1. Абсолютные единицы измерения
Единица Краткое описание
px Пиксель
in Дюйм (1 in = 2,54 cm)
cm Сантиметр
mm Миллиметр
pt Пункт (1 pt = 1/72 дюйма)
pc Пика (1 pc = 12 pt)

К слову, cm, mm, pt, pc практически не используются в практической деятельности вебмастеров и разработчиков, а потому нет смысла их подробно разбирать. А вот на остальные мы обратим внимание в той или иной степени.

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

Важно отметить, что реальные единицы часто сопоставляются с теми же пикселями при указании разрешения, которое измеряется в dpi (dots per inch), являющемся специальным показателем, который отражает количество пикселей на дюйм.

Можно сказать, что чем выше этот показатель, тем более качественное и детальное изображение мы получим. Кроме этого, дисплей любого современного электронного устройства имеет подобную характеристику (пример: монитор компьютера с разрешением 1280 × 1024 px).

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

2. Основные относительные единицы

Единица Краткое описание
em Размер шрифта текущего элемента (изначально получен из ширины заглавной литеры «M» определенного шрифта)
ex Размер, основанный на высоте буквы «x» в нижнем регистре
ch Для текущего элемента (основан на ширине символа «0»)
rem Размер шрифта для корневого элемента

Сначала подробнее остановимся на основных относительных параметрах. Единица em позволяет задать, например, величину шрифта (когда она явно не установлена) по отношению к размеру, указанному в браузере по умолчанию, или относительно размера родительского элемента.

Размер шрифта в em, который может быть задан изначально при верстке сайта, устанавливается через свойство стилей font-size. То есть, 1 em равен дефолтному размеру шрифта либо размеру шрифта родителя. Запись в процентах тождественна em в том плане, что 1 em = 100%.

Для ex действуют точно такие же правила, что и в отношении em. Иными словами, существует привязка ex к размеру, установленному в веб-браузере по умолчанию, либо к величине размера шрифта родителя. Аналогично работает и «ch».

Стоит сделать акцент на различии между em и rem. Оно заключается в том, что em находится в полной зависимости от размера шрифта родителя и изменяется одновременно с ним, а вот rem строго привязан к корневому элементу, определяемому тегом html.

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

3. Относительные единицы, привязанные к области просмотра браузера

Единица Краткое описание
vw 1% от ширины области просмотра
vh 1% от высоты области просмотра
vmin 1% от меньшего значения области просмотра по ширине и высоте
vmax 1% от большего значения области просмотра по ширине и высоте

Для чего нужны такие варианты задания размеров? Дело в том, что далеко не всегда наилучшим решением является использование стандартных относительных величин, включая проценты. Порой выгоднее связать величину шрифта с высотой и шириной окна браузера. Скажем, ежели область просмотра по высоте равна 800px, то 1vh = 8px, а при ширине 1500px — 1vw = 15px.


Единицы vmin и vmax определяются соответственно минимальными и максимальными размерами области по высоте и ширине. Образец: высота окна браузера 700px, а ширина — 1300px. В этом случае vmin = 7px, а vmax = 13px.

При установке размеров нужно обязательно указывать единицы (например, height: 55px), иначе браузер некорректно будет отображать соответствующие элементы. Значения, равные нулю, к данному правилу не относятся, их можно обозначать двумя способами (padding: 0 или padding: 0px), по понятным причинам с подавляющим преимуществом лидирует первый вариант.

Проценты

Этот вид единиц я решил упомянуть отдельно. Выше я уже сказал о преимуществе использования относительных значений при задании свойств. Это в полной мере относится и к процентам.

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

Ключевые слова

Разберем некоторые слова, которые играют роль параметров свойств и определяют то или иное положение либо внешний вид элемента. Вот несколько наглядных примеров.

1. Значения свойства text-align, которые способствуют выравниванию текста по горизонтали: center | justify | left | right | start | end. Вот пример c параметром justify:

И для обоих прописаны стили:

Если в отношении элемента не указан цвет текста (свойство «color»), то по умолчанию текстовый фрагмент будет окрашен в черный (в большинстве популярных браузеров). В нашем примере для внешнего контейнера («bl-1») color как раз отсутствует. Вследствие этого при указании значения «currentColor» фон этого контейнера примет черный окрас:

3. Inherit — это ключевое слово в роли параметра устанавливает наследование соответствующих значений родительских элементов. Образец:

И CSS правила для него:

4. Initial — применяется в тех случаях, когда требуется установить исходные параметры свойств. Скажем, помогает восстановить значения, установленные браузером по умолчанию, либо определить начальные параметры, которые были изменены в результате наследования. Пример:

И стили для него:

С помощью класса «init» внешний вид фрагмента абзаца p, заключенного в тег span, и нижнего заголовка H2, изменен в соответствии с настройками их стилей по умолчанию.

5. Unset — это параметр, являющийся по сути «гибридом» inherit и initial. Определяет параметр свойства как inherit, ежели свойство наследуется от родителя, в противном случае — как initial.

Пример 1 (действует как inherit):

В соответствии с правилами CSS свойство color наследуется, поэтому «unset» в нашем примере возвращает зеленый цвет текста для контейнера «xxx», который является потомком «zzz»:

Пример 2 (работает как initial):

Так как по правилам таблиц стилей свойство border не наследуется, то «border-color: unset» возвращает цвет рамки к значению по умолчанию, то есть она приобретает черный оттенок.

URL, или адрес

Этот параметр содержит в себе унифицированный указатель ресурса и применяется, когда нужно, например, указать относительный или абсолютный путь к файлу с изображением (читайте вот эту статью о вставке картинок на страницу с помощью HTML тега img). При этом используется ключевое слово url (), где между скобками и указывается путь до графического файла:

Время

Используется, например, при реализации анимационных эффектов (да-да, на чистом CSS можно создавать теперь и такие вещи), где параметры указываются в секундах (s) или миллисекундах (ms). Значения могут быть как в виде целых, так и дробных чисел. При этом надо помнить, что нельзя допускать пробела между числом и единицей измерения (2s, 50ms)./p>

И, соответственно, стили для него:

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

Строки

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

Скажем, ежели всю строку вы берете в одинарные кавычки, то внутренний текстовый фрагмент — в двойные, и наоборот. Разрешается также применять один и тот же вид, только в этом случае необходимо экранировать внутренние кавычки, добавляя перед ними обратный слеш «\»:

  • свойство: «строка ‘контента'»
  • свойство: ‘строка «контента»‘
  • свойство: «строка \»контента\»»
  • свойство: ‘строка \’контента\»

Далее рассмотрим конкретный пример, чтобы было понятнее.

Для начала ХТМЛ-код:

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

1. Название. Правда, задавать таким способом можно не все, а только часть оттенков («red» — красный, «green» — зеленый, «black» — черный, «orange» — оранжевый, «yellow» — желтый, «olive» — оливковый и некоторые другие). Их также можно отнести к ключевым словам.

2. Hex (шестнадцатеричный код). Основой шестнадцатеричной системы, в отличии от известной всем десятеричной, являются 16 символов: 10 цифр (от 0 до 9) и 6 первых букв латинского алфавита (A, B, C, D, E, F). Буквы от A до F соответствуют числам от 10 до 15.

3.1. RGB — можно задавать значение цвета, исходя из десятеричной системы. Название данного метода является аббревиатурой трех основных задействованных в ней цветов: Red (красный), Green (зеленый), Blue (синий). Оттенки каждого из них находятся в диапазоне от 0 до 255. Для применения этой системы необходимо впереди прописать rgb, а в скобках указать каждый из компонентов цвета: rgb (240, 0, 180). Также не возбраняется использовать проценты:

3.2. RGBA — расширенный вариант предыдущего метода RGB, содержащий альфа-канал, который устанавливает прозрачность элемента в диапазоне от 0 до 1. Параметр «0» соответствует полной прозрачности, а «1» — совершенной непрозрачности.

4.1. HSL — наименование этого метода также представляет из себя не что иное как аббревиатуру, которая включает первые буквы трех слов: Hue (оттенок), Saturate (насыщенность) и Lightness (светлота). Именно эти характеристики в совокупности определяют конечный цвет. При этом оттенок расположен на конкретном месте цветового круга:

Поскольку весь круг составляет 360°, то каждому оттенку (hue) соответствует вполне конкретное значение в градусах в диапазоне от 0° до 359°. При этом параметры основных оттенков таковы: 0° — красный, 120° — зеленый, 240° — синий.

Насыщенность и светлота измеряются в процентах (от 0 ло 100%). Для saturate параметр 0 значит отсутствие цветовой гаммы, а 100% — максимально насыщенный цвет. Чем больше значение lightness, тем светлее тон, 0 соответствует черному, а 100% — белому.

4.2. HSLA — по аналогии с RGBA является расширенным вариантом HSL, к которому добавлен показатель прозрачности.

Угол поворота или наклона

В CSS в качестве параметров тех или иных свойств может применяться угловые характеристики (основа — круг). Вот какие единицы при этом используются:

  • градусы — deg (1 полный круг составляет 360deg);
  • грады — grad (полный круг 400grad);
  • радианы — rad. Целый круг равен 2&#960 (приблизительно 6.2832rad);
  • повороты — turn (1 turn приравнивается к полному повороту).

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

Для наглядности применим характеристики поворота для реализации градиентной заливки фона и в качестве одной из составляющих нашего образца поместим на страницу определенный текст:

А теперь составим и правило CSS для такого фона:

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

Комментарии в CSS

Ну и, наконец, комментарии в правилах со свойствами CSS. На этой странице я уже неоднократно пользовался ими, разъясняя действие того или иного свойства. Комментарии вставляются прямо в коде стилей, напротив соответствующего свойства. Их текст располагается между символами «*», которые в свою очередь находятся между двумя знаками слэша «/».

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

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

По этой причине при оптимизации файлов CSS действующего веб-ресурса комментарии обычно удаляются, в том числе c помощью дополнения Google Page Speed, служащего неплохим инструментом для увеличения скорости сайта.

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

Селекторы

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

Селектор по тэгу

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

или для всех тэгов

. Для создания этого селектора указывается имя тэга без скобок. Для примера создадим на странице тэг

и зададим всем тэгам

определённый стиль. Для этого внутри тэга создадим тэг

5 Селекторы

5.1 Сопоставление шаблонов

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

Чувствительность имен элементов языка документа к регистру определяется языком документа. Например, в HTML-документах имена элементов не зависят от регистра, а в XML-документах — зависят.

В следующей таблице приводятся краткие сведения о синтаксисе селекторов в CSS2:

Шаблон Значение Описано в разделе
* Сопоставляется любому элементу. Универсальный селектор
E Сопоставляется любому элементу E (т.е. элементу типа E. Селекторы типа
E F Сопоставляется любому элементу F, который является потомком элемента E. Селекторы потомков
E > F Сопоставляется любому элементу F, который является дочерним элементом элемента E. Селекторы дочерних элементов
E:first-child Сопоставляется элементу E, если он является первым дочерним элементом своего родительского элемента. Псевдокласс :first-child
E:link
E:visited
Сопоставляется элементу E, если он является привязкой гиперссылки, направляющей к документу, которой еще не был просмотрен (:link) или уже был просмотрен (:visited). Псевдоклассы ссылок
E:active
E:hover
E:focus
Сопоставляется элементу E во время определенных действий пользователя. Динамические псевдоклассы
E:lang(c) Сопоставляется элементу E, если он присутствует в разговорном языке (язык документа указывает, каким образом определяется разговорный язык). Псевдокласс :lang
E + F Сопоставляется любому элементу F, которому непосредственно предшествует элемент E. Селекторы сестринских элементов
E[foo] Сопоставляется любому элементу E с набором атрибутов «foo» (независимо от значения). Селекторы атрибутов
E[foo=»warning»] Сопоставляется любому элементу E, у которого значение атрибута «foo» в точности равно «warning». Селекторы атрибутов
E[foo

=»warning»]

Сопоставляется любому элементу E, у которого значением атрибута «foo» является список значений, разделенных пробелами, и одно из этих значений в точности равно «warning». Селекторы атрибутов
E[lang|=»en»] Сопоставляется любому элементу E, атрибут «lang» которого имеет список значений, разделенных знаками дефиса, начинающийся (слева) со значения «en». Селекторы атрибутов
DIV.warning Только в HTML. Значение аналогично значению DIV[ ]. Селекторы классов
E#myid Сопоставляется любому элементу E, атрибут ID которого равен «myid». ID-селекторы

5.2 Синтаксис селекторов

— это либо селектор типа, либо универсальный селектор, непосредственно за которым в произвольном порядке может следовать несколько селекторов атрибутов, ID-селекторов или псевдоклассов. Простой селектор сопоставим, если сопоставимы все его компоненты.

представляет собой последовательность из одного или нескольких простых селекторов, между которыми расположены комбинаторы. могут служить пробелы, символы «>» и «+». Между комбинатором и простыми селекторами может находиться произвольное количество пробелов.

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

К последнему в последовательности простому селектору может быть добавлен один псевдоэлемент. В этом случае информация о стиле будет применяться только к части каждой области применения.

5.2.1 Группировка

Если в нескольких селекторах используются одни и те же объявления, их можно сгруппировать в список, разделив запятыми.

В данном примере собраны три правила с одинаковыми объявлениями. Таким образом, запись


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

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

Универсальный селектор , при написании обозначаемый символом «*», сопоставляется имени элемента любого типа. Он сопоставляется любому одиночному элементу в дереве документа.

Если универсальный селектор является не единственным компонентом простого селектора, то символ «*» может быть опущен. Например, записи:

  • *[LANG=fr] и [LANG=fr] эквивалентны.
  • *.warning и .warning эквивалентны.
  • *#myid и #myid эквивалентны.

5.4 Селекторы типов

Селектор типа сопоставляется названию типа элемента языка документа. Селектор типа сопоставляется каждому экземпляру данного типа в дереве документа.

Следующее правило сопоставляется всем элементам H1 в дереве документа:

5.5 Селекторы потомков

Иногда бывает необходимо, чтобы селекторы сопоставлялись элементу, который является потомком некоторого другого элемента в дереве документа (например, элементам EM, содержащимся в элементе H1). Селекторы потомков позволяют устанавливать такие ассоциации в шаблоне. Селектор потомков состоит из двух и более селекторов, разделенных пробелом. Селектор потомков вида » A B » сопоставим, если элемент B является произвольным потомком некоторого своего предка A .

Например, рассмотрим следующие правила:

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

Приведем тот же пример, дополнив предыдущие правила еще одним, устанавливающим синий цвет текста всякий раз, когда элемент EM находится внутри элемента H1:

Третье правило в следующем фрагменте будет сопоставляться элементу EM:

сопоставляется элементу P, который является потомком второго и более старшего поколения элемента DIV. Обратите внимание на пробелы с обеих сторон звездочки «*».

Селектор, который фигурирует в следующем правиле, объединяющем селекторы потомков и селекторы атрибутов, сопоставляется любому элементу, который, во-первых, имеет заданный атрибут «href» и, во-вторых, находится внутри элемента P, который, в свою очередь, находится внутри элемента DIV:

5.6 Селекторы дочерних элементов

Селектор дочерних элементов сопоставим, если элемент является дочерним по отношению к некоторому другому элементу. Данный тип селекторов состоит из двух и более селекторов, разделенных символом «>».

Следующее правило задает стиль всех элементов P, являющихся дочерними элементами элемента BODY:

В приведенном ниже примере осуществляется объединяются селекторы потомков и селекторы дочерних элементов:

Селектор, построенный в этом примере, сопоставляется элементу P, являющемуся потомком элемента LI, который должен быть дочерним элементом элемента OL. Последний, в свою очередь, должен быть потомком элемента DIV. Обратите внимание, что необязательные пробелы вокруг комбинатора «>» опущены.

Информацию о выборе первого дочернего элемента см. ниже в раздел о псевдоклассах first-child.

5.7 Селекторы сестринских элементов

Селекторы сестринских элементов имеют следующий синтаксис: E1 + E2, где E2 — область применения данного селектора. Он сопоставим, если E1 и E2 являются дочерними элементами одного и того же родительского элемента в дереве документа, и E1 непосредственно предшествует E2.

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

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

В приведенном ниже примере уменьшается размер вертикального пространства между элементом H1 и непосредственно следующим за ним элементом H2:

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

5.8 Селекторы атрибутов

CSS2 позволяет разработчикам создавать правила, сопоставляемые атрибутам, определенным в исходном документе.

5.8.1 Сопоставление атрибутам и значениям атрибутов

Селекторы атрибутов могут сопоставляться в следующих четырех случаях:

[att] Если для элемента установлен атрибут «att», независимо от значения этого атрибута. [att=val] Если значение атрибута «att» данного элемента в точности равно «val». [att

=val] Если значением атрибута «att» данного элемента является список «слов», разделенных пробелами, одно из которых в точности равно «val». Если используется данный селектор, то слова, указанные в значении, не должны содержать пробелов (так как они уже используются для разделения слов). [att|=val] Если значением атрибута «att» элемента является список разделенных дефисом «слов», начинающийся со слова «val». Сопоставление всегда начинается с начала значения атрибута. В первую очередь это необходимо для сопоставления отдельным участкам кода языка (например, атрибут «lang» в HTML), как описано в стандарте RFC 1766 ( [RFC1766] ).

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

Например, следующий селектор атрибута сопоставляется всем элементам H1, которые описывают атрибут «title», независимо от его значения:

В следующем примере селектор сопоставляется всем элементам SPAN, у которых значение атрибута «class» в точности равно «example»:

Для обращения к нескольким атрибутам элемента или многократного обращения к одному и тому же атрибуту можно использовать несколько селекторов атрибутов.

В этом примере селектор сопоставляется всем элементам SPAN, у которых значение атрибута «hello» в точности равно «Cleveland», а значение атрибута «goodbye» в точности равно «Columbus»:

Следующие селекторы иллюстрируют различия между «=» и «

=». Первый селектор будет сопоставляться, например, значению «copyright copyleft copyeditor» атрибута «rel». Второй селектор будет сопоставляться только в том случае, если значение атрибута «href» равно «http://www.w3.org/».

Следующее правило скрывает все элементы, атрибут «lang» которых имеет значение «fr» (т.е. документ на французском языке).

Следующее правило будет сопоставляться тем значениям атрибута «lang», которые начинается с «en», включая «en», «en-US» и «en-cockney»:

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

Сопоставление осуществляется со значениями атрибутов в дереве документа. Если язык документа отличен от HTML, значения, принимаемые атрибутами по умолчанию, можно установить различными способами, в частности, с помощью DTD . Таблицы стилей должны разрабатываться таким образом, чтобы они работали даже в том случае, если информация о значениях, принимаемых по умолчанию, не включена в дерево документа.

Например, рассмотрим элемент EXAMPLE с атрибутом «notation», который по умолчанию принимает значение «decimal». Фрагмент DTD может выглядеть следующим образом:

Если таблица стилей содержит правила

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

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

5.8.3 Селекторы классов

В таблицах стилей, используемых с HTML-документами, при сопоставлении атрибуту » >

Например, для всех элементов с информацию о стиле можно определить следующим образом:

Следующее правило назначает стиль только элементу H1 с :

Благодаря этим правилам в следующем примере при первом появлении элементы H1 не будут отображаться зеленым цветом, а при втором появлении будут:

Для сопоставления подмножеству значений атрибута «class» перед каждым из них, записанных в произвольном порядке, должна следует поставить точку («.»).

Например, следующее правило сопоставляется любому элементу P, атрибуту «class» которого в качестве значения назначен список разделенных пробелами значений, включающий слова «pastoral» и «marine»:

Это правило сопоставляется, если, например, и не сопоставляется, если .

Примечание. В языке CSS атрибут «class» наделен большими описательными возможностями, позволяющими разработчикам создавать свои собственные «языки написания документов» с использованием элементов, с которыми не связана никакая информация о представлении (например, элементы DIV и SPAN в HTML) и назначать информацию о стиле посредством атрибута «class». Разработчикам следует избегать использования таких возможностей на практике, т.к. структурные элементы языка документа в основном имеют общепринятые значения, а определяемые разработчиком классы чаще всего их не имеют.

5.9 ID-селекторы

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

Атрибут ID языка документа позволяет разработчикам назначать идентификатор одному экземпляру элемента в дереве документа. В CSS ID-селекторы сопоставляются экземпляру элемента в зависимости от его идентификатора. В CSS ID-селектор содержит символ «#», непосредственно за которым следует значение атрибута ID.

Следующий ID-селектор сопоставляется элементу H1, значение атрибута ID которого равно «chapter1»:

В следующем примере правило стиля сопоставляется элементу, у которого значение атрибута ID равно «z98y». Т.е. это правило будет сопоставляться элементу P:

Однако в следующем примере это правило стиля будет сопоставляться только элементу H1, значение атрибута ID которого равно «z98y». В этом примере данное правило не сопоставляется элементу P:

ID-селекторы имеют более высокий приоритет, чем селекторы атрибутов. Например, в HTML-документе, в терминах каскада селектор #p123 более специфичен, чем [ >.

Примечание. В XML 1.0 [XML10] информация о том, в каком атрибуте содержатся ID элементов, располагается в DTD. Во время синтаксического анализа XML-документа агенты пользователей не всегда просматривают DTD и поэтому не всегда могут иметь информацию об идентификаторе элемента. Если разработчик таблицы стилей знает или предполагает, что подобное может случиться, то он должен использовать обычные селекторы атрибутов вместо ID-селекторов: [name=p371] вместо #p371 . Порядок каскадирования обычных селекторов атрибутов отличается от порядка каскадирования ID-селекторов. Возможно, при этом понадобится добавить в объявления приоритет «!important»: [name=p371] . Естественно, что элементы в документах XML 1.0, не использующих DTD, вообще не имеют атрибута ID.

5.10 Псевдоэлементы и псевдоклассы

В языке CSS2 стиль обычно прикрепляется к элементу в зависимости от его местонахождения в дереве документа. В большинстве случаев эта простая модель оказывается приемлемой, но все же иногда из-за структуры дерева документа она не позволяет реализовать некоторые устоявшиеся сценарии построения публикации. Например, в HTML 4.0 (см. [HTML40] ) нет элемента, который бы указывал на первую строку абзаца, и поэтому нет простого селектора CSS, который бы мог указывать на нее.

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

  • Псевдоэлементы формируют абстрактные представления о дереве документа в дополнение к тем, которые определяются языком документа. Например, в языках, используемых для создания документов, не предусмотрены алгоритмы доступа к первой букве или первой строке содержимого элемента. Псевдоэлементы CSS позволяют разработчикам таблиц стилей обращаться к этим объектам, доступ к которым нельзя получить другим способом. Псевдоэлементы предоставляют разработчикам таблиц стилей различные способы назначения стиля содержимому, не существующему в исходном документе (например, псевдоэлементы :before и :after предоставляют доступ к генерируемому содержимому).
  • Псевдоклассы позволяют осуществлять классификацию элементов по их характеристикам, которые не являются именем, атрибутом или содержимым и не могут быть получены из дерева документа. Псевдоклассы могут быть динамическими в том смысле, что элемент может приобрести псевдокласс или лишиться его во время работы пользователя с этим документом. Исключение составляет псевдокласс ‘:first-child’, который может быть выведен из дерева документа.

Ни псевдоэлементы, ни псевдоклассы не отображаются в исходном документе или дереве документа.

Псевдоклассы могут располагаться в любом месте селекторов, а псевдоэлементы могут находиться только после области применения некоторого селектора.

Имена псевдокласов и псевдоэлементов учитывают регистр.

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

Конформные агенты пользователей HTML могут либо игнорировать все правила, которые определяют селекторы, содержащие :first-line или :first-letter, либо поддержать только некоторую часть свойств, обусловленных использованием псевдоэлементов.

5.11 Псевдоклассы

5.11.1 Псевдокласс :first-child


Псевдокласс :first-child сопоставляется элементу, который является первым дочерним элементом некоторого другого элемента.

В следующем примере селектор сопоставляется каждому элементу P, который является первым дочерним элементом элемента DIV. Это правило запрещает отступ для первого абзаца элемента DIV:

Данный селектор сопоставляется элементу P внутри DIV в следующем фрагменте: но не сопоставляется второму элементу P в следующем фрагменте:

В следующем примере устанавливается вес шрифта ‘bold’ для каждого элемента EM, являющегося одним из потомков первого дочернего элемента P:

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

является первым дочерним элементом элемента P.

Следующие два селектора эквивалентны:

Обычно агенты пользователей по-разному отображают просмотренные и непросмотренные ссылки. В CSS предусмотрены псевдоклассы ‘:link’ и ‘:visited’ для различения этих типов ссылок:

  • Псевдокласс :link применяется, если ссылка не была просмотрена.
  • Псевдокласс :visited применяется, если ссылка была просмотрена пользователем.

Примечание. По истечении определенного времени агенты пользователей могут вернуть просмотренную ссылку в состояние ‘:link’ (непросмотренная).

Эти два состояния являются взаимоисключающими.

Язык документа определяет элементы, служащие точками привязки гиперссылки. Например, в HTML 4.0 псевдоклассы ссылок применяются к элементам A с атрибутом «href». Таким образом, следующие два объявления CSS2 эквивалентны:

Если следующая ссылка:

была просмотрена, то, согласно правилу: она будет представляться синим цветом.

5.11.3 Динамические псевдоклассы :hover , :active и :focus

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

  • Псевдокласс :hover применяется, когда пользователь (с помощью некоторого указывающего устройства) выделяет элемент, но не активизирует его. Например, визуальный агент пользователя может применять этот псевдокласс, когда курсор (указатель мыши) находится поверх поля, генерируемого данным элементом. Агенты пользователей, не поддерживающие интерактивные устройства, не используют этот псевдокласс. Некоторые конформные пользовательские агенты, поддерживающие интерактивные устройства, не имеют возможности использовать этот псевдокласс (например, устройство типа ручки).
  • Псевдокласс :active применяется, когда элемент активизируется пользователем. Например, между моментами, когда пользователь нажимает кнопку мыши и отпускает ее.
  • Псевдокласс :focus применяется, когда элемент находится в центре некоторых событий (обрабатывает события клавиатуры или другие типы ввода текста).

Эти псевдоклассы не являются взаимоисключающими. Элемент может сопоставляться одновременно нескольким псевдоклассам.

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

Пользовательские агенты не обязаны осуществлять повторное форматирование отображаемого документа из-за переходов, индуцируемых псевдоклассами. Например, в таблице стилей может быть указано, что ‘font-size’ у активной ссылки больше, чем у неактивной. Поскольку это может привести к изменению положения букв во время выбора пользователем данной ссылки, то агент пользователя может проигнорировать соответствующее правило стиля.

Обратите внимание, что правило A:hover должно располагаться после правил A:link и A:visited, так как в противном случае правила каскадирования скроют свойство ‘color’ правила A:hover. Аналогичным образом, благодаря тому, что A:active находится после A:hover, активная ссылка отображается белым цветом, когда пользователь устанавливает указатель поверх элемента А и одновременно активизирует его.

Пример сочетания динамических псевдоклассов:

Последний селектор сопоставляется элементам A, которые находятся в псевдоклассах :focus и :hover.

Информацию об отображении области активизации (фокуса) можно найти в разделе о динамических областях активизации.

Примечание. В CSS1 псевдокласс ‘:active’ и группа псевдоклассов ‘:link’ и ‘:visited’ были взаимоисключающим. Теперь это не так. Элемент может одновременно принадлежать псевдоклссам ‘:visited’ и ‘:active’ (или ‘:link’ и ‘:active’), а применяемые правила будут определяться принципами нормального каскадирования.

5.11.4 Псевдокласс :lang

Если в языке документа предусмотрен способ определения разговорного языка элемента, то в CSS можно создавать селекторы, сопоставляемые элементу, использующему данный разговорный язык. Например, в HTML [HTML40] язык определяется сочетанием атрибута «lang», элемента META и, возможно, информацией из протокола (такой как заголовки HTTP). С другой стороны, в XML-приложениях используется атрибут XML:LANG и, возможно, существуют другие методы, позволяющие в языке документа определять разговорный язык.

Псевдокласс ‘:lang(C)’ сопоставляется элементу, использующему язык C. Здесь C — код языка в соответствии с определением HTML 4.0 [HTML40] и RFC 1766 [RFC1766] . Он сопоставляется аналогично оператору ‘|=’.

Следующие правила расставляют кавычки в документе HTML, написанном либо на французском, либо на немецком языке:

Вторая пара правил фактически задает свойство ‘quotes’ для элементов Q в соответствии с языком их родительских элементов. Это сделано, потому что выбор кавычек обычно зависит от языка элементов вокруг кавычек, а не от самих кавычек, как это имеет место во фрагменте французского текста “à l’improviste&#8221, расположенного в английском тексте и использующего английские кавычки.

5.12 Псевдоэлементы

5.12.1 Псевдоэлемент :first-line

Псевдоэлемент :first-line используется для применения специальных стилей к первой форматируемой строке абзаца. Например:

Представленное выше правило означает «сделать буквы первой строки каждого абзаца заглавными». Однако селектор «P:first-line» не соответствует ни одному реальному элементу HTML. Он сопоставляется псевдоэлементу, который конформные агенты пользователей будут помещать в начало каждого абзаца.

Обратите внимание, что длина первой строки зависит от множества факторов, таких как ширина страницы, размер шрифта и др. Поэтому типичный абзац HTML-документа, такой как

претерпит следующую реорганизацию строк: и будет «переписан» агентами пользователей так, чтобы включить последовательность функциональных тегов для :first-line. Эта фиктивная последовательность помогает показать, как наследуются свойства.

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

и пользовательский агент сможет сгенерировать соответствующие начальные и конечные теги для SPAN во время вставки последовательности функциональных тэгов для :first-line.

Псевдоэлемент :first-line может прикрепляться только к элементам уровня блока.

Псевдоэлемент :first-line подобен строковому элементу только с некоторыми ограничениями. К псевдоэлементу :first-line применяются следующие свойства: свойства шрифтов, цветов, фона, ‘word-spacing’, ‘letter-spacing’, ‘text-decoration’, ‘vertical-align’, ‘text-transform’, ‘line-height’, ‘text-shadow’ и ‘clear’.

5.12.2 Псевдоэлемент :first-letter

Псевдоэлемент :first-letter может использоваться для создания таких простых типографических эффектов, как заглавные буквы и буквицы. Тип начальной буквы аналогичен строковому элементу, если его свойству ‘float’ присвоено значение ‘none’, в противном случае он аналогичен перемещаемому объекту.

В следующем примере высота буквицы устанавливается равной высоте двух строк:

Данный пример может быть отформатирован следующим образом:

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

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

Перед первой буквой должны быть включены имеющиеся знаки пунктуации (т.е. символы, определенные в классах пунктуации «open» (Ps), «close» (Pe) и «other» (Po) Unicode [UNICODE] ), как это сделано в следующем примере:

Псевдоэлемент :first-letter сопоставляется только некоторым частям элементов уровня блока.

В некоторых языках могут существовать специальные правила обращения с определенными комбинациями букв. Например, в голландском языке, если сочетание букв «ij» находится в начале слова, то они обе должны находиться в псевдоэлементе :first-letter.

В следующем примере показано, как могут повлиять друг на друга налагающиеся псевдоэлементы. Первая буква каждого элемента P выделяется зеленым цветом, а размер шрифта установлен в ’24pt’. Остальные буквы первой форматируемой строки будут представлены синим цветом, а все оставшиеся буквы абзаца — красным.

Допустим, что разрыв строки произойдет до того, как слово «закончится», тогда последовательность функциональных тегов для данного фрагмента может быть следующей:

Обратите внимание, что элемент :first-letter находится внутри элемента :first-line. Свойства, установленные для элемента :first-line, наследуются элементом :first-letter, но могут быть переназначены, если в элементе :first-letter этому же свойству присваивается значение.

5.12.3 Псевдоэлементы :before и :after

Псевдоэлементы ‘:before’ и ‘:after’ можно использовать для вставки генерируемого содержимого до или после содержимого элемента. Подробнее о них рассказывается в разделе о генерируемом тексте.

Когда псевдоэлементы :first-letter и :first-line сочетаются с псевдоэлементами :before и :after, они применяются к первой букве или строке элемента, включая вставляемый текст.

Буква «S» слова «Special!» будет представлена золотистым цветом.

Базовые

Следующие селекторы основаны на стандарте CSS 1, как указано в W3C. Для получения информации об этой спецификации, посетите https://www.w3.org/Style/CSS/#specs.

Групповые селекторы (“selector1, selector2, selectorN”)

Соответствует элементам, удовлетворяющим хотя бы одному из селекторов (first, second, . ).

Селектор всех элементов (“*”)

Соответствует всем элементам.

Селектор по идентификатору (“#id”)

Соответствует элементу с идентификатором idName. Селектор по идентификатору является одним из наиболее востребованных средств jQuery.

Селектор по имени тэга (“element”)

Соответствует всем элементам с тегом tagname.

Селектор по классу (“.class”)

Соответствует всем элементам страницы с классом className. Селектор по классу является одним из наиболее востребуемых средств jQuery.

30 селекторов CSS, которые нужно запомнить

Дата публикации: 2010-12-11

От автора: Итак, вы выучили основные селекторы css: id, class, наследование – и довольны? Если да, то вы упускаете гигантский объем гибкости. Хотя многие селекторы, упомянутые в этой статье, являются частью спецификации CSS3 и, следовательно, имеются в наличие только на современных браузерах, вы должны их запомнить.

Давайте перед тем, как перейти к более продвинутым селекторам CSS, мы с новичками одолеем самые простые и очевидные.

Знак звездочки выберет каждый отдельный элемент страницы. Многие разработчики используют этот прием для обнуления margin и padding. Хотя он, безусловно, хорош для быстрых проверок, я бы советовал вам никогда не пользоваться им в продуктивном коде. Он добавляет слишком много веса браузеру и не является необходимым.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Звездочку * также можно использовать для дочерних селекторов.

Он выберет каждый отдельный элемент, являющийся дочерним div’у #container. И еще раз, старайтесь не пользоваться этим приемом слишком часто, или вообще не пользуйтесь.


Совместимость

Указание символа # в качестве префикса селектора позволяет делать выборку по id. Это, бесспорно, самое обычное использование, однако при использовании селекторов id будьте осмотрительны.

Спросите себя: мне совершенно необходимо привязать id для выборки к этому элементу?

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

Совместимость

Это — селектор class. Разница между id и class’ами в том, что при помощи последнего вы можете выбирать множественные элементы. Используйте class’ы, когда хотите применить стили к группе элементов. В качестве альтернативы используйте id для нахождения иголки в стогу сена и примените стиль к одному отдельному элементу.

Совместимость

4. X Y

Следующий наиболее комментируемый селектор — потомок. Пользуйтесь им, когда к своим селекторам нужно отнестись более конкретно. Например, что делать, если нежели выбирать все тэги-привязки all, лучше было бы сделать своей целью привязки внутри неупорядоченного списка? Вот когда вы определенно воспользовались бы наследованием селекторов.

Профессиональная подсказка – если ваш селектор выглядит как X Y Z A B.error, вы поступаете неправильно. Всегда спрашивайте себя, так ли уж абсолютно необходимо применять всю эту нагрузку.

Совместимость

Что, если нужно выбрать все элементы страницы соответственно их типу, нежели по имени их id или class’а? Сделайте проще и используйте селектор типа. Если нужно выбрать все неупорядоченные списки, примените ul <>.

Совместимость

Для выборки всех тэгов-привязок, на которые еще нужно щелкнуть, мы пользуемся псевдоклассом :link.

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

Совместимость

7. X + Y

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

Совместимость

Разница между обычным X Y и X > Y состоит в том, что последний выберет только прямые дочерние элементы. Например, рассмотрите следующую разметку.

Селектор #container > ul выберет своей целью только те ul’ы, которые являются прямыми потомками div’а с id container. Он не выберет, например, ul –потомок первого li.

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

Совместимость

Этот комбинатор находит одноуровневые узлы и идентичен X + Y, однако он менее строгий. В то время как смежный селектор (ul + p) выберет только первый элемент, которому непосредственно предшествует шаблонный элемент, этот селектор более общий. В вышеприведенном примере, он будет выбирать любые элементы p до тех пор, пока они следуют за ul.

Совместимость

10. X[title]

Относимый к селекторам атрибутов, в вышеприведенном примере он выберет только тэги-привязки, имеющие атрибут title. Тэги-привязки, не имеющие его, не получат этого конкретного стиля. А что, если вам нужен более специальный случай ? Что ж…

Совместимость

11. X[href=»foo»]

Вышеприведенный фрагмент определит стили всем тэгам-привязкам, которые ссылаются на http://net.tutsplus.com; они получат наш фирменный зеленый цвет. Все прочие тэги-привязки останутся нетронутыми.

Обратите внимание, что мы заключаем значение в кавычки. Помните, что это также нужно делать при использовании движка селекторов JavaScript CSS. Предпочтительно перед неофициальными методами, всегда пользуйтесь селекторами CSS3, когда возможно.

Работает хорошо, только слегка негибко. Что получится, если ссылка действительно направляет на Nettuts+, но, возможно, путь – это nettuts.com, а не полный url? В таких случаях можно использовать чуть-чуть нормального синтаксиса выражений.

Совместимость

12. X[href*=»nettuts»]

Вот сюда мы шли; вот то, что нам нужно. Звездочка обозначает, что действующее значение должно появиться где-то в значении атрибута. Таким образом покрывается nettuts.com, net.tutsplus.com, и даже tutsplus.com.

Помните, что это обширное утверждение. Что выйдет, если тэг-привязка соединяет с каким-то сайтом, расположенным не на Envato, со строкой tuts в url’е? Если нужно более точно определить, используйте ^ и & для ссылки соответственно на начало и конец строки.

Совместимость

13. X[href^=»http»]

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

Это легко делается при помощи знака ^ («карат»). Чаще всего он используется в регулярных выражениях для обозначения начала строки. Если нужно выбрать все тэги-зацепки, имеющие href, начинающийся с http, можно применить селектор, подобный вышеуказанному фрагменту.

Обратите внимание, что мы не ищем http://; он не нужен и не несет ответственности за url’ы, начинающиеся с https://.

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

Совместимость

14. X[href$=».jpg»]

И снова мы пользуемся знаком регулярных выражений, $, для обращения к концу строки. В этом случае мы ведем поиск всех привязок, ссылающихся на изображение — или, по крайней мере, url’а, оканчивающегося на .jpg. Помните, что это, скорее всего, не сработает с gif’ами и png.

Совместимость

15. X[data-*=»foo»]

Вернитесь к номеру восемь; как можно скорректировать все эти разные типы изображений: png, jpeg,jpg, gif? Ну, мы могли бы создать множественные селекторы, такие как:

Но так мы создаем себе головную боль и, к тому же, это неэффективно. Другое возможное решение – применение пользовательских атрибутов. Что получится, если добавить свой собственный атрибут data-filetype к каждой привязке, ссылающейся на изображение?

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

Совместимость

16. X[foo

А вот особенность, которой можно удивить своих друзей. Об этом приеме знает не так уж много людей. Знак «тильда» (

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

Согласно вышеприведенному пользовательском атрибуту из номера пятнадцать мы могли бы создать атрибут data-info, который может получить разделенный пробелами список чего угодно, что нужно пометить. В этом случае мы отметим внешние ссылки и ссылки на изображения — просто для примера.

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

Совместимость

17. X:checked

Этот псевдокласс выберет только проверенный элемент пользовательского интерфейса – как кнопка радио или checkbox (прямоугольник для пометки выбранного режима, состояния или действия (на экране дисплея)). Просто, как дважды два.

Совместимость

18. X:after

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

Многие познакомились с этими классами при первой встрече с хаком clear-fix.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Этот хак использует псевдоэлемент :after для присоединения пробела после элемента, а затем его очистки. Этот великолепный прием стоит иметь в своем инструментарии, особенно в тех случаях, когда невозможно использовать метод overflow: hidden;.

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

Совместимость

19. X:hover

Ой, да ладно! Этот вы знаете. Официальный термин для него: user action pseudo class (псевдокласс пользовательского действия). Название сбивает с толку, но на деле он не такой. Хотите, когда пользователь проводит мышью над элементом, применить специальные стили? Он выполнит эту работу!

Помните, что более старая версия Internet Explorer не отвечает на применение псевдокласса :hover к чему-либо, кроме тэга-ссылки.

Чаще всего мы используем этот селектор при применении к тэгам-привязкам, например, border-bottom , когда над ними проводят мышью.

Профессиональная подсказка — border-bottom: 1px solid black; смотрится лучше, чем text-decoration: underline;.

Совместимость

20. X:not(selector)

Псевдокласс отрицания чрезвычайно полезен. Скажем, я хочу выбрать все div’ы, кроме одного, который является id container. Фрагмент выше выполнит эту работу идеально.

Или, если бы я хотел выбрать каждый отдельный элемент (не советую), кроме тэгов абзаца, можно было бы сделать:

Совместимость


21. X::pseudoElement

Можно использовать псевдоэлементы (назначенные ::) для назначения стилей фрагментам элемента, таким, как первая строка или первая буква. Помните о том, что для того, чтобы оказать эффект, они должны быть применены для блочных элементов.

Псевдоэлемент состоит из двух двоеточий: ::

Выберите первую букву абзаца

Этот отрывок – выделение, которое найдет все абзацы на странице, а затем довыберет только первую букву этого элемента.

Чаще всего оно используется для создания «газетных» стилей для первой буквы абзаца.

Подобным образом псевдоэлемент ::first-line, как от него и ожидается, назначит стили только первой строке элемента.

«Для совместимости с существующими таблицами стилей агенты пользователя также должны принимать нотацию (систему обозначений) одного предыдущего двоеточия для псевдоэлементов, представленных в уровнях 1 и 2 CSS (а именно: :first-line, :first-letter, :before и :after). Эта совместимость не предоставляется новым псевдоэлементам, представленным в этой спецификации» — источник

Совместимость

22. X:nth-child(n)

Помните время, когда у нас не имелось возможности выделять отдельные элементы в стеке? Псевдокласс nth-child решает эту проблему!

Пожалуйста, обратите внимание, что nth-child принимает в качестве параметра целое число, однако, оно не начинается с нуля. Если хотите выбрать второй пункт списка, пользуйтесь li:nth-child(2).

Можно даже употребить его, чтобы выбрать совокупность дочерних переменных. Например, мы могли бы сделать li:nth-child(4n) для выделения каждого четвертого пункта списка.

Совместимость

23. X:nth-last-child(n)

Что получится, если бы у вас был огромный список пунктов в ul, и вам нужно было всего лишь обратиться, скажем, к третьему от конца пункту? Помимо выполнения li:nth-child(397), вы могли бы вместо этого применить псевдокласс nth-last-child.

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

Совместимость

24. X:nth-of-type(n)

Временами вместо выбора дочернего элемента (child), вам понадобится выбрать согласно типу (type) элемента.

Представьте себе разметку, содержащую пять неупорядоченных списков. Если бы вы хотели присвоить стили только третьему ul’у и не имели уникального id для привязки, то могли бы использовать псевдокласс nth-of-type(n). Иметь вокруг себя рамку в верхнем фрагменте будет только третий ul.

Совместимость

25. X:nth-last-of-type(n)

Да, оставаясь до конца логичными, мы еще можем применить nth-last-of-type для того, чтобы начать с конца списка селекторов и продвигаться в обратную сторону для выборки нужного элемента.

Совместимость

26. X:first-child

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

Например, скажем, у вас есть список строк, и каждый из них содержит border-top и border-bottom. При таком размещении первый и последний пункт в этом наборе будут выглядеть немного странно.

Для корректировки этого многие дизайнеры применяют классы first и last. Вместо них можно использовать эти псевдоклассы.

Совместимость

27. X:last-child

В противоположность first-child, last-child выделит последний пункт родителя элемента.

Пример

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

Разметка

Здесь нет ничего особенного; всего лишь простой список.

CSS

Эти стили установят фон, удалят отступ браузера по умолчанию в ul, и применят к каждому li рамки для обеспечения глубины.

Для добавления в свои списки глубины примените border-bottom к каждому li, на оттенок или два темнее, чем цвет фона li. Затем примените border-top на пару оттенков светлее.

Как видно на изображении вверху, единственная проблема состоит в том, что рамка будет применяться к самому верху и низу неупорядоченного списка – это выглядит странно. Давайте для устранения этой проблемы используем псевдоклассы :first-child и :last-child.

Вот так; все исправлено!

Совместимость

Ага … IE8 поддерживал :first-child , но не:last-child. Поди разберись!

28. X:only-child

Честно говоря, вы, вероятно, не слишком часто застанете себя за использованием псевдокласса only-child. Несмотря на все, если он понадобится, то вполне доступен.

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

Давайте представим следующую разметку.

My paragraph here.

Two paragraphs total.

Two paragraphs total.

В этом случае вторые абзацы div’а не будут выбраны; только первый div. Как только вы примените более одного дочернего элемента, псевдокласс only-child перестанет иметь эффект.

Совместимость

29. X:only-of-type

Этот структурный псевдокласс может использоваться несколькими хитрыми способами. Он выберет элементы, не имеющие сиблингов (элементов одного уровня) в своем родительском контейнере. В качестве примера давайте выберем все ul’ы, имеющие всего один пункт списка.

Во-первых, задайте себе вопрос, каким образом вы выполнили бы это задание? Вы могли бы сделать ul li, но так они выберут своей целью все пункты списка. Единственное решение – использовать only-of-type.

Совместимость

30. X:first-of-type

Псевдокласс first-of-type позволяет выбирать первые сиблинги (элементы одного уровня) своего типа.

Проверка

Для лучшего понимания давайте проведем тест. Скопируйте в свой редактор кода следующую разметку:

My paragraph here.

Теперь, не читая дальше, попробуйте догадаться, как выбрать только «List Item 2″. Когда придете к решению (или сдадитесь), продолжите чтение.

Решение 1

Решить эту контрольную работу можно многими способами. Мы рассмотрим некоторые из них. Давайте начнем с использования first-of-type.

Этот отрывок, по сути, говорит: «Найдите первый неупорядоченный список на странице, затем найдите только прямые дочерние элементы, являющиеся пунктами списка. Далее отфильтруйте все до второго пункта списка в наборе».

Решение 2

Второй возможный вариант будет использовать смежный селектор.

В этом сценарии мы находим ul, непосредственно следующий за тэгом p, а затем найдем самый последний его дочерний элемент.

Решение 3

Можно вредить им или играть с этими селекторами, как угодно.

На этот раз мы берем первый ul на странице, затем находим самый первый пункт списка, но начинаем с конца!

Совместимость

Заключение

Если вы корректируете более старые браузеры, типа Internet Explorer 6, вам все же следует быть осторожным при использовании новых селекторов. Но, пожалуйста, не позволяйте отпугнуть вас от их изучения. Вы окажете себе этим медвежью услугу. Не стесняйтесь сверяться здесь со списком совместимости с браузерами. Как альтернативу можно использовать прекрасный скрипт IE9.js Dean Edward’а для предоставления этим селекторам поддержки в старых браузерах.

Во-вторых, при работе с библиотеками JavaScript, вроде популярного jQuery, всегда, где это возможно, старайтесь отдавать предпочтение использованию «родных» селекторов CSS3 перед пользовательскими методами/селекторами библиотеки. Ваш код от этого станет выполняться быстрее, так как движок селекторов может использовать исконный парсинг браузера охотнее, чем свой собственный.

Спасибо за прочтение урока по селекторам CSS, надеюсь, вы усвоили пару приемов!

Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Илон Маск рекомендует:  Что такое код yp_match
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL