—»     —»   Применяем комбинаторы CSS и простенькие селекторы псевдо-классов
  Раздел: CSS/Style Sheets   Комментариев: 1  

Применяем комбинаторы CSS и простенькие селекторы псевдо-классов



Недавно мы выкладывали материал на тему селекторов, которые мы можем использовать в наших HTML-проектах. Мы охватили простенькие селекторы и более детально сфокусировались на атрибутивных селекторах.

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

Заметка: хочу напомнить вам, что числа в скобках после комбинаторов или псевдо-классов – это версия CSS, в которой они были представлены.

Применяем комбинаторы CSS и простенькие селекторы псевдо-классов

Комбинаторы

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

Существует 4 типа комбинаторов, определяющих родительское/дочернее отношения, а также отношения братства между элементами.

Последующий комбинатор E F (1) – подходит элементу F, который является потомком элемента E. Учтите, что данный комбинатор определяет все последующие элементы, а не только прямые дочерние.

<ul>
<li>List Item 1</li>
<li>List Item 2
<ol>
<li>List Item 2-1</li>
<li>List Item 2-2</li>
</ol>
</li>
<li>List Item 3</li>
</ul>

ul li {background: red;}

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

Дочерний комбинатор E > F (2) – подходит элементу F, так как является дочерним элементом от E. Различие здесь заключается в том, что F должен быть прямым потомком элемента E.

<ul>
<li>List Item 1</li>
<li>List Item 2
<ol>
<li>List Item 2-1</li>
<li>List Item 2-2</li>
</ol>
</li>
<li>List Item 3</li>
</ul>

ul>li {background: red;}

Только пункты списка 1, 2 и 3 из вышеприведенных, будут оформлены красным фоном. Все они являются дочерними от ul, а пункты списка 2-1 и 2-2 – дочерние элементы второго уровня.

Смежный комбинатор на уровне братства E + F (2) – подходит элементу F, которому предшествует элемент E. Не упустите из виду слово «смежный». Лишь первый элемент F после элемента E будет охвачен.

<h1>Heading</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>

h1+p {font-size: 1.5em;}

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

Общий комбинатор на уровне братства E ~ F (3) – подходит элементу F, которому предшествует элемент E. В отличие от вышеприведенного селектора, данный будет подходить любому элементу на уровне братства; не только первому.

<h1>Heading</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>

h1~p {font-size: 1.5em;}

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

Вдаваясь глубже в селекторы

Учтите, что вы не ограничены лишь простыми селекторами в комбинаторах. Любой селектор, включая атрибутивные селекторы, могжет быть частью комбинатора.

ul a[title]
li#first>a[rel="external"]
h1+p.intro
h2.myclass~p[class="intro"]

Всё вышеприведенное – это валидные комбинаторы.

Селекторы псевдо-классов

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

W3C разделяет псевдо-классы на следующие группы:

* динамические псевдо-классы
* целевые псевдо-классы
* языковые псевдо-классы
* псевдо-классы элементов графического интерфейса
* псевдо-классы отрицания
* структурные псевдо-классы

Сегодня мы охватим 5 первых из списка, а на следующий раз оставим структурные псевдо-классы и еще одну группу селекторов (псевдо элементы).

Динамические псевдо-классы

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

Псевдо-классы ссылок (1)

E:link – подходит элементу Е, который является источником анкора ссылки, которая еще не была посещена целью.

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

Псевдо-классы действий пользователя (1) и (2)

Данные псевдо-классы подходят элементу Е во время определенных действий пользователя.

E:active – при активной ссылке (в процессе нажатия).

E:hover – при наведении на ссылку.

E:focus – при активной ссылке.

Я предположу, что вы знакомы со всеми вышеперечисленными классами.

Могу лишь добавить, что при использовании :link, :visited, :hover и :active на одном элементе они должны идти по очереди. Запомнить это можно по простой шпаргалке, фразе: LoVeHAte.

Целевые псевдо-классы (3)

Если вы когда-либо делали именованный анкор, добавляя # в ссылку, то это и есть целевой псевдо-класс в HTML.

E:target – подходит элементу Е, который является целью (именованный анкор) реферального URL.

<a href="domain.com/this-page.html#a-specific-page-location"></a>
<span id="a-specific-page-location"></span>

span:target {background: yellow;}

Вышеприведенный код создаст желтый фон за элементом span.

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

Языковые псевдо-классы (2)

E:lang(fr) – подходит элементу типа Е в указанном языке (здесь fr указывает французский язык)

<body lang=fr>
<p>Je suis fran&#231;ais.</p>
</body>

p:lang(fr) {color: red;}

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

Псевдо-классы положений элементов интерфейса (3)

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

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

E:enabled – подходит активированному элементу пользовательского интерфейса Е.

E:disabled – подходит неактивному элементу пользовательского интерфейса Е..

E:checked – подходит выделенному элементу пользовательского интерфейса Е (радио-кнопка или чекбокс, например).

<form>
Preferred Contact:
<input type="radio" id="prefer" value="email" checked="checked" /> Email
<input type="radio" id="prefer" value="phone" /> Phone
Email: <input type="text" id="email" enabled="enabled" />
Phone: <input type="text" id="phone" disabled="disabled" />
</form>

:enabled {color: green;}
:disabled {color: red;}
:checked {background: yellow;}

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

Предположительно, мы будем использовать javascript, чтобы изменить атрибуты.

Псевдо-классы отрицания (3)

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

E:not(S) – подходит элементу Е, который не соответствует простому селектору S.

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

div:not(.two) {color: orange;}

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

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

Браузерная поддержка

Поддержка комбинаторов вполне сносная, если вы откажетесь от IE6. Чего не скажешь о псевдо-классах (за исключением динамических псевдо-классов, которые отлично работают в браузерах), особенно если взять в оборот IE версии 9.

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

* CSS contents and browser compatibility (CSS и его поддержка в браузерах)
* Pseudo-class support (Поддержка псевдо-классов)
* CSS3 Selectors Test (Тестируем CSS3-селекторы)

В завершение

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

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

На следующей неделе я постараюсь охватить и другие селекторы. Мы познакомимся с последними псевдо-классами – структурными. А затем изучим псевдо-элементы. Наверняка всем этим элементам найдется применение в вашем коде!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 8057   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 7 февраля 2012 @ 10:15
Написал: aleks1309 — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
замечательные селекторы.в любом проекте обязательно найдётся им место
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

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


Популярные публикации

















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Май 2019    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
2728293031