А вы используете 7 селекторов атрибутов?

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

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

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

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

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

Комбинаторы и псевдо классы будут рассмотрены в последующих уроках серии.

Для начала взглянем на простые селекторы.

Примечание: в скобках указана версия CSS, в которой появился селектор.

Простые селекторы

Простые селекторы включают селектор типа, универсальный селектор, селектор атрибута, селектор класса, селектор идентификатора и псевдо класс (псевдо класс будет рассмотрен в следующем уроке

Селектор типа (1)  E (соответствует любому элементу типа E) — Мы можем использовать любой элемент HTML в селекторе.

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

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

Селектор идентификатора (1) #myid (соответствует элементу с идентификатором myid) — любой набор стилей, который используется только для одного элемента с определенным идентификатором.

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

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

Селекторы атрибутов были введены в CSS2 и расширены в CSS3.

E[foo]  (2) — соответствует элементу E с атрибутом “foo”.

<a href="yoursite.com/somepage.html" rel="external">
<a href="mypage.html" rel="internal">

a[rel] {color: green}

Обе ссылки будут иметь зеленый цвет, так как содержат атрибут rel.

E[foo="bar"] (2) — соответствует элементу E, атрибут которого “foo” имеет значение “bar”.

<a href="yoursite.com/somepage.html" rel="external">
<a href="mypage.html" rel="internal">

a[rel="external"] { color: green }

Только первая ссылка будет иметь зеленый цвет, так как только она обладает атрибутом rel со значением “external.”

E[foo~="bar"] (2) — соответствует элементу E, который имеет атрибут “foo” со значением в виде списка, разделенного пробелом, и одним значением соответствующим “bar".

<a href="yoursite.com/somepage.html" rel="external friend bob">
<a href="mypage.html" rel="internal friend janice">

a[rel~="friend"] {color: green}

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

E[foo^="bar"]  (3) — соответствует элементу E, который имеет атрибут “foo” со значением, начинающимся со строки “bar”.

<a href="yoursite.com/somepage.html" rel="external friend bob">
<a href="mypage.html" rel="internal friend janice">

a[href^="my"] {color: green}

Вторая ссылка имеет зеленый цвет, так как значение атрибута href у нее начинается со строки “my.”

E[foo$="bar"] (3) — соответствует элементу E, который имеет атрибут “foo” со значением, заканчивающимся строкой “bar".

<a href="yoursite.com/somepage.html" rel="external friend bob">
<a href="mypage.php" rel="internal friend janice">

a[href$="php"] {color: green}

Вторая ссылка будет иметь зеленый цвет, так как значение атрибута href  заканчивается строкой "php". Данный селектор может быть отличным средством для выделения ссылок с определёнными типами файлов.

E[foo*="bar"] (3) — соответствует элементу E, который имеет атрибут “foo” со значением, содержащим строку “bar”.

<a href="yoursite.com/somepage.html" rel="external friend bob">
<a href="mypage.php" rel="internal friend janice">

a[href*="page"] {color: green}

Обе ссылки будут иметь зеленый цвет, так как значение атрибута href содержит строку “page”.

E[foo|="en"] (3) — соответствует элементу E, атрибут которого “foo” имеет значение в виде списка, разделенного тире и начинающегося (слева направо) с “en”.

<a href="yoursite.com/somepage.html" rel="external-friend-bob">
<a href="mypage.php" rel="internal-friend-janice">

a[rel|="internal"] {color: gree}

Только вторая ссылка будет иметь зеленый цвет, так как значение ее атрибута начинается с “internal.”

Множественный селектор атрибутов

Можно объединять несколько селекторов атрибутов вместе:

<a href="yoursite.com/somepage.html" rel="external friend bob">
<a href="mypage.php" rel="internal friend janice">

a[rel~="friend"][rel~="external"] {color: green}

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

Атрибуты или класса и идентификаторы?

Каково же преимущество использования атрибутов перед классами и идентификаторами?

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

Но многие элементы разметки HTML имеют атрибуты для других целей. href и очень часто - атрибут title. Изображения всегда имеют атрибут alt. Элементы формы используют атрибут type. В коде HTML задействовано большое количество атрибутов. Почему бы не использовать преимущества селекторов атрибутов для них?

Кроме того, HTML5 имеет новый атрибут - data, который также может нести двойную нагрузку.

Селекторы атрибутов могут избавить код HTML от лишних классов и идентификаторов.

Комбинаторы и псевдо классы.

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

Комбинаторы

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

Существует четыре типа комбинаторов для указания отношений между элементами.

Комбинатор потомков E F (1) — соответствует элементу F, который является потомком элемента E. Обратите внимание, что комбинатор потомков выбирает всех потомков, а не только прямых.

HTML:

<ul>
  <li>Пункт списка 1</li>
  <li>Пункт списка 2
    <ol>
      <li>Пункт списка 2-1</li>
      <li>Пункт списка 2-2</li>
    </ol>
  </li>
  <li>Пункт списка 3</li>
</ul>

CSS:

ul li {background: red;}

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

Комбинатор прямых потомков E > F (2) — соответствует элементу F, который является прямым потомком элемента E.

HTML:

<ul>
  <li>Пункт списка 1</li>
  <li>Пункт списка 2
    <ol>
      <li>Пункт списка 2-1</li>
      <li>Пункт списка 2-2</li>
    </ol>
  </li>
  <li>Пункт списка 3</li>
</ul>

CSS:

ul>li {background: red;}

Только пункты 1, 2 и 3 получат красный цвет, так как являются прямыми потомками неупорядоченного списка. Пункты 2-1 и 2-2 являются "внуками".

Комбинатор смежных родственников E + F (2) — соответствует элементу F, которому непосредственно предшествует элемент E. Только первый элемент F сразу после элемента E будет выбран.

HTML:

<h1>Заголовок</h1>
<p>Параграф 1</p>
<p>Параграф 2</p>
<p>Параграф 3</p>

CSS:

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

Только параграф 1 получит увеличенный размер шрифта, так как он является смежным с элементом h1.

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

HTML:

<h1>Заголовок</h1>
<p>Параграф 1</p>
<p>Параграф 2</p>
<p>Параграф 3</p>

CSS:

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, который является еще не посещенной ссылкой.

E:visited — соответствует элементу E, который является уже посещенной ссылкой.

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

Соответствуют элементу E при определенных действиях пользователя.

E:active — в процессе нажатия на ссылку.

E:hover — при наведении курсора мыши на ссылку.

E:focus — при получении ссылкой фокуса ввода.

Псевдо-класс цели (3)

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

E:target — соответствует элементу E, который  является целью в адресе URL ссылки.

HTML:

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

CSS:

span:target {background: yellow;}

Желтый фон будет использован для элемента span.

Псевдо-класс языка (2)

E:lang(fr) — соответствует элементу E с указанным языком (в примере используется “fr” - французский).

HTML:

<body lang=fr>
  <p>Je suis français.</p>
</body>

CSS:

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

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

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

Одним из способов воздействия на удобство интерфейса является разрешение/запрещение ввода информации в разные части формы при ее заполнении в зависимости от того, что уже заполнено.

Обратите внимание, что элементы HTML не разрешаются/запрещаются. Для этого используется JavaScript. Но можно установить атрибуты для элементов ввода.

E:enabled — соответствует элементу интерфейса  E,  который является доступным для ввода.

E:disabled — соответствует элементу интерфейса E, который не доступен для ввода.

E:checked — соответствует элементу интерфейса E, который отмечен (для радиокнопок или чекбоксов).

HTML:

<form>
  Предпочтительный способ связи:
    <input type="radio" id="prefer" value="email" checked="checked" /> Email
    <input type="radio" id="prefer" value="phone" /> Телефон
  Email: <input type="text" id="email" enabled="enabled" />
  Телефон: <input type="text" id="phone" disabled="disabled" />
</form>

CSS:

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

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

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

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

E:not(S) — соответствует элементу E, который не соответствует селектору  S.

HTML:

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

CSS:

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

Первый и третий элементы div станут оранжевыми, так как у них нет класса two.

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

Структурные псевдо-классы и псевдо-элементы

Данный урок является последним в серии, посвященной селекторам CSS.
Примечание: в скобках указан вариант стандарта CSS, в котором был введен селектор.

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

Структурные псевдо-классы были введены как способ указать элементы HTML на основе информации в дереве документа, которую сложно просто представить с помощью простых селекторов и комбинаторов. Большинство из них введено в CSS3.

Без них приходится использовать класс или идентификатор для указания элемента.

E:root (3) — соответствует элементу E, который является корневым для документа. В HTML это всегда элемент html.

:root {background: blue;}
html {background: blue;}

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

E:nth-child(n) (3) — соответствует элементу E, который является n-ым потомком своего родителя.

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

tr:nth-child(4) {background: #ccc;}

Код примера будет задавать светло-серый цвет для каждой 4-й строки.

Распространенное использование данного псевдо-класса  - определение цвета для n-ой строки в таблице.

tr:nth-child(2n+1) {background: #ccc;}
tr:nth-child(2n) {background: #eee;}

2n+1 представляет нечетные строки, а 2n - четные. Можно использовать специальные значения для указания четных и нечетных строк.

tr:nth-child(odd) {background: #ccc;}
tr:nth-child(even) {background: #eee;}

Можно использовать любой номер:

tr:nth-child(10n+1) {background: #ccc;}

Код будет определять цвет фона для 11-й, 21-й, 31-й и так далее строк.

E:nth-last-child(n) (3) — соответствует элементу E, который является n-ым потомком своего родителя, считая от последнего потомка.

Псевдо-класс nth-last-child работает аналогично nth-child, за исключением того, что подсчет ведется от последнего элемента в списке.

Снова предположим, что у нас есть таблица с большим количеством строк.

tr:nth-last-child(1) {background: #ccc;}

Код будет устанавливать цвет фона для последней строки.

tr:nth-last-child(4) {background: #ccc;}

А здесь 4-я строка с конца таблицы будет иметь соответствующий цвет фона.

Также можно использовать значения для указания четных и нечетных строк:

tr:nth-last-child(2n+1) {background: #ccc;}
tr:nth-last-child(2n) {background: #eee;}

tr:nth-last-child(odd) {background: #ccc;}
tr:nth-last-child(even) {background: #eee;}

Типовое использование псевдо-класса nth-last-child - установка особенных стилей для последних пунктов списка (например, для строк с итогами).

:nth-of-type и:nth-last-of-type

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

E:nth-of-type(n) (3) — соответствует элементу E, который является n-ым в списке смежных элементов данного типа.

E:nth-last-of-type(n) (3) — соответствует элементу E, который является n-ым с конца в списке смежных элементов данного типа.

nth-of-type() и nth-last-of-type() работают аналогично nth-child() и nth-last-child(). Разница заключается в том, что для указания элементов используется тип, а не родственные отношения.

Следует использовать псевдо-классы -of-type, когда родительский элемент имеет отличный от потомков тип.

HTML

<div>
 <p></p>
< img src="" alt="" / >
 <p></p>
  <ul>
    <li></li>
    <li></li>
  </ul>
 <p></p>
</div>

CSS

p:nth-of-type(2) {font-size: 1.2em;}
p:nth-last-of-type(1) {font-size: 1.2em;}

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

:first-child и :last-child

Данные псевдо-классы представляют собой короткую запись для nth-child(1) и nth-last-child(1). Требуется, чтобы потомки были одного типа.

E:first-child (2) — соответствует элементу E, который является первым потомком своего родителя.

E:last-child (3) — соответствует элементу E, который является последним потомком своего родителя.

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

:first-of-type и :last-of-type

Данные два псевдо-класса представляют собой функциональный эквивалент nth-of-type(1) и nth-last-of-type(1) соответственно. Они работают так же, как и first-child и last-child, за исключением того, что указывается элемент определенного типа.

E:first-of-type (3) — соответствует элементу E, который является первым в списке смежных элементов данного типа.

E:last-of-type (3) —  соответствует элементу E, который является последним в списке смежных элементов данного типа.

Типовое использование данного псевдо-класса - определение специальных стилей для первого и последнего параграфа в статье.

only-child и only-of-type

Следующие два псевдо-класса служат для выделения единственных элементов.

E:only-child (3) — соответствует элементу E, который является единственным потомком своего родителя.

E:only-of-type (3) — соответствует элементу E, который является единственным с данным типом среди смежных элементов.

С помощью псевдо-класса only-child выделяется единственный элемент внутри родителя. А псевдо-класс only-of-type поможет выбрать уникальный элемент с определенным типом среди нескольких потомков.

:empty

E:empty (3) — соответствует элементу E,  который не имеет потомков (включая текстовое содержание)

Псевдо-класс :empty является способом указать пустой тег. Например, ему не будет соответствовать следующий элемент:

<p>Какой-нибудь текст</p>

А вот такой элемент соответствует данному псевдо-классу:

<p></p>

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

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

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

У нас есть 4 псевдо-элемента, которые могут помочь определению стилей для особых случаев без создания лишних элементов в структуре DOM.

::first-line

E::first-line (1) — соответствует первой сформированной строке элемента E.

p:first-line {text-transform: uppercase;}

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

::first-letter

E::first-letter (1) — соответствует первому символу элемента E.

Как и first-line, first-letter выбирает только первый символ. Очевидное использование - выделение первой буквы.

HTML

<p class="intro">Первая строка параграфа</p>

CSS

p.intro::first-letter {
	font-size:4em; 
	font-weight:bold;
	color: #f00;
	float:left;
}

::before и ::after

E::before (2) — соответствует сгенерированному содержанию до элемента E.

E::after (2) — соответствует сгенерированному содержанию после элемента E.

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

HTML

<blockquote>Текст цитаты</blockquote>

CSS

blockquote::before {content: "‘"}
blockquote::after {content: "’"}

Код примера добавляет кавычки до цитаты и после нее.

The above adds a single left quotation mark before the blockquote and a single right quotation mark after it.

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

blockquote::before {content: "";}

a, a:link, a:visited {
	color: lightblue;
	-webkit-transition: color .4s linear;
	-moz-transition: color .4s linear;
	-o-transition: color .4s linear;
	-ms-transition: color .4s linear;
	transition: color .4s linear;
}

a:hover {
	color: white;
}

.box {
	width: 300px;
	height: 300px;
	background: #222;
	-webkit-transition: width 2s ease, height 2s ease;
	-moz-transition: width 2s ease, height 2s ease;
	-o-transition: width 2s ease, height 2s ease;
	-ms-transition: width 2s ease, height 2s ease;
	transition: width 2s ease, height 2s ease;
}

.box:active {
	width: 500px;
	height: 500px;
}

input, textarea {
	width: 280px;
	-webkit-transition: width 1s ease;
	-moz-transition: width 1s ease;
	-o-transition: width 1s ease;
	-ms-transition: width 1s ease;
	transition: width 1s ease;
}

input:focus, textarea:focus {
	width: 340px;
}

input {
	height: 20px;
	-webkit-transition: width 1s ease;
	-moz-transition: width 1s ease;
	-o-transition: width 1s ease;
	-ms-transition: width 1s ease;
	transition: width 1s ease;
}

input:checked {
	width: 30px;
}

input[type="text"], textarea {
	background: #e2e2e2;
	-webkit-transition: background 1s ease;
	-moz-transition: background 1s ease;
	-o-transition: background 1s ease;
	-ms-transition: background 1s ease;
	transition: background 1s ease;
}

input:disabled, textarea:disabled {
	background: #666666;
}

$(function() {
	$('input[type="radio"]').click(function() {
		if ($(':checked').val() === "other") {
			$('input[type="text"]').removeAttr("disabled");
		} else {
			$('input[type="text"]').attr("disabled", "disabled");
		}
	});
});

.box {
	width: 440px;
	height: 440px;
	background: #222;
	margin: 0 auto;
	-webkit-transition: width 2s ease, height 2s ease;
	-moz-transition: width 2s ease, height 2s ease;
	-o-transition: width 2s ease, height 2s ease;
	-ms-transition: width 2s ease, height 2s ease;
	transition: width 2s ease, height 2s ease;
}

@media only screen and (max-width : 960px) {
	.box {
		width: 300px;
		height: 300px;
	}
}

❖ ❖ ❖ ❖ ❖ ❖ ❖ ❖
Библиотека JAVASCRIPT 1997- Дизайн и сопровождение © SE@RCHER