Виды и правила написания селекторов в CSS

Здравствуйте, уважаемые читатели блога MonetaVInternete.ru. в одной из прошлых статей я все же вернулся к теме создания сайтов, а конкретнее — начал рассказывать про каскадные таблицы стилей (CSS). Основную информацию вы можете прочесть по приведенной ссылке. В этой статье мы более подробно рассмотрим css селекторы — их виды, правила написания, а также примеры использования.

CSS селекторы - виды

Как известно, язык css создан дабы оптимизировать описание внешнего вида документа. Без него практически любой html документ (более или менее нормально оформленный) выглядел бы довольно пугающе для поисковых систем, ведь они исследуют код страницы, который, в свою очередь, был бы наполнен разными тегами и атрибутами. С помощью CSS все параметры внешнего вида можно поместить в один файл, который потом можно просто подключить к документу.

В прошлой статьей по этой теме мы создали два файла, page.html и style.css — веб-документ и файл со стилями соответственно. Также мы выполнили подключение файла к документу (тег style в шапке страницы). Css файл был вот такого содержания:

А в страничке был такой код:

С подключенным файлом каскадной таблицы стилей она приобрела вот такой вид:

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

Виды селекторов и правила их употребления

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

Вот они и обладают наивысшим приоритетом — стили автора. CSS файл, который вы прикрепляете, свойства, которые прописываете в шапке или же отдельно в тегах, все это является стилем автора и ставится на первое место при обработке браузером документа (хотя и среди перечисленных элементов есть свои правила приоритетов). Но это далеко не все — в стилях автора имеют место свои правила приоритетов, которые зависят от иерархии, правил и селекторов. Вот с последних и начнем. Итак, виды css селекторов. Чтобы все не просто прочесть, но и изучить на практике, рекомендую использовать ранее созданные файлы html и css.

Универсальный селектор

Селектор, который задает стандартный стиль для всех элементов. Обозначается звездочкой. Имеет самый низкий приоритет. Вот такой свойство окрашивает все элементы в зеленый цвет:

 * {color:green;} 

Селекторы элемента

Задает стили для тегов. Помните картинку с прошлой записи, где я указывал что такое селектор и правило? Вот там был задан селектор элемента абзац (тег p). Результат — стандартный шрифт семейства cursive зеленого цвета

 p {
 font-family: cursive;
 font-weight: normal;
 color: green;
 }

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

Задают указанные свойства для каждого тега, в котором есть данный атрибут. Вот пример (все содержимое тегов с атрибутом title окрасится в синий цвет) :

 [title] {color:blue;} 

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

 [title="какой-нибудь заголовок"] {color:red;} 

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

 [title*="гол"] {color:red;} 

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

 [title~="заголовок"] {color:red;} 

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

 [title^="заг"] {color:red;} 

И, наконец, изменяем атрибут, который заканчивается на какой-либо текст:

 [title$="ловок"] {color:red;} 

Селектор классов

Здесь все основывается на универсальном атрибуте class, который применим ко всем тегам. Это одно из основных средств верстки сайта. Структура css стиля:

.abs {color:red;}

Так как атрибут универсальный, то можно применить его к любому тегу:

<div class="abs">Текст внутри тегов с классом abs</div>

Результат — все содержимое тегов, которые содержат класс abs, будет окрашено в красный цвет. Использовать можно сколь угодно много раз на странице. Также позволяется использовать сразу несколько классов для одного тега. Каждый записывается через пробел в атрибуте class:

<div class="abs dfc">Текст внутри тегов с классом abs</div>

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

Селекторы идентификаторов

Отличаются от предыдущей группы только тем, что могут использоваться только 1 раз на странице. В теге используется атрибут id:

 <div id="size"> какой-нибудь текст

А в стилях такой селектор обозначается символом решетки #:

 #size {font-size:24px;}

Селекторы дочерних элементов

Используется если нужно задать стиль для какого-либо дочернего элемента, не затронув остальные (честно говоря, легче использовать атрибут class). Имеем вот такую конструкцию:

<p>Нужно сделать <a href="#">эту ссылку</a> красного цвета, а <span><a href="#">эту</a></span> не трогать</p>

Чтобы выполнить поставленную задачу используются селекторы потомков:

 p>a {color:red;}

Как видите, мы указали, что тег a является дочерним тегом p, и изменили его цвет. Если же вы хотите изменить все элементы-потомки, то вместо знака «больше» нужно вставить пробел:

 p a {color:red;}

В результате обе ссылки будут красного цвета.

Селектор сестринских элементов

Если вам нужно изменить стиль соседских элементов (по иерархии), то можно использовать следующую конструкцию:

span + a {color red;}

Селекторы потомков

Позволяют изменять содержимое только тех тегов, которые содержат указанный параметр — атрибут, класс, идентификатор. Выглядят следующим образом:

 div.abs {color:red;}

Прошу заметить, div.abs пишется без пробелов. В этом случае все элементы, находящиеся в теге div с атрибутом class="abs" будут окрашены в красный цвет. Пример:

<div class="abs">Текст красного цвета</div>

Если же нужно изменить стиль элементов с идентификатором, то вместо точки нужно будет поставить символ #.

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

Псевдоклассы — классы, наличие которых зависит от состояния объекта или документа. Чаще всего их используют для изменения внешнего вида каких-либо форм или ссылок. В css стили для таких элементов задаются по следующему шаблону:

 a:hover {color:green;}

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

Вот вроде бы и все виды селекторов в CSS. Надеюсь, вы их опробовали на тех файлах, которые мы создавали на прошлом уроке. В следующей статье из рубрики «Основы HTML и CSS» мы поговорим о приоритетах в CSS, без знания которых будет довольно сложно работать с внешним видом сайта. До скорых встреч на страницах блога MonetaVInternete.ru!

Оставить ответ