базовый курс

ГРУППА КУРСА

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

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

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

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

Стиль:

+
1
2
3
4
5
6
<!DOCTYPE html>
<html>
<head>
<title>Страница</title>
<meta charset="utf-8">
<style>
7
8
9
10
[rel]
  {
  color: Red;
  }

HTML код:

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

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

Стиль:

11
12
13
14
li[value]
  {
  color: Blue;
  }

HTML код:

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

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

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

Стиль:

15
16
17
18
19
input[type="button"]
  {
  width: 150px;
  height: 40px;
  }

HTML код:

27
<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(селектор) - все элементы, кроме указанного

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

Стиль:

20
21
22
23
24
25
26
27
28
29
30
31
#div1 
  {
  width: 200px;
  height: 140px;
  font-size: 32px;
  border: 1px solid Red;
  }
#div1:hover
  {
  font-size: 46px;
  color: Green;
  }

HTML код:

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

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

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

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

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

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

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

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

Стиль:

36
37
38
39
40
#fstyle::first-letter
  {
  font-size: 40px;
  color: Green;
  }

HTML код:

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

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

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

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

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

Стиль:

41
42
43
44
.co::before
  {
  content: "Ученик ";
  }

HTML код:

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

Комбинаторы

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

Комбинатор Правило
> Стиль будет применёт ко второму селектору, если он непосредственно вложен в первый селектор
+ Стиль будет применён ко второму селектору, если он следует сразу после первого селектора
~ Стиль будет применёт ко второму селектору, если он находится перед первым селектором

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

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

Стиль:

32
33
34
35
#st>span
  {
  color: Green;
  }

HTML код:

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

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