С помощью селекторов CSS Вы можете выбирать желаемые элементы на странице для оформления.

Селекторы CSS

С помощью селекторов Вы можете выбирать элементы на странице, которые хотите оформить.

В CSS существуют следующие виды селекторов:

Селекторы тэгов

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

p
{
color:green;
}
h2
{
color:red;
}

Селектор id

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

Идентификатор для элемента задается с помощью атрибута id (<p id="идентификатор">текст</p>).

Для того, чтобы затем оформить данный элемент необходимо обратиться к идентификатору в таблицах стилей добавив перед ним символ "#" (#идентификатор {color:red}).

/* Оформим элемент с id="test1" */
#test1 
{
color:green;
font-family:verdana;
font-size:1.2em;
}

Селектор class

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

С помощью атрибута class можно задать, что элемент относится к группе (<p class="имя_группы">текст</p>).

Для того, чтобы затем оформить эту группу необходимо в таблицах стилей обратится к имени группы добавив перед ней символ "." (.имя_группы {color:red}).

/* Свойства будут применены ко всем элементам с class="test1" */
.test1 
{
color:green;
font-family:verdana;
font-size:1.2em;
}

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

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

Элементы на странице могут быть выбраны по их атрибутам.

/* Оформит все элементы имеющие атрибут src */
[src]
{
border:solid green 3px;
}

Пример ниже оформит все элементы, которые ссылаются на главную страницу нашего сайта:

/* Оформит все элементы, атрибут href которых имеет значение https://www.wisdomweb.ru */
[href="/"]
{color:green;}

Комбинирование селекторов

Для более точного выбора элементов в CSS может использоваться комбинирование селекторов.

Например, Вы можете комбинировать селекторы тэгов с селекторами class:

/* Свойства будут применены только к тем элементам с class="test1", которые являются заголовками */
h2.test1 
{
color:green;
font-family:verdana;
font-size:1.2em;
}

Также Вы можете комбинировать селекторы тэгов:

/* Свойства будут применены только к тем элементам p, которые находятся внутри элементов div */
div p
{
color:green;
font-family:verdana;
font-size:1.2em;
}

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

/* Свойства будут применены только к тем элементам p, которые идут сразу после элементов div */
div+p
{
color:green;
font-family:verdana;
font-size:1.2em;
}

Группировка селекторов

Часто при оформлении HTML документов с помощью CSS приходится применять одинаковые свойства для разных селекторов, например:

h1
{
font-family:verdana;
color:green;
}
h2
{
font-family:verdana;
color:green
}
p
{
font-family:verdana;
color:green;
}

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

h1,h2,p
{
font-family:verdana;
color:green;
}

Сделайте сами

Задание 1 оформите элементы согласно их содержимому.

<h3>Покрасьте меня в розовый цвет (color:pink).</h3>
<p>Данный элемент должен остаться неоформленным.</p>
<p id='greycol'>Покрасьте меня в серый цвет (color:grey).</p>
<div>Данный элемент должен остаться неоформленным.</div>
<div><p>Покрасьте меня в красный цвет (color:red).</p></div>
<h4>Данный элемент должен остаться неоформленным.</h4>
<p>Покрасьте меня в зеленый цвет (color:green).</p>
<p class='yellowcol'>Покрасьте меня в желтый цвет (color:yellow).</p>