Вряд ли кто-то будет спорить с тем, что без хорошего фундамента по математике и физике практически невозможно совершать невероятные открытия в естественных науках, равно как без знания химии изобретать новые лекарства. В любой отрасли есть основополагающие знания, прочный фундамент на котором строится успешная работа.
При работе с каскадными таблицами стилей одним из обязательных к изучению вещей являются CSS селекторы. Хорошее знание CSS селекторов и умение ими пользоваться - это та прочная основа, на которой строится успешная работа по внешнему оформлению и разметке сайта.
Хотя с интеграцией CSS 3 селекторов стало еще больше, познакомиться с ними и использовать их по назначению не составит большого труда, потому как все они имеют одну цель - разгрузить HTML код. С ней они справляются настолько хорошо, что для каждого элемента веб- страницы можно использовать несколько видов селекторов. Потому как современный CSS определил для нас довольно широкий арсенал, я разделил данный урок на следующие блоки:
Создание CSS правил в 2 словах
Каскадная таблица стилей представляет собой набор CSS правил, каждое из которых призвано форматировать определенный элемент веб-страницы. Само правило состоит из 2 частей:
- Селектор
- Блок объявлений
При помощи селектора мы указываем элемент, на который будем воздействовать. С помощью блока объявлений мы задаем параметры для выбранных элементов. Блок объявлений в свою очередь состоит из 2 частей:
- Свойство
- Значение
Свойство служит для выбора параметра, который мы будем настраивать.
Селектор тегов
Самый простой и универсальный вид селекторов. Суть его состоит в том, что мы напрямую указываем форматируемый тег. Например, для отображения всех абзацев шрифтом Verdana мы указываем следующую запись:
P {
font-family: Verdana;
}
Если мы захотим принять шрифт Verdana для заголовков первого уровня, будет справедлива следующая запись:
H1 {
font-family: Verdana;
}
Основной и единственный принцип этого вида селекторов заключается в указании тега, который нужно отформатировать.
Групповой вид селекторов
Создание одинаковых блоков объявлений для разных тегов не является ошибкой. Однако, для грамотных веб-мастеров подобная запись неприемлема. В примере выше мы придали одинаковый шрифт для 2 тегов, причем сделали это создав два отдельных правила, хотя можно было обойтись и одним. Для этого достаточно перечислить форматируемые теги через запятую:
P, h1 {
font-family: Verdana;
}
Групповой вид селекторов очень удобен и способен значительно сократить объем css файла. Как уже было сказано до этого, достаточно перечислить форматируемые теги через запятую.
Универсальный селектор
А что делать если нужно придать одни и те же значения для всех элементов веб-страницы? Перечислить все теги через запятую? Вовсе не обязательно, вместо перечислений всех тегов стоит просто указать "*". Да, именно звездочку, при помощи которой выделяются все элементы веб-страницы.
* {font-family: Verdana;
}
Селектор классов
Как видно из названия, при помощи этого вида селекторов мы выбираем элементы по определенным классам. При необходимости в форматировании блочных элементов с классом "container" используется следующая запись:
Container {
font-family: Verdana;
}
Достаточно прописать точку и название класса. Хочется отметить что все элементы, вложенные в блочный элемент с классом "container" также будут отформатированы.
Селектор идентификаторов
Здесь та же история как и с классами. Разница лишь в том что вместо точки мы прописываем - "#". Для форматирования абзаца с id "unique" необходима следующая запись:
#unique {
font-family: Verdana;
}
Древовидная форма HTML
Довольно часто можно стать свидетелем того, как новички не могут подобрать правильный вид селектора. Причиной этого является неясное понимание древовидной формы гипертекстовой разметки.
Для решения этой проблемы будет нелишним освежить память и вспомнить отношения тегов между собой в HTML.
древовидная форма HTML
Как видно из иллюстрации выше, тег body является предком для всех остальных тегов. Вложенный в него тег div является его дочерним элементом, сам будучи родителем тегов h2, p и предком тега a. А маркированный список первого уровня имеет 3 дочерних (li, ul) и 2 потомственных элемента (li).
Все вышеперечисленные теги вписываются в три вида отношений:
- предок - потомок
- родитель - дочерний элемент
- сестринские элементы (теги одного уровня с общим родителем)
Важно понимать, что в момент форматирования какого-либо элемента часто его потомки наследуют эти же свойства. Для точечной настройки определенных тегов существуют специальные селекторы, с которыми мы познакомимся дальше.
Селектор потомков
В случае необходимости форматирования потомков определённого тега мы пользуемся соответствующим селектором. Например, для форматирования всех вложенных абзацев в блочный элемент (div) используется следующая запись:
Div p {
color: blue;
}
Вначале мы указываем предка, затем через пробел - потомственный элемент. Запись выше означает: "Отобразите синим цветом все абзацы находящиеся внутри тега div". Для форматирования всех ссылок внутри абзаца мы пишем следующее:
P a {
color: red;
}
Запись выше означает: "Отобразите красным цветом все ссылки, находящиеся внутри абзацев". Как видите - все очень просто.
Дочерние селекторы
Если присмотреться на разметку современных сайтов, то невооруженным глазом можно увидеть нечто наподобие матрешки - блочные элементы обернуты в другие блочные элементы, находящиеся внутри других блочных элементов.
Все бы хорошо, но это порождает определенные проблемы. "Какие именно?" - спросите вы. Ну, хотя бы то что в случае придания определенных свойств "предку" они унаследуются потомственными элементами. Чтобы мы могли точечно выбирать элементы для форматирования, были придуманы некоторые виды селекторов, в том числе и дочерний.
Давайте представим что нам необходимо воздействовать только на дочерние абзацы блока с классом "info", потомственные нас не интересуют. Для этого мы используем дочерний селектор:
Info>p {
font-family: Arial;
}
Запись выше означает: "Отобразить шрифтом Arial все абзацы, являющиеся дочерними блоку с классом info". Если же нам нужно выделить дочерние пункты маркированного списка, аналогично пишем следующее:
Ul>li {
color: blue;
}
Запись выше означает: "Перекрасить все дочерние пункты маркированного списка в синий цвет". Такое правило CSS вполне может пригодиться, ведь внутри одного списка вполне может располагаться другой.
В некоторых случаях может возникнуть необходимость выделения не всех дочерних элементов, а только некоторых. Для управления первым дочерним элементов необходимо воспользоваться псевдоэлемнтом :first-child
Wrapper:first-child {
font-family: Tahoma;
}
Правило выше означает: "Отобразить первый дочерний элемент класса "wrapper" шрифтом Tahoma".
Псевдоэлемент :last-child помогает управлять последним дочерним элементом:
Wrapper:last-child {
font-family: Tahoma;
}
У нас также есть возможность выбирать любой по счету дочерний элемент при помощи псевдоэлемента :nth-child
Wrapper:nth-child(even) {
color: pink;
}
Запись выше означает: "Выделить все чётные дочерние элементы класса "wrapper" розовым цветом". Для выделения нечетных элементов even нужно заменить на odd .
Для выделения каждого 5 элемента необходимо добавить 5n. Если же стоит выделить каждый 4-й элемент начиная с шестого необходимо в скобках указать - 4n+6. Значения в скобках можно менять по-своему усмотрению:
Wrapper:nth-child(3n+2) {
border-bottom: 1px solid black;
}
Правило выше указывает на необходимость подчеркнуть каждый третий дочерний элемент начиная со второго.
Псевдоклассы
Порой бывает необходимо управлять элементами веб-страниц, которые не имеют тегов. Для решения этих задач существуют псевдоклассы и псевдоэлементы. Для управления разными состояниями ссылок есть 4 вида псевдоклассов:
A:link Отвечает за внешний вид ссылки в спокойном состоянии a:hover Отвечает за внешний вид ссылки в момент наведения на неё курсором мыши a:active Отвечает за внешний вид ссылки в момент нажатия на неё a:visited Отвечает за внешний вид уже посещенной ссылки
Пример того, как могут быть использованы эти псевдоклассы:
A:link {
color: blue;
}
a:hover {
color: orange;
}
a:active {
color: red;
}
a:link {
color: grey;
}
Запись выше означает: "Выделить синим цветом ссылки в обычном состоянии. Отображать их оранжевым цветом в момент наведения по ним. Отображать ссылки красного цвета в момент нажатия. Выделить серым цветом уже посещенные ссылки."
Псевдокласс:hover
Этот псевдокласс можно использовать не только по отношению к ссылкам, ведь мы можем наводить мышкой на любые другие элементы веб-страницы. Например:
Img:hover {
border: 1px solid grey;
}
Запись выше означает: "Выделить все изображения рамкой серого цвета в момент наведения по ним." Таким же образом можно настраивать любые другие элементы в момент проведения по ним курсором.
Псевдоэлементы
При помощи псевдоэлементов :before и :after мы можем добавлять тот или иной контент впереди или в конце элементов веб-страницы. При необходимости добавить что-нибудь впереди абзацев мы пишем следующее:
P.attention:before {
content: "Внимание!";
}
Запись выше означает: "Добавить слово "Внимание!" перед абзацами с классом attention". Для добавления в конце элемента мы пишем:
P.attention:after {
content: "Внимание!";
}
Псевдоэлемент :focus помогает управлять внешним видом полей для ввода:
Input:focus {
background-color: blue;
font-style: italic;
}
Запись выше означает - "Окрасить фон полей для ввода в синий цвет и использовать курсивное начертание шрифта в момент набора текста".
При помощи псевдоэлемента ::selection мы можем выбирать цвет шрифта и задний фон в момент выделения текста. По умолчанию текст выделяется синим цветом, а мы можем написать следующее:
::selection {
color: white;
background-color: black;
}
Правило выше означает: "Отображать фон черным, а цвет шрифта белым в момент выделения текста". Этот селектор незнаком для браузера Firefox, и для решения этой задачи необходимо перед правилом добавить следующее:
::-moz-selection {
color: white;
background-color: black;
}
Дочерние элементы по типу
Данный вид селекторов ценен тем, что мы можем управлять не просто дочерними элементами, а теми которые относятся к определенному типу.
Например, мы можем выделить первый дочерний нумерованный список блока с классом container:
Container>ol:first-of-type {
color: yellow;
}
Плюс ко всему мы имеем в распоряжении псевдоэлементы :last-of-type и :nth-of-type , которые имитируют:last-child и:nth-child соответственно.
#main>h2:last-of-type {
color: yellow;
}
В примере выше мы выделили последний дочерний заголовок второго уровня относящийся к блоку с идентификатором main.
Селектор смежных элементов
При помощи данного вида селекторов мы можем форматировать определённый фрагмент веб-страницы, но при условии что ему предшествуют другой элемент. Например, нам нужно выделить каждый первый абзац после заголовка первого уровня. Для этого мы создаем следующее правило:
H1+p {
font: italic 20px Arial;
}
Согласно правилу выше, если между заголовком h1 и абзацем окажется что-то ещё, например изображение, то в этом случае тег p не будет отформатирован. Также вместо знака плюс можно использовать ~ (тильда) . При помощи неё будут отформатированы все маркированные списки после заголовка h1:
H1~ul {
color: orange;
}
Селектор атрибутов
Используя этот вид селектора можно форматировать элементы выбрав их по атрибуту. Для управления всеми внешними ссылками нужно указать следующее:
A {
color: aqua;
}
Запись href^="http://" означает что необходимо выделить все ссылки, начинающиеся на http://. Такие css правила имеют место быть, потому что абсолютные адреса в основном используются для внешних ссылок.
A {
color: brown;
}
У вас может возникнуть ситуация, когда нужно выделить те изображения, которые содержат в своем названии определенное слово. Возьмем к примеру интернет-магазин, где нужно сделать рамку для изображений футбольных бутс. С большой долей вероятности их названия содержат в себе слово boots. В таком случае создаем ccs правило:
Img {
border: 2px dashed grey;
}
Знак звездочки помогает выбрать те изображения, которые в своем названии содержат слово boots.
Для выделения всех изображений, находящихся в блоке с классом relative мы создаем следующее css правило:
Relative {
border: 2px dashed grey;
}
Псевдокласс отрицания
Если вам когда-нибудь приходилось иметь дело с движком WordPress, вы должны знать что в ней все ссылки имеют абсолютный вид. Как мы рассматривали выше, при необходимости выделить внешние ссылки можно использовать селектор по атрибуту, те которые начинаются на http://. Как вы понимаете, такой вариант решения вопроса с движком WordPress не прокатит. Но у нас в арсенале есть гениальный псевдокласс отрицания, который мы можем задействовать:
A:not() {
border: 2px dashed brown;
}
Правило выше означает: "Выделить коричневым цветом все ссылки, начинающиеся на http:// кроме тех, которые начинаются на http://mysite.com". Псевдокласс отрицания можно использовать не только с селекторами атрибутов, но и с другими простыми селекторами.
Стоит знать что для каждого селектора можно использовать только один псевдокласс отрицания. Следующая запись будет неверной - .container:not(#info):not(h3)
Наверняка вам будет сложно запомнить все виды CSS селекторов, да это и не нужно. Многие из них вы запомните в ходе работы, верстая страницу за страницей. И для того чтобы вы могли в нужный момент найти интересующий вас селектор, как говорится освежить свою память, будет весьма кстати добавить эту страницу в закладки.
На этом у меня все. Надеюсь, данный материал оказался для вас полезным. Если это так, сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу.
На этом я с вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!
Селектор служит для того, чтобы однозначно определить элемент в html документе, к которому мы хотим применить тот или иной стиль CSS .
- Селектор по элементу;
- Селектор по классу;
- Селектор по id;
- Контекcтный селектор;
Селектор по элементу
До этого момента, мы с вами работали именно с этим селектором.Т.е. в качестве селектора использовалось непосредственно имя html элемента, к которому мы хотели применить данный стиль. Т.е. написав класс например для параграфа(Р) , все параграфы на странице приобретали стиль данного класса.
P {
font-size: 12px
}
А теперь представьте ситуацию, когда необходимо сделать первый параграф в одном стиле, второй в другом, третий в третьем и.т.д. Тут нам на помощь придет селектор по классу .
Селектор по классу
Давайте разберем как создать универсальный класс в CSS . А сделать это очень просто: сначала ставим точку, затем сразу, без пробела, пишем имя класса, а затем в фигурных скобках стиль. Например:
.green {
font-family: arial, verdana, sans-serif;
font-size: 12px; color:green;
}
Как применить данный стиль?
Допустим мы хотим применить данный стиль к определенному параграфу в документе. Вот как это будет выглядеть в html:
Текст параграфа...
Как видите, используется атрибут class со значением названия стиля.
ПРИМЕР:
Это обычный параграф, для него используется селектор по элементу
Этот параграф зеленый, т.к к нему применили класс
А этот параграф большего шрифта и красный
Этот параграф снова обычный, по классу селектора элемента
p {
font-family:arial,verdana,sans-serif;
font-size:18px;
}
.green {color:green;}
.big_red{
font-size:28px;
color:red;
}
Указываем сначала базовый стиль для всех параграфов(селектор по элементу), а потом уже, если хотим в каком-либо параграфе что-то изменить, создаем для него специальный стиль (селектор по классу) и присваиваем его этому параграфу. Когда мы создаем этот самый специальный класс, мы должны писать туда только те свойства, которые хотим добавить, или изменить, по отношению к базовому стилю для этого элемента.
Классы из примера выше, можно применить не только к параграфу, но и, например, к заголовкам, или, например, к ячейке таблицы, или ко всей таблице, короче они могут применяться везде, где они могут на что-то повлиять (в данном случае везде, где есть параметр цвет, и текст).
Сделать так, чтобы класс действовал только на определенный элемент(например параграф) можно указав название элемента перед точкой:
P.green {color:green;}
Теперь класс green не будет действовать ни на что другое, кроме элемента P.
Селектор по id
Данный селектор применяется если необходимо выделить один единственный элемент, уникальный, отличный от всех остальных в документе. К примеру, выделим первый заголовок на странице определенным образом:
html- часть:
<Н1 id="firstheader"> Первый заголовок на странице
css - часть:
H1#firstheader { color: red; font-weight: bold; text-align: center }
Как видите в html-части вместо атрибута class здесь употребляется атрибут id , а в css - вместо точки употребляется знак #.
В принципе, то же самое можно сделать и с использованием селектора по классу J
Контекстный селектор
Это очень полезная вещь. Допустим, у нас есть страничка с таблицами и параграфами текста, причем и в таблице, и в параграфах встречаются выделенные жирным шрифтом(strong) слова. Необходимо сделать так, чтобы слова в параграфе, которые выделены жирным, стали зеленого цвета. Так вот:
p strong {color:green }
Т.е. в начале P затем пробел, затем STRONG, а уже потом стиль. Читается эта строчка примерно так: Если внутри элемента P имеется элемент STRONG то элементу strong присвоить стиль зеленого цвета.
Вложенность может быть любого уровня. Вот еще пример: «Если вдруг внутри ячейки таблицы (td ) , встретится параграф (P) , внутри которого будет слово выделенное жирным (STRONG ), то пусть это слово станет красным! «
td p strong {color:red;}
Всего существует семь типов селекторов. Это:
- Селектор тэга
- Селектор класса
- Селектор id
- Универсальный селектор
- Селектор атрибута
- Селектор псевдокласса
- Селектор псевдоэлемента
Самый простой – он записывается, как название тэга без угловых скобок. Например, div .
Данной записью мы говорим, что все содержимое всех тэгов
Если нам нужно какому-то одному параграфу задать какой-то, допустим, фон. То мы можем использовать селектор класса. Но перед тем, как писать правила, нам нужно в тэге
Данного параграфа написать атрибут class , в значении которого можно писать все, что угодно (помимо латинских букв, можно использовать знак дефиса и цифры), но нужно дать название нашему селектору так, чтобы потом было самому понятно, к чему он относится. Затем в таблице стилей, либо в тэге
нашего документа между мы пишем точку, а после нее значение атрибута class , и в фигурных скобках задаем правила для данного параграфа.Если в документе:
То
в таблице стилей:
Pravilo {
…
}
При этом, разные элементы документа могут иметь одни и те же значения атрибута class . То есть мы можем несколько тэгов отнести к одному и тому же классу и их содержание будет каким-то образом оформляться. Это нам позволяет создать универсальное правило, например, для выделения важных частей текста, а в документе просто добавлять атрибут class в тэги.
Первое, о чем стоит сказать – это то, что значение атрибута id в HTML – уникальное. В отличие от class, мы не можем его приписать любому тэгу, а только одному! В таблице стилей он изображается в виде знака решетки, а в документе нужно к тэгу добавить атрибут id с каким-то значением.
Если в документе:
То
в таблице стилей:
#pravilo{
…
}
Универсальный селектор записывается, как "звездочка". Если в таблице задать правила для этого селектора, то это правило будет применяться к содержимому всех тэгов.
*{
…
}
Все эти четыре типа селекторов работают на сегодняшний день во всех браузерах. Но есть селекторы, которые работают не везде, например, в Internet Explorer версий 7,6 и ниже.
Записываются они так:
{
…
}
Этой записью мы говорим, что все, что заключено в тэги, имеющие атрибут title , будет иметь такой вид, который прописан в фигурных скобках. Причем абсолютно не важно, имеет ли этот атрибут какое-нибудь значение. Он может быть пустым и записан так:
Все равно к тэгу
Будут применены правила, которые записаны в селекторе .
Если нужно, чтобы правила были применены к атрибуту (например, к title
) с определенным значением, тогда следует записать так:
{
…
}
Если нужно, чтобы правила были применены к содержимому определенного тэга с каким-то атрибутом (например, с title ), имеющим определенное значение, то надо записать так:
p {
…
}
Если мы хотим, чтобы правила были применены к содержимому тэгов с атрибутом title (или каким-то другим), в значении которого содержится какое-то слово целиком, то нужно записать это так:
{
…
}
title (или другой), в значении которого встречается не слово целиком, а просто какой-то кусочек текста (например, в слове каспийский содержится каспий). Тогда нужно записать так:
{
…
}
Если мы хотим, чтобы правила были применены к содержимому тэга, имеющего атрибут title (или другой), значение которого начинается с каких-то символов (букв). Тогда нужно записать так:
{
…
}
Если мы хотим, чтобы правила были применены к содержимому тэга, имеющего атрибут title (или другой), значение которого заканчивается какими-то символами (буквами). Тогда нужно записать так:
{
…
}
Селекторы атрибутов – это очень мощный инструмент, который, к сожалению сейчас не так широко используется, "благодаря" Microsoft и его IE 6,7 и ниже. Но, в скором времени, когда отомрет окончательно IE версиий 6,7 и ниже, данные селекторы прочно войдут в CSS и будут широко применяться.
Селекторы псевдоклассов отвечают за вид содержимого элементов, когда оно находится в каком-то состоянии.
Это селекторы:link, :visited, :active, :hover, :focus и:first-child. Первые два относятся только к ссылкам, т.е. к содержимому тэгов , а остальные могут быть применены к любому тэгу, который имеет содержание.
:link оформляет нетронутые пользователем ссылки.
a:link {color:blue}
Этой записью мы говорим, что все нетронутые пользователем ссылки на документе или документах будут окрашены в синий цвет.
a:visited {color:red;}
:active оформляет активный элемент (в момент клика мышкой). Может применяться к любому элементу, но в IE 6 работает только для гиперссылок.
p:active {color:red}
Этой записью мы говорим, что все параграфы в момент клика по ним мышкой будут окрашены в красный цвет (буквы).
:hover – оформляет элемент, когда на него пользователь наводит мышкой. Также может применяться к любым элементам, но в IE 6 работает только для гиперссылок.
p:focus {color:red;}
При нажатии на Tab текст в элементах будет красного цвета
:first-child – задает правила для первых "детей" всех элементов. В IE 6 не работает.
Подробнее о том, что такое дети и родители мы поговорим в другой статье, а сейчас просто скажу то, что тэг, который находится внутри другого тэга, является его "ребенком". Например, у нас есть код:
При просмотре в браузере содержимое первого тэга
Окрасится в красный цвет.
Селекторов псевдоэлементов всего два. Это:first-line и:first-letter
:first-line – первая линия (строка)
:first-letter – первый символ
Если записать:
p:first-line {color:blue}, то
во всех параграфах документа или документов первые строки окрасятся в синий цвет.
Если записать:
p:first-letter {color:blue}, то
во всех параграфах первые буквы окрасятся в синий цвет.
Оба этих селектора не работают в браузере IE 6.
Вот вроде бы и все о селекторах, если что-то упустил или где-то допустил ошибку - пишите в комментариях к материалу.
Данный материал посвящен основам оформления стилей на интернет-ресурсе при помощи селекторов.
Селекторы в 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-структура, позволяющая выбрать определенный элемент в HTML-коде и стилизовать его. Каждый из них обладает своей специфичностью, то есть может перекрывать по свойствам другие, более «слабые».
Селектор CSS по тегу и классу
Самые простые селекторы – по тегу и по классу. Селектор по тегу самый общий и выбирает все элементы с определенным тегом. Например, можно написать в свойствах CSS-код следующего вида: «p {color: blue}», где «p» – тег абзаца, а свойство «color: blue» обозначает цвет текста. В результате текст во всех абзацах окрасится в синий цвет. Селекторы по тегу можно перечислить через запятую, тогда не нужно будет писать свойство дважды.
Если некоторым абзацам присвоить какой-то класс, например «blue», тогда срабатывание селектора CSS можно настроить еще более точно. Но его запись в свойствах будет отличаться – перед названием класса появится точка. То есть, чтобы выбрать все абзацы, которым присвоен класс «blue» и окрасить их в синий цвет, нужно в свойствах CSS написать такой код: «.blue: {color: blue}». Этот селектор более специфичный, чем CSS-селектор по тегу, и сильнее его, но относится к самым простым. Существуют и более сложные правила, позволяющие выбирать небольшие группы элементов.
Особенности селекторов по идентификатору
Селекторы по id или по идентификатору более специфичны, чем по классу и по атрибуту. То есть при использовании в каскаде они будут «перевешивать» остальные подобные селекторы. Идентификаторы также помогают точно выбрать определенный элемент в коде, но их использование при оформлении страниц считается плохой практикой среди верстальщиков. Только в очень редких случаях, например при создании слайдера на CSS, такая практика допустима. Дело в том, что в пределах одной страницы может быть только один элемент с определенным id. Следовательно, из-за уникальности селектора CSS по id он может использоваться только для одного-единственного элемента. В этом случае намного логичнее использовать классы, а не идентификаторы.
Различные мнения о селекторе по id
Но существует и противоположное мнение, что идентификатор помогает определить тот фрагмент кода на странице, который должен быть в единственном экземпляре. При этом, хотя селекторы по классам могут заменить его, они должны использоваться для больших групп элементов, а в тех местах, где требуется точность, лучше использовать id. Каждый верстальщик вправе выработать свое личное мнение по этому вопросу и писать код в своей собственной стилистике. При написании селектора по id перед ним используется символ «#». То есть строка кода будет выглядеть так: «#blue: {color: blue}». При такой записи будет окрашен в синий цвет элемент с идентификатором «#blue».
Использование каскада
При использовании в HTML селекторов CSS по id можно также использовать свойство каскадности. Например, если внутри тега с идентификатором нужно выбрать какой-то дочерний тег и изменить его свойства, сначала нужно записать имя идентификатора с решеткой, затем дочерний тег и его свойства. Такие селекторы называются вложенными. То есть строка кода будет выглядеть примерно так: «#id p {color: blue}». Тогда внутри родительского элемента с этим идентификатором у дочернего абзаца цвет текста изменится на синий.
Использование селекторов дочерних элементов
Еще один вариант использования каскада для изменения свойств дочерних элементов используется, если нужно выбрать только определенную часть кода. Его также называют селектором потомков. Например, чтобы выбрать абзац внутри какой-то строки таблицы, используется следующая запись CSS селектора: «ul li > p: {color: blue}». Стоит обратить внимание на то, что чем длиннее запись, тем выше вероятность, что получится изменить какое-то конкретное свойство элемента, так как он становится более приоритетным для каскада. Например, элементы с каким-то другим свойством CSS-селектора по классу, который является родительским, не изменит свои свойства полностью. Перекрасится только определенная часть текста внутри списка.
Селектор сестринских элементов
Еще один интересный способ использования каскадности - соседние селекторы CSS. Записываются они как сумма селекторов: «span + a {color blue}». При этом соседом считается тот, под которым есть еще один, подходящий под нужные параметры. Таким образом, если в коде есть три элемента, то к первому из них свойство не применится, потому что у него нет соседнего, а ко всем последующим - да. Так происходит из-за значка суммы, когда складываются последующие селекторы, а не предыдущие. Такая запись помогает сократить код и не записывать несколько CSS-селекторов для разных тегов, применяя к ним одинаковые свойства. Если второму элементу списка задать дополнительно еще и класс, а запись изменить на «.class + a{color blue}», тогда отсчет пойдет от него и свойства изменятся у последующих подходящих под правило элементов, а два первых останутся прежними.
Теперь предположим, что в нашем коде есть три одинаковых тега с различными классами и нужно выбрать все элементы после какого-то определенного. В этом случае не поможет применение только лишь селекторов тегов CSS. Для этого используется селектор следующего вида: «.class ~ div». При этом выбираются элементы с тегом div, которые идут после заданного класса. Если мы хотим выбрать не только элементы с тегом div, но и все последующие, вместо тега после знака тильды нужно поставить символ звездочки - «*». Такая запись будет означать, что нужно выбрать все, что следует после заданного класса. Можно выбрать вообще все элементы на странице, если оставить в качестве селектора только звездочку.
Селекторы по CSS-атрибуту
Допустим, что в нашем коде присутствуют элементы с какими-то атрибутами, но все они отличаются друг от друга и написаны через дефис, а нам нужно выбрать все те, у которых название класса начинается с определенного слова, например «selector», и классы разделены знаком «-». Что нужно делать в этом случае? Запись селектора начинается с квадратных скобок, куда сначала записывается название атрибута, затем вертикальный слеш, знак «=» и «selector»: «data- |= selector». Далее пишем нужное свойство, которое хочется изменить. В результате выберется элемент с заданными параметрами. Меняя классы, можно менять и свойства определенных частей кода. Если же имена классов записаны не через дефис, а одним словом, тогда их тоже можно выбрать, но используя немного другую запись. В этом случае вертикальный слеш заменяется символом «^»: «data^ = selector». Такой селектор выбирает подстроку с началом названия класса.
Как выбрать элемент с определенным окончанием в названии класса
Теперь поступим иначе и выберем части кода не по началу описания класса, а по последним буквам в его названии. Для этого нам понадобится значок доллара. Ставим его на место галочки, а после знака равенства пишем окончание названия класса: «data$ = ctor». Теперь элементы с этим сочетанием букв будут выбраны и к ним применены определенные свойства. Выбирать можно любой атрибут. Разберем, как поступить, если нам нужно найти элемент с каким-то буквосочетанием в середине слова. В этом случае меняем знак доллара на звездочку, а после знака равенства пишем нужные буквы: «data* = ct».
Псевдоклассы – особые селекторы
Для ссылок обычно используются специальные селекторы стилей CSS, которые отображают различные их состояния: спокойное, в фокусе, активное, пройденное – они называются псевдоклассами. Псевдокласс для активной ссылки, на которую наведен курсор, пишется так: «а:active». Далее идут какие-то свойства, чаще всего меняется фон или добавляется тень. Если добавить это свойство для ссылки и кликнуть по ней, она изменить свой цвет на заданный. Еще один псевдокласс – hover показывает, что ссылка уже пройдена. Записывается он так: «a:hover».
Особенности состояний active и focus
Active часто путают с другим состоянием – focus. Записывается оно так: «a:focus» и обозначает активное состояние кнопки при работе с клавиатуры. То есть, если использовать клавишу TAB, активная ссылка будет выделяться особым цветом. Это свойство обязательно нужно использовать, так как пользоваться мышью для навигации по сайту могут не все пользователи. У некоторых может быть слабое зрение или другие ограничения по здоровью, потому перемещаются они по странице при помощи клавиш или специальных приспособлений. Игнорирование состояния кнопки в фокусе является большим минусом для такого параметра в дизайне сайта, как доступность, и оказывает значительное влияние на его посещаемость особой категорией пользователей. При обычной навигации при помощи мышки ссылка становится одновременно активной и в фокусе. Поэтому при стилизации элементов важно обращать внимание на это.
Псевдоэлементы
Псевдоэлементы позволяют задавать особые стили без его определения в самой структуре HTML. Записываются они так: имя селектора, знак «::», имя псевдоэлемента. Наиболее распространены элементы «before» и «after». У них есть свойство «content», они не могут применяться к внутренним стилям. «After» нужен для добавления какого-то контента после содержимого определенного элемента. Что именно нужно вставить, записывается в свойство «content». Аналогичным образом, псевдоэлемент «before» добавляет контент перед содержимым элемента. Использование этих особых селекторов позволяет сократить код и не писать каждый раз новую структуру для какой-то его части, если нужно добавить небольшую деталь в определенное место контейнера. Они очень часто используются при стилизации страниц и добавлении каких-то декоративных элементов. Комбинации всех этих вариантов помогают создавать необычные эффекты на странице и очень помогают работе верстальщика.
