А теперь попытайтесь понять как выделить пункт 2.

Решение 1

Ul:first-of-type > li:nth-child(2) { font-weight: bold; }

Решение 2

P + ul li:last-child { font-weight: bold; }

Решение 3

Ul:first-of-type li:nth-last-child(1) { font-weight: bold; }

Совместимость

• IE9 +
• Firefox 3,5 +
• Safari
• Опера

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

Блок объявления стилей состоит из свойств и значения свойства, разделяются они точкой с запятой:

Практика наш лучший друг, давайте попробуем! Открываем html-страницу и css-файл, которые мы создали в уроке №2 .

Сейчас зададим странице голубой фон. Как мы помним, за цвет фона отвечает тег , идем в файл style.css и добавляем следующий код:

body{
background: blue;
}

Теперь проверяем нашу html-страницу в браузере, фон должен стать синим. Далее, изменим цвет текста на белый:

body{
background: blue;
color: white;
}

Проверяем, нажимаем Ctrl+F5 для обновления html-страницы в браузере и смотрим, что весь текст стал белого цвета. Теперь нужно изменить цвета заголовков на красный для h1 и желтый для h2:

body{
background: blue;
color: white;
}
h1{
color:red;
}
h2{
color:yellow;
}

Снова нажимаем Ctrl+F5 и смотрим, на изменения.

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

Селекторы CSS

Селекторы по ID (идентификатору)

В предыдущих примерах в качестве селекторов использовались элементы страницы: body, h1, h2 . Представьте такую ситуацию - в html-странице есть несколько параграфов, нам нужно, чтобы текст одного из параграфов был розовый, а остальные параграфы были черного цвета. Чтоб реализовать такую идею нам понадобится указать уникальный идентификатор (id ) параграфу и создать для него отдельный стиль.

Текст параграфа с идентификатором (id).

Уникальные имена можно назначать любые, за исключением зарезервированных слов (это имена тегов и параметров элементов HTML и CSS).Допустим, нельзя идентификатору назначить имя body . Сейчас добавим в html-страницу несколько параграфов и один из будет с идентификатором:

Это заголовок первого уровня

Здесь просто текст

Это заголовок второго уровня

Здесь просто текст

Простой абзац

Абзац с идентификатором (id)

Сейчас на странице оба абзаца белого цвета. Добавим в style.css стили для наших абзацев:

body{
background: blue;
color: white;
}
h1{
color:red;
}
h2{
color:yellow;
}
p{
color:black;
}
#pink{
color:pink;
}

Сначала мы указали, что текст всех параграфов будет черного цвета, но текст параграфа с id "pink" будет розовым. Наш селектор состоит из решетки (# ) и имени идентификатора (pink ).

Важно помнить, что нельзя создать два параграфа с одинаковым id , параграф с id "pink" может быть только один. Каждый параграф может иметь свой уникальный идентификатор, допустим, создадим параграф с id="green" и зададим ему свой собственный стиль в таблице стилей.

Селекторы по классу

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

Добавим в html-страницу пару параграфов и назначим им class="pink" :

Это заголовок первого уровня

Здесь просто текст

Это заголовок второго уровня

Здесь просто текст

Простой абзац

Абзац с идентификатором

Абзац с классом (class) pink

Абзац с классом (class) pink

Чтобы назначить стиль класса, в таблице стилей пропишем правило, где в качестве селектора снова будет использоваться имя pink, но в данном случае это имя класса, поэтому перед именем будет использоваться точка (.):

body{
background: blue;
color: white;
}
h1{
color:red;
}
h2{
color:yellow;
}
p{
color:black;
}
#pink{
color:pink;
}
.pink{
color:pink;
}

Параграфов с таким классом может быть до бесконечности.

Давайте соберем все новые знания в кучу:

• Все одинаковые элементы (заголовки, параграфы и тп.) должны иметь один стиль, тогда селектор состоит только из этого элемента p{color:black;}
• Элемент (абзац, заголовок и тп.) должен отличаться от всех остальных, тогда присваиваем ему идентификатор (id) и в таблице стилей перед идентификатором ставим знак решетки # , #pink{color:pink;}
• На странице несколько элементов должны иметь одинаковый стиль, то им присваивается класс (class ) и в таблице стилей перед классом ставим знак точки (.), .pink{color:pink;}
• У id более высокий приоритет, чем у class .

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

Предположим, что у нас есть html-страница с таким кодом:

Этот текст находится в параграфе

Это просто текст.
Этот текст выделен курсивом

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

В браузере мы увидим:

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

p i{
color:green;
}

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

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

Представьте такую ситуацию, что блоки объявления стилей для разных селекторов совпадают (заголовки H1 H2 H3 зеленого цвета), их можно сгруппировать. Селекторы для группировки, нужно перечислить через запятую. Пример:

h1, h2, h3{
color:green;
}

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

h1, h2, h3{
color:green;
}
h1{
font-size:18px;
}
h2{
font-size:16px;
}
h3{
font-size:14px;
}

У заголовков (H1 H2 H3) будет указан свой размер, но при этом все они будут зеленого цвета.

Насчет группировок имеются много споров:

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

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

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

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

1) .Х

.topic-title { background-color: yellow; }

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

• Chrome
• Firefox
• Safari
• Opera

2) #X

#content { width: 960px; margin: 0 auto; }

CSS селектор по id . Знак решетки перед CSS селектором Х выбирает элемент у которого id = Х. Навешивая стили по id всегда стоит помнить, что он должен быть уникальным – только один такой id должен быть на странице. Поэтому лучше использовать селекторы по классам, комбинациям классов или названиям тэгов. Тем не менее, селекторы по id отлично применяются в автоматизированном тестировании, т.к. позволяют сразу взаимодействовать именно с нужным элементом и иметь уверенность что он только один такой на странице.

Какими браузерами поддерживается:
• Chrome
• Firefox
• Safari
• Opera

3) *

* { margin: 0; padding: 0; }

CSS селектор всех элементов . Символ звездочки выбирает все элементы которые есть на странице. Многие разработчики используют его для того, чтобы убрать (обнулить) значения отступов (margin и padding) у всех элементов страницы. Тем не менее, на практике лучше так не делать потому, что этот CSS селектор довольно сильно грузит браузер перебором всех элементов на странице.

Символ * также можно использовать чтобы выделить все дочерние элементы:

#header * { border: 5px solid grey; }

В этом примере выделяются все дочерние элементы (потомки) элемента с #header . Но всегда стоит помнить, что этот селектор достаточно тяжел для браузера.

Какими браузерами поддерживается:
• Chrome
• Firefox
• Safari
• Opera

4) X

a { color: green; } ol { margin-left: 15px; }

CSS селектор типа . Как выбрать все элементы одного типа, если у них нет ни id ни классов? Стоит использовать CSS селектор по типу элемента. К примеру, чтобы выбрать все упорядоченные списки на странице, используйте ol {...} как это показано выше.

Какими браузерами поддерживается:
• Chrome
• Firefox
• Safari
• Opera

5) Х Y

li a { font-weight: bold; text-decoration: none; }

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

Какими браузерами поддерживается:
• Chrome
• Firefox
• Safari
• Opera

6) Х + Y

div + p { font-family: "Helvetica Neue", Arial, sans-serif; font-size: 18px; }

Смежный селектор элементов выбирает только элемент типа Y, который идет сразу после элемента Х. В этом случае каждый параграф следующий сразу после каждого элемента div будет получать специальный тип и размер шрифта.

Какими браузерами поддерживается:
• IE7 +
• Firefox
• Chrome
• Safari
• Chrome

7) Х > Y

#content > ul { border: 1px solid green; }

CSS селектор потомков . Разница между селекторами Х Y и X > Y в том, что рассматриваемый CSS селектор будет выбирать только непосредственные дочерние элементы (выберет только прямых потомков). К примеру:

CSS селектор #content > ul выберет только ul, который является прямым потомком блока div с id="container" . Он не выберет ul, являющийся потомком первого li. Это достаточно выгодный по скорости работы CSS селектор.

Какими браузерами поддерживается:
• Chrome
• Firefox
• Safari
• Opera

8) Х ~ Y

ol ~ p { margin-left: 10px; }

Селектор сестринских (саблинговых) элементов менее строгий чем X + Y. Он выберет не только первый, но и все остальные элементы p, идущие за ol.

Какими браузерами поддерживается:
• Chrome
• Firefox
• Safari
• Opera

a:link { color: green; } a:visited { color: grey; }

Псевдо-класс:link используется для выбора всех ссылок, на которые еще не кликнули. Если же нужно применить определенный стиль к уже посещенным ссылкам, то для этого используется псевдо-класс:visited .

Какими браузерами поддерживается:
• Chrome
• Firefox
• Safari
• Opera

10) X

a { color: red; }

CSS селектор по атрибуту . В этом примере выбираются только те ссылки, у которых есть атрибут title.

Какими браузерами поддерживается:
• Chrome
• Firefox
• Safari
• Opera

11) X

a { color: yellow; }

Какими браузерами поддерживается:
• Chrome
• Firefox
• Safari
• Opera

12) X

a { color: #dfc11f; }

Звездочка означает, что искомое значение должно быть где-нибудь в атрибуте (в любой части атрибута href). Таким образом, будут выбраны и ссылки с https://www..stijit.. Ко всем выбранным ссылкам будет применен золотой цвет.

Какими браузерами поддерживается:
• Chrome
• Firefox
• Safari
• Opera

13) X

a { background: url(path/to/external/icon.png) no-repeat; padding-left: 15px; }

На некоторых сайтах рядом со ссылками, ведущими на другие сайты, проставлены небольшие иконки со стрелочками, чтобы показать что это внешние ссылки. Карат “^” – это символ для обозначения начала строки. Таким образом для выбора всех тэгов, у которых href начинается с http, нужно использовать CSS селектор с каратом, как это показано на примере выше.

Какими браузерами поддерживается:
• Chrome
• Firefox
• Safari
• Opera

14) X

a { color: green; }

Здесь используется регулярное выражение и символ $ для того, чтобы обозначить конец строки. В данном примере мы ищем все ссылки, которые ссылаются на картинки с расширением.jpg.

Какими браузерами поддерживается:
• Chrome
• Firefox
• Safari
• Opera

15) X

a { color: green; }

Здесь мы применяем CSS селектор по пользовательскому атрибуту . Добавляем наш собственный атрибут data-filetype в каждую ссылку:

ссылка

Теперь, с помощью приведеного выше CSS селектора, можно выбирать все ссылки ведущие на картинки с любым расширением.

Какими браузерами поддерживается:
• Chrome
• Firefox
• Safari
• Opera

16) X

Тильда (~) позволяет выделить определенный атрибут из списка атрибутов, разделенных пробелом. Можно прописать наш собственный атрибут data-info, в котором указывать несколько ключевых слов через пробел. Таким образом можно указать, что ссылка является внешней и ведет на изображение.

ссылка

С помощью такого приема мы можем выбирать элементы с нужными нам комбинациями атрибутов:

/* Выбрать элемент, атрибут data-info которого содержит значение external */ a { color: green; } /* Выбрать элемент, атрибут data-info которого содержит значение image */ a { border: 2px dashed black; }

Какими браузерами поддерживается:
• Chrome
• Firefox
• Safari
• Opera

17) X:checked

input:checked { border: 3px outset black; }

Этот псевдокласс выделяет только такие элементы, как checkbox или radio button, причем только когда они уже в отмеченном состоянии.

Какими браузерами поддерживается:
• Chrome
• Firefox
• Safari
• Opera

18) X:after

Псевдоклассы:before и:after очень полезные – они создают контент до и после выбранного элемента.

Clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; } .clearfix { *display: inline-block; _height: 1%; }

Здесь при помощи псевдо-класса:after после блока с классом.clearfix создается пустая строка, после чего очищается. Этот подход используется если невозможно применить свойство overflow: hidden .

Какими браузерами поддерживается:
• Chrome
• Firefox
• Safari
• Opera

19) X:hover

div:hover { background-color: rgba(11,77,130,0.5); }

Применяет к элементу определенный стиль, когда на него наводится курсор мыши. Старые версии Internet Explorer применяют:hover только к ссылкам.

A:hover { border-bottom: 1px dotted blue; }

Какими браузерами поддерживается:
• IE6+ (В IE6 применимо только к ссылкам)
• Chrome
• Firefox
• Safari
• Opera

20) X:not(selector)

div:not(#content) { color: grey; }

Псевдокласс not (отрицания) бывает полезен когда, к примеру, нужно выбрать все div, за исключением того, который имеет id="content" .

По такому же принципу можно выбрать все элементы кроме p:

*:not(p) { color: blue; }

Какими браузерами поддерживается:
• Chrome
• Firefox
• Safari
• Opera

21) X::pseudoElement

p::first-line { font-weight: bold; font-size: 24px; }

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

Выбор первой буквы параграфа:

P::first-letter { font-family: cursive; font-size: 30px; font-weight: bold; padding-right: 1px; }

Выбор первой строки в параграфе:

P:first-line { font-size: 28px; font-weight: bold; }

Какими браузерами поддерживается:
• Chrome
• Firefox
• Safari
• Opera

22) X:first-child

ul li:first-child { border-top: none; }

Псевдокласс first-child выбирает только первого потомка родительского элемента. Часто используется чтобы убрать border в первом элементе списка. Этот псевдокласс был еще начиная с CSS 1 .

Какими браузерами поддерживается:
• Chrome
• Firefox
• Safari
• Opera 3.5+
• Android

23) X:last-child

ul > li:last-child { border-bottom: none; }

Псевдокласс last-child выбирает последнего потомка родительского элемента. Он появился только начиная с CSS 3 .

Какими браузерами поддерживается:
• IE9+ (IE8 поддерживает first-child, но не last-child. Microsoft (с))
• Chrome
• Firefox
• Safari
• Opera 9.6+
• Android

24) X:only-child

div p:only-child { color: green; }

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

Какими браузерами поддерживается:
• Chrome
• Firefox
• Safari 3.0+
• Opera 9.6+
• Android

25) X:nth-child(n)

li:nth-child(3) { color: black; }

Выбирает дочерний элемент по номеру, указанному в параметре. Селектор nth-child принимает целое число в качестве параметра, однако отсчет ведется c 1, т.е. если нужно выбрать второй пункт списка, используйте li:nth-child(2) . Все псевдоклассы с использованием nth-child появились только начиная с CSS 3 .

Какими браузерами поддерживается:
• Chrome
• Firefox 3.6+
• Safari 3.1+
• Opera 9.6+
• Android 2.1+
• iOS 2.0+

26) X:nth-last-child(n)

li:nth-last-child(2) { color: red; }

Если у вас большой список элементов в ul и нужно выбрать третий элемент с конца? Вместо того, чтобы писать li:nth-child(109) , можно использовать селектор последних потомков nth-last-child . Этот метод такой же как и предыдущий, но отсчет ведется с конца.

Какими браузерами поддерживается:
• Chrome
• Firefox 3.6+
• Safari 3.1+
• Opera 9.6+
• Android 2.1+
• iOS 2.0+

27) X:nth-of-type(n)

ul:nth-of-type(3) { border: 1px dotted black; }

Если на странице есть четыре неупорядоченных списка и нужно применить стиль только к третьему из них, не имеющему уникального id, стоит использовать nth-of-type.

Какими браузерами поддерживается:
• Chrome
• Firefox 3.6+
• Safari 3.1+
• Opera 9.6+
• Android 2.1+
• iOS 2.0+

28) X:nth-last-of-type(n)

ul:nth-last-of-type(3) { border: 2px ridge blue; }

Псевдокласс nth-last-of-type(n) предназначен для выбора n-ого элемента определенного типа с конца.

Какими браузерами поддерживается:
• Chrome
• Firefox 3.6+
• Safari 3.1+
• Opera 9.6+
• Android 2.1+
• iOS 2.0+

29) X:only-of-type

li:only-of-type { font-weight: bold; }

Псевдокласс only-of-type выбирает элементы, не имеющие соседей в пределах родительского элемента. К примеру можно выбирать все ul, которые содержат только одинокие li.

Какими браузерами поддерживается:
• Chrome
• Firefox 3.5+
• Safari 3.1+
• Opera 9.6+
• Android 2.1+
• iOS 2.0+

30) X:first-of-type

ul:first-of-type > li:nth-child(3) { font-style: italic; }

Псевдокласс first-of-type выбирает первый элемент заданного типа.

Какими браузерами поддерживается:
• Chrome
• Firefox 3.5+
• Safari 3.1+
• Opera 9.5+
• Android 2.1+
• iOS 2.0+

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

Пример 17.1. Стиль для каждого селектора

H1 { font-family: Arial, Helvetica, sans-serif; font-size: 160%; color: #003; } H2 { font-family: Arial, Helvetica, sans-serif; font-size: 135%; color: #333; } H3 { font-family: Arial, Helvetica, sans-serif; font-size: 120%; color: #900; } P { font-family: Times, serif; }

Из данного примера видно, что стиль для тегов заголовков содержит одинаковое значение font-family . Группирование как раз и позволяет установить одно свойство сразу для нескольких селекторов, как показано в примере 17.2.

Пример 17.2. Сгруппированные селекторы

H1, H2, H3 { font-family: Arial, Helvetica, sans-serif; } H1 { font-size: 160%; color: #003; } H2 { font-size: 135%; color: #333; } H3 { font-size: 120%; color: #900; }

В данном примере font-family единое для всех селекторов применяется сразу к нескольким тегам, а индивидуальные свойства уже добавляются к каждому селектору отдельно.

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

Селектор 1, Селектор 2, ... Селектор N { Описание правил стиля }

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

Вопросы для проверки

1. Какой цвет фона будет у элемента с классом button при включении приведённого стиля?

Bgzapas, .button, h1 { font-size: 1.2em; padding: 10px; background-color: #fcfaed; } .bgzapas { background-color: #e7f2d7; } .button, h2 { width: 95px; font-size: 11px; color: #f3fced; background-color: #5ca22e; } .bgzapas, .button { background-color: #d9d7f2; }

1. #fcfaed
2. #e7f2d7
3. #f3fced
4. #5ca22e
5. #d9d7f2