Сложные селекторы

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

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

В CSS cелекторы атрибутов используются, когда нужно указать стиль элементам, имеющим определённый атрибут. Ко всем элементам на странице, у которых есть данный атрибут, будет применён стиль. Для указания такого селектора пишется нужный атрибут в квадратных скобках. Пример:

Стиль:

[rel]
  {
  color: Red;
  }

HTML код:

<a href="www.yandex.ru" rel="answer">Ссылка</a>

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

Стиль:

li[value]
  {
  color: Blue;
  }

HTML код:

<ol>
<li value="5">Пункт списка</li>
</ol>

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

Селекторы атрибутов можно указать с конкрентым значением атрибута. Пример:

Стиль:

input[type="button"]
  {
  width: 150px;
  height: 40px;
  }

HTML код:

<input type="button" value="Кнопка">

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

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

link - непосещённая ссылка

visited - посещённая ссылка

active - активный элемент, то есть элемент, на котором нажата кнопка мыши. Элемент является активным, только пока кнопка нажата

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

hover - указатель мыши находится над элементом

lang(язык) - элемент с атрибутом lang, имеющим значение, указанное в скобках

first-of-type - первый элемент родительского элемента

last-of-type - последний элемент родительского элемента

only-of-type - единственный элемент родительского элемента

nth-of-type(n) - элемент, который идёт n по счёту родительского элемента

nth-last-of-type(n) - элемент, который идёт n по счёту родительского элемента, считая от последнего элемента

root - корневой элемент документа

empty - пустой элемент

enabled - включенный элемент формы

disabled - выключенный элемент формы

checked - выбранный элемент формы

not(селектор) - все элементы, кроме указанного

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

Стиль:

#div1 
  {
  color: Red;
  font-size: 32px;
  }
#div1:hover
  {
  font-size: 46px;
  color: Green;
  }

HTML код:

<div id="div1">Текст</div>

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

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

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

first-letter - первый символ элемента

first-line - первая строка элемента

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

Для указания псевдоэлемента сначала пишется селектор, затем без пробелов два двоеточия и псевдоэлемент. Пример:

Стиль:

#fstyle::first-letter
  {
  font-size: 40px;
  color: Green;
  }

HTML код:

<p id="fstyle">Текст с особенным стилем первой буквы</p>

Существует ещё два псевдоэлемента, которые работают совсем по-другому. Они добавляют контент элементу.

before - добавляет контент перед основным контентом

after - добавляет контент после основного контента

Этим псевдоэлементам указывается свойство content, в котором пишется добавляемый контент. При необходимости можно указать и другие свойства. Пример:

Стиль:

.co::before
  {
  content: "Ученик ";
  }

HTML код:

<p class="co">Иванов</p>
<p class="co">Петров</p>

Комбинаторы

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

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

Для примера решим задачу, которая иногда решается на практике. Есть блок, внутри него есть тэги <span>. Для тех тэгов <span>, которые непосредственно вложены в блок, нужно установить определённый стиль. Но в блоке есть и другие теги <span>. Только они находятся внутри других вложенных тэгов. И такие тэги <span> должны остаться неизменными. Задача лекго решается с помощю комбинатора >.

Стиль:

#st>span
  {
  color: Green;
  }

HTML код:

<div id="st">Начало <span>Зелёный текст</span> Продолжение
<p><span>Текст без стиля</span></p>
</div>

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