Создание сайтов с нуля - урок 19 - Селекторы CSS, 1 часть - основные селекторы

Напомню, что CSS - это, по сути, набор различных селекторов и свойств к ним.

Другими словами, весь CSS состоит из блоков такого вида:

селектор {

  свойство1: значение;

  свойство2: значение;

}

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

1. Самый простой селектор – это универсальный селектор, обозначается звездочкой (*).

Этот селектор обращается абсолютно ко всем элементам на странице и задает для них стили.

* {marhin:0; padding:0;}

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

p { стили для абзацев }

a { стили для ссылок }

h1 { стили для заголовка }

div { стили для блоков }

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

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

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

3. Следующий селектор – это селектор по классу. Для задания используется «точка» и имя класса.

Например:

.block {color: red;}

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

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

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

Из этого можно выделить отдельный вид селекторов следующего вида: .class1.class2. Их называют мультиклассы и действовать они будут только на те элементы, у которых одновременно заданы и класс class1, и class2.

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

5. Селектор по идентификатору. Записывается с помощью символа #.

Например:

#block {color: red;}

Сразу хочу отметить, что использование селектора по идентификаторам именно для задания стилей CSS считается плохой практикой, т.к. каждый идентификатор допускается использовать на одной странице только 1 раз. И как раз во избежание возможных проблем при, скажем так, нечаянном одновременном задании на одной странице двух и более одинаковых имен идентификаторов для разных элементов лучше id вообще не использовать для задания стилей. Тогда возникает вопрос, а для чего его использовать? ID, например, можно использовать для задания якорей на странице. Надеюсь, Вы помните, что якорь - это ссылка внутри одной страницы для быстрого перехода (т.е. прокрутки) к данному элементу. И как раз для этих целей используется id. Еще один распространенный пример использования id – это обращение к элементу из javascript. Очень часто стоит задача обратиться из javascript к какому-то одну конкретному элементу из ряда одинаковых. И как раз при помощи id этот элемент можно идентифицировать.

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

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

.block, p, a {color: red;}

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

.block p a {color: red;}

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

8. Еще раз повторю, что уровень вложенности в предыдущем примере абсолютно ничем не ограничен. Но в случае, если необходимо применять стили ТОЛЬКО для дочерних элементов, т.е. тех, которые находятся ТОЛЬКО на первом уровне вложенности, то можно использовать, соответственно, дочерний селектор. Получить его можно путем добавления знака «больше» между двумя селекторами.

p > a {color: red;}

9. Если же вместо знака больше использовать «плюс», то получится выборка соседних селекторов.

p + a {color: red;}

Стили применятся к элементу a только если сразу перед ним расположен элемент p.

10. Еще один вид селекторов – это родственные селекторы. Для их задания между элементами используется символ тильды (~). По своему поведению они похожи на соседние селекторы, но в отличие от них стили применяются ко всем близлежащим элементам, при условии, что они имеют общего родителя и следует сразу после него.

К примеру, для селектора p~a стиль будет применяться ко всем элементам a, располагающихся после абзацев p.