, каждому из которых нужно задать определенный цвет. Как это сделать? Стандартные CSS selectors по тегам не подойдут, они указывают параметры для всех блоков сразу. Выход прост. Назначьте элементам класс. Например, первый div получил class=’red’, второй - class=’blue’, третий - class=’green’. Теперь их можно выбрать, используя таблицы CSS.

Синтаксис таков: указываем точку («.»), после которой пишем название класса. Чтобы управлять первым блоком, используем конструкцию.red. Вторым - .blue и так далее.

Важно! Рекомендуется использовать понятные значения атрибута class. Дурным тоном считается использование транслита (например, krasiviy-blok) или случайных комбинаций букв/цифр (ojfh834871). В таком коде вы обязательно запутаетесь, не говоря уже о том, с какими трудностями придется столкнуться тем, кто будет заниматься проектом после вас. Оптимальный вариант - использовать какую-нибудь методологию, вроде БЭМ.

Достоинства - довольно высокая гибкость.

Недостатки - у нескольких элементов может быть один и тот же класс, а значит, они будут редактироваться одновременно. Проблема решается использованием методологии, а также наследованием препроцессоров. Обязательно освойте less, sass или какой-нибудь другой препроцессор, они сильно упростят работу.

Селектор по ID

Насчет этого варианта мнения верстальщиков и программистов неоднозначны. Некоторые учебники CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Однако многие специалисты активно расставляют их по всей разметке. Решать вам. Синтаксис таков: символ решетки (« # »), затем имя блока. Например, #red.

ID отличается от класса по нескольким параметрам. Во-первых, на странице не может быть двух одинаковых ID. Им назначаются уникальные имена. Во-вторых, такой селектор обладает более высоким приоритетом. Это значит, что если вы зададите блоку класс red и укажете в таблицах CSS красный а затем назначите ему же id blue и укажете синий цвет, блок станет синим.

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

Недостатки - легко запутаться в большом количестве ID и class.

Важно! Если вы пользуетесь методологией БЭМ (или ее аналогами), ID вам, в общем-то, не нужны. Такая техника верстки подразумевает использование уникальных классов, что гораздо удобнее.

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

Синтаксис: знак зведочки («*») и фигурные скобки, т. е. * {}.

Используется для назначения определенных атрибутов сразу всем элементам страницы. Когда это может пригодиться? Например, если вы хотите задать странице свойство box-sizing: border-box. Может использоваться не только для управления всеми компонентами документа, но и для контроля всеми дочерними элементами определенного блока, например, div *{}.

Достоинства - можно управлять большим количеством элементов одновременно.

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

По атрибутам

Дают возможность управлять элементом с конкретным атрибутом. Например, у вас есть несколько тегов input с разным атрибутом type. Один из них - text, второй - password, третий - number. Конечно, можно задать каждому классы или ID, но это не всегда удобно. CSS selectors по атрибутам дают возможность указать значения для определенных тегов с максимальной точностью. Например, вот так:

input{}

Этот селектор атрибутов выберет все input с типом text.

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

Представим, что на вашей странице есть input с атрибутом placeholder=“Введите имя“ и input placeholder=“Введите пароль“. Их также можно выбрать с помощью селектора! Для этого используется следующая конструкция:

input{} или input

Возможна более гибкая работа с атрибутами. Допустим, у вас есть несколько тегов с похожими атрибутами title (скажем, «каспийский» и «каспийская»). Чтобы выбрать оба, используем следующие селекторы:

CSS выберет все элементы, в тайтле которых имеются символы «каспийск», т. е. и «каспийский», и «каспийская».

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

или заканчиваются ими:

{}.

Достоинства - максимальная гибкость. Можно выбирать любые существующие элементы страницы без возни с классами.

Недостатки - используется относительно редко, только в специфических случаях. Многие верстальщики предпочитают методологии, поскольку указать класс бывает проще, чем расставлять многочисленные и знаки «равно». Вдобавок, эти селекторы не работают в Internet Explorer версии 7 и ниже. Впрочем, кому сейчас нужны старые Internet Explorer?

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

Псевдокласс обозначает состояние элемента. Например, :hover - то, что происходит с частью страницы при наведении курсора, :visited - посещенная ссылка. Сюда же входят элементы вроде:first-child и:last-child.

Этот тип селекторов активно применяется в современной верстке, поскольку благодаря ему можно сделать страницу «живой» без применения JavaScript. Например, вы хотите сделать так, чтобы при наведении на кнопку с классом btn ее цвет менялся. Для этого используем следующую конструкцию:

Btn:hover {

Background-color: red;

Для красоты можно указать в основных свойствах этой кнопки свойство transition, например, в 0,5s - в таком случае кнопка будет краснеть не мгновенно, а в течение полусекунды.

Достоинства - активно используются для «оживления» страниц. Просты в применении.

Недостатки - их нет. Это действительно удобное средство. Однако неопытные верстальщики могут запутаться в обилии псевдоклассов. Проблема решается учебой и практикой.

Селекторы псевдоэлементов

«Псевдоэлементы» - это те части страницы, которых нет в HTML, но ими все равно можно управлять. Ничего не поняли? Все проще, чем кажется. Например, вы хотите сделать первую букву в строке большой и красной, оставив прочий текст маленьким и черным. Конечно, можно заключить эту букву в span с определенным классом, но это долго и скучно. Гораздо проще выделить весь абзац и использовать псевдоэлемент::first-letter. Он дает возможность управлять внешним видом первой буквы.

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

Достоинства - дают возможность гибко настраивать внешний вид страницы.

Недостатки - новички в них часто путаются. Многие селекторы этого типа работают только в определенных браузерах.

Подведем итог

Селектор - мощное средство контроля потока документа. Благодаря ему можно выбрать абсолютно каждый компонент страницы (даже существующий лишь условно). Обязательно выучите все имеющиеся варианты или хотя бы запишите их. Это особенно важно, если вы создаете сложные страницы с современным дизайном и большим количеством интерактивных элементов.

Данный материал посвящен основам оформления стилей на интернет-ресурсе при помощи селекторов.

Селекторы в CSS используются для определения конкретного
элемента в html-странице, для которого надо применить
или изменить стиль CSS.

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

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

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

H1 {
font-size: 11pt;
}

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

Селектор по классам

Селектор по классу является универсальным в CSS. Записать его можно следующим образом: перед названием класса пишем точку, а уже потом в фигурных скобочках указываем необходимый нам стиль:

.red {
font-family: tahoma, sans-serif;
color: red;
font-size: 11pt;
}

Пример использования селектора по классу. Применим данный стиль к заголовку H1 в html странице:

Заголовок страницы

Из примера выше видно, что применяется атрибут "class" с заданным названием CSS стиля "red ".
Другой пример. В html части пишем:

Данный заголовок синего цвета, так как к нему применен соответствующий класс

id ".

В html документе это будет выглядеть так:

Зададим стиль для данного параграфа

В документе CSS:

p#newstyle { color: blue; font-size: 12px;}

В результате, для данного параграфа будет применен шрифт синего цвета и размером 12px.

Контекстный селектор

Не менее нужным компонентом является контекстный селектор .
Например, на сайте возникла необходимость заголовки "H1", заключенные тегом bold выделить красным цветом:

H1 bold { color:red ; }

Как видим, в первую очередь пишется заголовок H1, ставится пробел, тег bold а затем в скобочках заданный нами стиль. Выразить словами это можно так: "При наличии внутри заголовка H1 тега bold текст должен быть красного цвета".

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

Следующая страница -

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

Селекторы в CSS

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

P{ Стили… }

В данном случае селектором выступает p – тег абзацев. Такое правило добавит стили для всех абзацев на веб-странице.

Какими бывают css селекторы?

Селектор тега – самый простой . Он был продемонстрирован в примере. Чтобы записать его в css, нужно написать имя тега без угловых скобок. Стили будут применены ко всем элементам с таким тегом.
Table{} – стили для всех таблиц
Li{} – стили для всех пунктов списка
A{} – стили для всех ссылок

Стилевой класс – к любому элементу на веб-странице можно привязать стилевой класс. Даже к одной букве. Потом в css-файле можно обратиться к этому элементу, прописав для него собственные стили. Для этого нужно поставить точку и написать имя стилевого класса после нее. Примеры:
.about{} – правила применятся ко всем элементам, которые имеют атрибут class = "about"
.down{} – правила применятся ко всем элементам, которые имеют атрибут class = "down"
.float{} – правила применятся ко всем элементам, которые имеют атрибут class = "float"

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

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

Задается он так:

Абзац

То есть также, как и класс, только используется атрибут id в качестве значения которого используется любое слово.

Чтобы обратиться к элементу с идентификатором через css нужно написать значение id и перед ним поставить решетку.

#first{ Font-size: 22px }

Мы обратились к абзацу с id = first . Стиль применится только к нему. У остальных абзацев размер шрифта не изменится.

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

В CSS есть один интересный вид селекторов – псевдоклассы. То есть классы, которые по умолчанию есть у элементов и их не нужно дополнительно задавать. Некоторые из них работают только для ссылок, а некоторые можно применить ко всем элементам. В любом случае css псевдоклассы сильно облегчают работу веб-разработчику.

Псвевдокласс – это стилевой класс элемента, который мы на самом деле не задавали сами, просто он есть сам по себе. Например, увидев в html такой код:

Абзац

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

Для ссылок

Для полей ввода и ссылок

:focus – стиль применяется к элементу, который получает фокус ввода.
На самом деле для полей ввода появилось очень много новых классных псевдоклассов, но все они впервые введены в CSS3 , а в этой статье я хотел бы обсудить только самые простые. О CSS3 селекторах обязательно будет статья в дальнейшем.

Для всех элементов

1. :hover – стиль применяется при наведении на элемент
2. :first-child – выбрать первый дочерний элемент
3. :last-child – последний дочерний элемент
4. :nth-child() – в скобках записывается число или формула, которая определяет, какие элементы будут выбраны.
5. :first-of-type, :last-of-type, :nth-of-type() – работают практически аналогично предыдущим псевдоклассам. Разница только в том, что здесь учитывается тип элемента. Разницу можно почувствовать на примере:
   li:first-child – будет выбран первый пункт списка, но только в том случае, если в родительском блоке элемент li идет первым. Если до него стоит другой тег, не выберется ничего.
6. li:first-of-type – будет выбран первый пункт списка из всех, что есть в родителе. При этом не важно, где они располагаются в коде. Надеюсь, разница понятна.
7. :nth-last-child – работает аналогично:nth-child, но отсчет ведется от последнего элемента, а не от первого.
8. :nth-last-of-type – аналогично:nth-last-child, но с учетом типа элемента.

Это не все псевдоклассы, но самые популярные и необходимые. Собственно, все псевдоклассы помечаются в css одинаково, через двоеточие. К тому же можно комбинировать селекторы и получать интересные возможности:
a:visited:active – стили для уже посещенной ссылки, на которую кликают.
div:first-child:hover – стили для всех первых блоков в их родителях, на которые наводят курсор.

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

Объединение селекторов

Еще одно важное правило, о котором нужно знать. Селекторы стилевых классов можно записать, не отделяя их друг от друга. Например:
.class1.class2 – выберет те элементы, у которых есть оба этих класса.
.class1.class3.class8 – выберет элементы, к которым привязаны все три стилевых класса.

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

Если отделять селекторы друг от друга пробелами, то можно оттянутся до нужного нам элемента. Примеры:
Table td – выберет все ячейки, лежащие в таблицах
Ul li a – выберет все ссылки, лежащие в пунктах списков (а пункты списков в свою очередь лежат в самих списках)
.class1 p – выберет все абзацы с атрибутом class = “class1”
.class2 p span – выберет все содержимое тегов , лежащее в абзацах с классом class2.

Вкладывать и комбинировать таким образом можно сколько угодно раз. Примеры:
#header .logo span:first-letter{} – выберет первую букву в спане логотипа, который расположен в шапке
.class1.class2:hover{} – определит стиль при наведении мышки для элементов, которые имеют оба стилевых класса.

Дочерние селекторы

Если вам нужно задать стили для элементов родителя, которые являются НАПРЯМУЮ дочерними , то нужно прописать это так:
Ul > li{} – выберет пункты списка, которые вложены в него напрямую, а не лежат в других тегах
P > a{} – выберет только те ссылки в абзацах, которые лежат непосредственно в них, а не вложены в другие теги (которые, в свою очередь, уже вложены в абзацы)
Пример:

Если прописать такой селектор P > a , то применятся ли стили к ссылке в вышеприведенном примере? Нет, потому что она еще вложена в другой тег, то есть не является напрямую дочерней.

Соседние селекторы

Последнее, что мы сегодня рассмотрим. Если прописать в css так:
.class1 + .class4 {} , то этот селектор выберет элемент с атрибутом class = "class4" , и этот элемент должен стоять в HTML-коде сразу же за элементом с классом class1. Только в этом случае все будет работать. Опять же рассмотрим на примере:

Сработает ли вышеуказанный селектор (.class1 + .class4 {})? Нет, потому что элементы не стоят рядом. Между ними находится тег img . Вот если его удалить, тогда все заработает.

Итак, мы с вами рассмотрели самые основные и наиболее простые селекторы. Наверняка этих знаний вам хватит, чтобы решить 95% проблем. В следующей статье я опишу некоторые более специфические css селекторы.

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

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

Селекторы атрибутов, это те селекторы, в которых в квадратных скобках записывается атрибут, либо атрибут со значением. Несколько примеров, чтобы было понятно:
* – выбирает все элементы, которые имеют атрибут href с любым значением.
input – выбирает все input-элементы, у которых есть атрибут disable (все отключенные поля).
input – выбирает все поля, тип которых password , то есть поля для ввода пароля.
img – выбирает картинку, у которой задан атрибут src = "/logo.png" .

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

Продвинутые css селекторы атрибутов

Все нижеперечисленные селекторы чувствительны к регистру.
Поиск в начале строки
div – выбирает все div-ы, у которых есть стилевой класс, начинающийся на "block" . Таким образом, будут выбраны, например, такие блоки: "block-head", "block-3", "blocknote" . Главное, чтобы в начале значения было ключевое слово.

Поиск в конце строки
A – выбирает все ссылки, у которых адрес заканчивается на.rar . Таким образом, если у вас на сайте можно что-то скачать, то вы можете добавить иконку рядом со всеми ссылками на архивные файлы.

Поиск подстроки везде в значении
span – выберет все теги span, у которых в имени класса в любом месте этого имени содержится “art”. Таким образом, будут выбраны, например, спаны с такими классами: party, clart, art-1.

Поиск префиксов
p – выберет абзацы со стилевым классом, которые имеют имя, либо точно совпадающее с “first”, либо содержащие префикс first- , с которого начинается имя класса.

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

Последние два варианта редко где применяются и едва ли вам часто пригодятся, но для общего развития все-таки можно о них знать.

Для чего могут пригодиться селекторы атрибутов

С помощью подобных селекторов можно выбирать многие html-элемента, не задавая им стилевых классов. В некоторых случаях благодаря такому способу можно сократить код и упростить себе работу. Например, выше я приводил пример с иконкой для архивов. Тут появилась еще одна идея. Например, на своем сайте вы часто ссылаетесь на один другой ресурс (википедию, скажем) и хотите рядом с ссылками на википедию отображать специальную иконку, которой у других ссылок быть не должно.

Реализовать это можно так:

A {css-правила}

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

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

О новых css3 селекторах, о которых не писал в прошлых статьях.

Улучшение работы с формами

Это новые псевдоклассы. В основном все они касаются новых возможностей форм.
:enabled – псевдокласс выберет все активные поля. То есть те, в которые можно что-то записать или они хотя бы доступны для чтения.
:disabled – противоположный псевдокласс, выбирает все заблокированные поля. Соответственно, с его помощью вы можете добавить дополнительные стили таким полям.
:read-only – выбор всех input , которые доступны только для чтения.
:read-write – выбираются все поля, которые доступны для редактирования.

Добавление стилей с учетом валидности

Также появились очень интересные псевдоклассы, с помощью которых вы можете назначить стили в зависимости от валидности или невалидности введенного значения. Раньше это можно было сделать только с помощью JavaScript .
:valid – выбирает все поля, введенное значение в которых удовлетворяет требованиям. Сами требования обычно задают с помощью атрибута pattern. Также может зависеть от типа поля. Например, поле, в котором пишется адрес электронной почты, будет считаться невалидным, если во введенном значении нет @ .
:invalid – соответственно, выбирает все невалидные поля, в которых значение не соответствует тому, что ожидается. Например, вы можете сделать цвет текста в таких полях красным:

Input:invalid{ Color: red; }

Теперь если мы пишем неправильные значения в полях, текст становится красным. Соответственно, можно также использовать картинки галочки и крестика для того, чтобы показывать пользователю, правильно ли он заполнил все.

Стили для обязательных полей

Также хотел бы отметить, что соответствующий псевдокласс появился и для обязательных полей.
:required – выберет элементы, у которых есть данный атрибут. То есть все поля, обязательные к заполнению.
:optional – противоположный класс, выберет поля, которые являются необязательными.

Псевдокласс:not

:not является своего рода антиселектором, который позволяет определить, к каким элементам НЕ ПРИМЕНЯТЬ стили. Пару примеров.
A:not(:last-child){} – выберет все ссылки на странице, кроме последней.
.nav:not(li){} – выберет все элементы с классом nav , но это не должны быть пункты списка (li).
#article p:not(.special:first-child) – выберет все абзацы в блоке article , кроме первого абзаца с классом special.

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

Вот такой вот нужный иногда псевдокласс, он нужен не только в теории, но и на практике. Ах да, еще же вы можете продолжить составление селектора после:not (). Например:
Div:not(#header) .wrap – выбирает все дивы c классом wrap , кроме дива с id = "header"

Это были селекторы, которые появились в CSS3.

Приоритет css селекторов

Чтобы определить, какие стили являются более приоритетными, пользуйтесь простыми правилами:
Идентификатор является самым приоритетным селектором. Если у элемента есть стилевой класс и id , и в обоих назначены одинаковые свойства с разными значениями, то будет выполнены те стили, которые записаны для идентификатор.

Класс является более приоритетным селектором, чем селектор тега (p, table, ul). Псевдокласс имеет такой же вес, что и простой класс. p:first-line приоритетнее, чем.firstline , потому что во втором селекторе просто класс, а в первом — селектор тега + псевдокласс.

Еще одно полезное правило — чем конкретнее селектор, тем более приоритетными являются стили для него. Например, между body и p битву выигрывает абзац, поскольку это более конкретный селектор, чем body (потому что это вся страница, то есть не очень конкретно). Table p , в свою очередь, конкретнее, чем просто p . В общем, просто знайте о таких правилах.

Итог

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

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

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

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

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

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

Виды css селекторов

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

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

Простые селекторы

• Универсальный селектор – отвечает за выбор вообще всех элементов в документе. Задается звездочкой. Обычно применяется для обнуления стилей браузеров, установленных в них по умолчанию, чтобы у всех, кто будет заходить на сайт не уплыло оформление в случае использования каких-то собственных настроек браузера или же различных плагинов…

  * { какой- то стиль; }

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

  h1 { какой- то стиль; }

• – применит правило цсс ко всем тегам с конкретным названием класса. Задается точкой с написанным сразу после нее названием класса. Пожалуй самый часто встречающийся в верстке селектор. Обычно используется, чтобы задавать различные стили оформления тегам одинаковым по типу, но разным по функциональному назначению.

  LeftColumn { какой- то стиль; }

• Селектор идентификатора – применяется для оформления уникальных элементов на странице. Задается решеткой после которой идет название id. Используется, если нужно оформить один конкретный элемент страницы.

  #alertButton { какой- то стиль; }

• – выбирает теги у которых присутствует атрибут. Задается названием атрибута в квадратных скобках. Может использоваться как для оформления группы тегов в которых просто присутствует заданный атрибут, так и для группы тегов в которых присутствует заданный атрибут с определенным значением.

  [ type] { какой- то стиль; } [ type= "submit" ] { какой- то стиль; } input[ type= "submit" ] { какой- то стиль; }

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

• Селектор потомка – выбор потомков (тегов находящихся внутри другого тега) элементов. Задается через пробел (родитель – пробел – потомок).

  div p { какой- то стиль; }

• Селектор дочернего элемента - выбор элемента непосредственно вложенного в другой элемент. Задается символом «>» (родитель-галочка-дочерний элемент). Дочерний элемент отличается от потомка тем, что следует непосредственно после родителя (первый уровень вложенности). В то время как потомком считается любой тег внутри другого не зависимо от уровня вложенности.

  Sidebar> ul { какой- то стиль; }

• Селектор сестринского элемента – выбирает тег идущий сразу после другого тега (не заключенный внутрь, а идущий далее). Задается плюсом (первый элемент – плюс – сестринский элемент). На практике используется редко. Обязательным условием применение является наличие общего родителя для всех элементов объединенным знаком «+».

  h1+ p { какой- то стиль; }

Псевдоклассы и псевдоэлементы

Вышеперечисленная классификация селекторов CSS зависела исключтиельно от разметки документа. Если мы хотим задать изменение внешнего вида элементов в зависимости от изменения его состояния на странице (к примеру смена цвета кнопки при наведении), то мы можем использовать селекторы псевдоклассов и псевдоэлементов .

• Помните, что в отличие от html в CSS регистр букв имеет значение. Тоесть класс.active и.Active это не одно и то же! Они применятся к разным элементам, если таковые есть в документе.
• Называйте селекторы для оформления так, чтобы потом в них не запутаться: .leftColumn – хорошее название, .left – зависит от ситуации, но уже неочень, .llll – фигня какаято, ты сам то скажешь не глядя на код откуда этот класс взялся?
• Еще раз напоминаю – если элемент на странице один, такой весь уникальный, то для него используем id, если же есть вероятность, что появится еще один такой или же просто подобных элементов на странице несколько, то пользуйтесь для оформления классами.

Подводя итоги

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

После освоения общих принципов взаимодействия и создания селекторов вы забудете о проблемах с оформлением веб-документов. Хорошее знание селекторов позволяет значительно сократить время верстки html страниц.

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

Сегодня мы рассмотрим такое понятие как селекторы CSS и как с их помощью мы можем сократить нашу разметку HTML, сделав её чище.

Селектор CSS – это тот элемент, к которому мы собираемся применять CSS свойства. Слово «селектор» говорит само за себя, оно обозначает выбор.

P {color: red} div span {background: green} ul li {list-style: none}

Селекторы class и id

В примере выше мы имеем 3 селектора – это p, div span, ul li. То есть весь наш файл стилей состоит из селекторов и их свойств. Наиболее удобно и наглядно, особенно новичкам, брать за селектор имя класса (class) тега или уникальный идентификатор (id) тега. Чтобы присвоить класс или идентификатор какому-либо тегу, мы должны указать их среди атрибутов этого тега. У конкретного тега может быть максимум 1 идентификатор и бесконечное число классов. Пример:

текст в первом диве

текст во втором диве

текст в третьем диве

На что стоит обратить внимание:

• Классы и идентификаторы можно присваивать любым (всем) тегам.
• Каждый id уникален и не может повторяться в пределах одной страницы, в отличие от классов!
• Один и тот же класс может быть присвоен любым тегам и может повторяться любое количество раз на странице.
• Если мы хотим задать конкретному тегу несколько классов, мы просто задаём их через пробел.
• Имена классов и идентификаторов могут совпадать, при этом кроме имени, ничего общего между ними не будет.

Как обратиться к классу или id в файле стилей (CSS)?

Смотрим пример:

#first {color: red;} /* обращаемся к id с именем first */ .second {color: blue;} /* обращаемся к классу с именем second */ #first .second {color: orange;} /* обращаемся к классу с именем second, ТОЛЬКО если он находится ВНУТРИ тега с идентификатором first */ .first .third {color: grey;} /* обращаемся к классу с именем third, ТОЛЬКО если он находится ВНУТРИ тега с классом first */

В нашем случае последние две инструкции не сработают, так как у нас нет классов, вложенных внутрь тегов с заданными атрибутами. Как вы могли заметить, чтобы обозначить, что мы обращаемся именно к id, нужно перед его именем без пробелов поставить знак решётки (#), если мы обращаемся к классу, то перед именем класса должны поставить точку (.).

Использование классов и идентификаторов очень удобно, но оно увеличивает нашу HTML разметку, в идеале (которого никогда нет) мы вовсе не должны их использовать, вместо них мы будем использовать комбинации и группировки селекторов, о них и будет вся остальная часть статьи, но! Но это совсем не означает, что вы должны полностью отказаться от использования классов и идентификаторов, просто вы должны иметь ввиду, что очень часто вместо создания нового class или id можно обойтись приёмами, описанными ниже и они также могут быть вполне удобны.

В чём различие class и id?

Кроме приведённых выше различий, стоит ещё отметить, что у свойств заданных id приоритет выше, чем у свойств, заданных классу. То есть, если мы напишем:

текст в диве

То цвет текста станет красным, несмотря на то, что класс находится ниже по коду и если бы у них был равный приоритет текст стал бы синим.

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

Myclass {свойства} /* применятся ко всем тегам, которые содержат класс myclass */ div.myclass {свойства} /* применятся только к тегам div, которые содержат класс myclass */

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

текст

Вроде бы осталось только одно неоговорённое отличие, и оно касается темы, которую в ближайшем будущем я не планировал затрагивать на этом блоге – Javascript. Но всё же обязан доложить вам о нём: если вы хотите обратиться к элементу с помощью Javascript, то для этой цели очень удобным будет наличие id у этого элемента. Чтобы обратиться к элементу по его классу в Javascript нет такой встроенной возможности, вам придётся использовать вспомогательные функции + это не всегда кроссбраузерно.

Итог: id и class используем, но в меру, при этом всегда спрашивая себя, а можно ли здесь обойтись без них и насколько это целесообразно.

Родственный селектор

Div p {color: green;} /* Селектор по потомку */ p {color: red;} /* селектор по тегу */

Но как я уже писал в предыдущей статье, в первом случае CSS свойства применятся ко всем тегам p вложенным на ЛЮБУЮ глубину тега div. А что если мы хотим применить свойства только к прямым наследникам, то есть к первому уровню вложенности:

Третий уровень

Прямой наследник (первый уровень)

Второй уровень

Прямой наследник (первый уровень)

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

Div>p {color: blue;} /* только первый уровень вложенности */ div p {color: blue;} /* абсолютно все параграфы внутри div */

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

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

* {margin: 0; padding: 0;}

Так у меня начинается каждый новый проект, советую вам делать также. Универсальный селектор распространяется на все элементы страницы (теги), но имеет нулевой приоритет (ниже только отсутствие приоритета вовсе). Его обычно используют, чтобы перебить CSS свойства, которые браузеры устанавливают по умолчанию для некоторых тегов. Представьте себе, и такое имеет место быть! Достаточно многим тегам браузеры по умолчанию устанавливают свои свойства, например, тегу гиперссылки синий цвет текста и подчёркивание, тегу body они задают поля (padding) и тд. Нам это запоминать, знать и использовать совсем не к чему, поэтому самые банальные свойства мы сразу же убираем с помощью универсального селектора, однако я бы не советовал дописывать в него что-то ещё (или дописывать, но аккуратно), несмотря на наименьший (нулевой) приоритет универсального селектора, он в некоторых случаях всё же может перебить вам другие свойства, так что имейте это в виду.

Кстати говоря, при работе с селекторами, как и при любой работе связанной с вёрсткой макета очень удобно использовать просмотр элементов страницы. Если вы ещё не в курсе таких вещей как Opera Dragonfly, Firebug и веб-инспекторы в целом, то вам без преувеличений срочно нужно прочесть статью по ссылке выше! А кто уже использовал подобные вещи, прошу дальше за мной.

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

В отличие от классов, псевдо-классы не нужно указывать в HTML разметке, они сами вычисляются браузером. У нас есть 4 статических псевдо-класса и 3 динамических псевдо-класса, без учёта CSS 3, о нём ближе к концу. К статическим относятся (:first-child, :link, :visited, : lang()):

Прямой наследник (первый уровень)

Третий уровень

Прямой наследник (первый уровень)

Второй уровень

Прямой наследник (первый уровень)

Результат:

Естественно можно комбинировать селекторы как захотим, например:

Div>span p:first-child {color: green;} /*сработает, если p является первым ребёнком своего родителя и находится внутри тега span, который является прямым потомком тега div */

Название представленного выше псевдо-класса говорит само за себя first-child - первый ребёнок.

Следующие два статических псевдо-класса применяются только к тегу гиперссылки (:link, :visited), они применяют CSS свойства в зависимости от того, посещалась данная ссылка конкретным пользователем или нет:

A:link {color: blue;} /* у не посещённых ссылок задаём синий цвет, и по умолчанию они подчёркнуты */ a:visited {color: green; text-decoration: none;} /* у посещённых ссылок текст будет красным, убираем подчёркивание */

Псевдо-класс:lang() используется для задания разного стиля оформления в зависимости от языка. В скобочках указывается язык, к которому нужно применить оформление. Это можно использовать, например, для задания разных стилей кавычек в цитатах:

Q:lang(de) {quotes: "\201E" "\201C";} /* кавычки для немецкого языка */ q:lang(en) {quotes: "\201C" "\201D";} /* кавычки для английского языка */ q:lang(ru) {quotes: "\00AB" "\00BB";} /* кавычки для русского языка */

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

Динамические псевдо-классы

Динамические псевдо-классы – это:active, :hover, :focus. Динамические псевдо-классы срабатывают по определённому действию на странице, они работают для всех тегов, а не только для ссылок как многие думают и даже утверждают в своих блогах! Рассмотрим их применение:

P:active {background: red;} /* стиль, который применится к тегу по нажатию на него (клику мышью) */ input:focus {width: 400px;} /* стиль, который применится к элементу, на котором в данный момент фокус (работает, к примеру, для текстовых полей ввода: textarea, input). В данном случае по взятию в фокус, ширина input станет равна 400 пикселей, удобно использовать для красивого эффекта удлинения поля по клику. */ div:hover {background: green;} /* срабатывает по наведению курсора на элемент, в основном применяется для создания красивого эффекта при наведении на ссылки. */

Примените данные стили к нашему примеру выше, и вы сами всё увидите.

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

Смежные селекторы – это ближайший сосед ниже по коду, не ребёнок! Очень удобный селектор:

текст в параграфе первого div

текст в параграфе ВНЕ div

текст в параграфе второго div

текст в спане

снова параграф вне div

Результат:

Обобщённые смежные селекторы

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

текст в диве

параграф

параграф

параграф

текст в спане

параграф

параграф

параграф в диве

параграф в диве

текст в спане

параграф

Результат:

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

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

P {свойства} /* применить ко всем тегам p, у которых есть атрибут align */ p {свойства} /* где значение атрибута align равно center */ p {свойства} /* где значение атрибута align начинается на center */ p {свойства} /* где значение атрибута align содержит center */ p {свойства} /* где site может находиться среди других слов, отделенных пробелами () */ p {свойства} /* где значение атрибута class состоит только из слова site или начинается им, после чего ставится дефис и пишется остальная часть значения ( или ) */ p {свойства} /* где значение атрибута align заканчивается на center */

CSS 3 псевдо-классы

Вы уже ознакомились со всеми основными селекторами и вам на первых парах этого должно хватить с горкой. Однако в CSS 3 появилось множество новых псевдо-классов, теперь мы можем брать не только первого ребёнка, но и любого другого по счёту, можем идти от обратного, брать не первого, а последнего ребёнка и так далее и тому подобное. Всё это очень удобно и практично, разве что у вас могут возникнуть проблемы со старыми версиями IE. Давайте соберём все силы в кулак и пробежимся по всем оставшимся селекторам, чтобы потом уже вы могли иметь их ввиду при вёрстке собственного макета.

:last-child – аналог:first-child, только берёт не первого, а последнего ребёнка.

:only-child – сработает, если элемент (тег) является единственным ребёнком.

:only-of-type - сработает, если элемент (тег) является единственным ребёнком своего типа.

:nth-child() – обращается к потомкам по их порядковым номерам, можно обращаться ко всем чётным или нечётным (even или odd) числам. Например:

параграф

параграф

параграф

текст в спане

параграф

параграф

параграф

параграф

параграф

параграф

Результат:

:nth-last-child – работает также как и предыдущий, но отчёт начинается с конца.

:first-of-type – первый ребёнок своего типа в рамках прямого родителя.

:last-of-type – последний ребёнок своего типа в рамках прямого родителя.

:empty – сработает для тех тегов, внутри которых нет ни одного символа (без текста).

:not() – делает исключение для заданных элементов. Пример:

параграф с классом roll

параграф

параграф

параграф с классом roll

Результат:

Управление полями, формами, переключателями и флажками в CSS

:enabled - применяется к доступным элементам интерфейса как формы, кнопки, переключатели и тд. По умолчанию все элементы интерфейса являются доступными.

:disabled - применяется к заблокированным элементам интерфейса как кнопки, формы и так далее. Элементы интерфейса являются заблокированными, если к ним в HTML добавить атрибут disabled или в XHTML disabled=”disabled”.

:checked – применяется к элементам интерфейса типа флажки (radio) и переключатели (checkbox), когда они находятся во включённом положении.

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

Псевдо-элементы, аналогично псевдо-классам вычисляются браузером автоматически, нам об этом заботиться не нужно. Чтобы не путать псевдо-элементы с псевдо-классами в спецификации CSS 3 было решено использовать двойное двоеточие, вместо одинарного, как было в CSS 2. Поэтому в Интернете вы можете встретить псевдо-элементы как с одинарным двоеточием так и с двойным – и тот и тот вариант верен. Однако для лучшей совместимости с IE рекомендуют использовать одинарное двоеточие.

:first-line – первая строка внутри блочного или табличного элемента.

:first-letter – первая буква внутри блочного элемента.

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

Преимущества оптимизации HTML за счёт CSS

Суть всего написанного выше отчасти заключается в том, чтобы отказаться от повсеместного использования атрибутов class и id в HTML, тем самым возложив всё на плечи могучих таблиц стилей.

Внешние файлы стилей, как и внешние файлы Javascript отлично кэшируются, а это значит, что зайдя первый раз на любую страницу вашего сайта, браузер пользователя запоминает эти файлы и более их не скачивает, в отличие от самой страницы сайта, то есть вашей HTML разметки, картинок и текста, которую браузер загружает снова и снова. Тоже самое касается и поисковых систем, им вообще нет дела до ваших внешних файлов, но вот до объёма и содержания вашей HTML разметки им дело есть. Поисковым системам приходится сканировать всю структуру страницы и в ваших же интересах помочь им в этом, сосредоточить их усилия на контенте, а не на громоздкой стене разметки состоящей из кучи классов и идентификаторов или того хуже – Javascript обработчиков событий и CSS стилей прямо в атрибутах тегов (и такое до сих пор бывает).

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

Подытожим: благодаря оптимизации и сокращению HTML мы имеем совсем небольшой выигрыш в скорости загрузки сайта и в SEO (поисковой оптимизации), а также более чистый код.