ГлавнаяОнкологияСелекторы. CSS селекторы Как открыть селекторы css
Селекторы. CSS селекторы Как открыть селекторы css
// echo get_the_post_thumbnail(get_the_ID(), "relatedthumbnail"); // вывожу свой размер миниатюры?>
Поговорим о CSS селекторах. Помимо обычного обращения к элементам через имя класса, id и название html тегов, можно использовать специальные комбинации и команды. Рассмотрим их в статье подробнее. Некоторые селекторы поддерживаются всеми браузерами, некоторые только самыми новыми версиями браузеров.
1.
* — выделение всех элементов
* {
margin: 0;
padding: 0;
}
Начнем с простых селекторов, и затем рассмотрим более сложные. Многие разработчики используют его для того, чтобы скинуть у всех элементов значения margin и padding . На первый взгляд это удобно, но все-таки в рабочем коде так лучше не делать. Этот CSS-селектор слишком сильно грузит браузер.
Его также можно использовать для выделения всех дочерних элементов, определенного контейнера.
#container * {
border: 1px solid black;
}
В данном случае выделяться все дочерние элементы блока #container . Старайтесь не злоупотреблять им.
Совместимость
IE6 +
Firefox
Chrome
Safari
Opera
2.
#X
#container {
width: 960px;
margin: auto;
}
Знак решетки перед CSS-селектором выделит нам элемент с id="container" . Это очень просто, но будьте аккуратны при использовании id.
Спросите себя: мне абсолютно необходимо выделение по id?
id жестко привязывают стиль к элементу и не дает возможности повторного использования. Более предпочтительным будет использование классов class="" , названий тэгов или даже псевдо-классов.
Совместимость
IE6 +
Firefox
Chrome
Safari
Opera
3 .Х
.error {
color: red;
}
Это CSS-селектор класса Х. Разница между id и классом заключается в том, что одному классу может принадлежать несколько элементов на странице. Используйте классы, когда вы хотите применить стиль к нескольким однотипным элементам. При использовании id вам придется писать стиль для каждого отдельного элемента.
Совместимость
IE6 +
Firefox
Chrome
Safari
Chrome
4.
Х
Y
li a {
text-decoration: none;
}
CSS-селектор дочерних элементов встречается чаще всего. Если вам надо выделить элементы определенного типа из множества дочерних элементов, используете этот селектор. Например, вам надо выделить все ссылки, которые находятся в элементе li . В этом случае используйте этот селектор.
Не следует делать CSS-селекторы вида
Х Y Z A B.error . Всегда спрашивайте себя, а обязательно ли для выделения данного элемента писать такой громоздкий CSS-селектор.
Совместимость
IE6 +
Firefox
Chrome
Safari
Chrome
5. X
a { color: red; }
ul { margin-left: 0; }
Что делать, если вы хотите, чтобы охватить все элементы данного типа на странице? Будьте проще, используйте CSS-селектор типа. Если вы должны выделить все неупорядоченные списки, используйте ul {}
Мы используем псевдо-класс:link , для выделения всех ссылок, на которые еще не кликнули.
Если же нам надо применить определенный стиль у уже посещенным ссылкам, то используем псевдо-класс:visited .
Совместимость
IE7 +
Firefox
Chrome
Safari
Opera
7.
Х
+Y
ul + p { color: red; }
Выделяет последующий элемент. Он будет выбирать только
элемент типа Y, который идет сразу после элемента Х. В примере текст первого абзаца после каждого ul будет красного цвета.
Совместимость
IE7 +
Firefox
Chrome
Safari
Chrome
8.
Х
>Y
div#container > ul { border: 1pxsolidblack; }
Разница между стандартными Х Y и X > Y состоит в том, что рассматриваемый CSS-селектор будет выбирать только непосредственные дочерние элементы. Например, рассмотрим следующий код.
Элемент списка
Дочерний элемент
Элемент списка
Элемент списка
Элемент списка
CSS-селектор #container > ul выберет только ul , которые являются непосредственными дочерними элементами div с id =container . Он не выберет, например, ul , являющиеся дочерними элементами первых li .
Поэтому можно получить выигрыш в производительности используя данный CSS-селектор. В самом деле, это особенно рекомендуется при работе с jQuery или другими библиотеками, выбирающими элементы на основе правил CSS -селекторов.
Совместимость
IE7 +
Firefox
Chrome
Safari
Opera
9.
Х
~ Y
ul ~ p { color: red; }
Этот CSS-селектор очень похож на X + Y, однако, является менее строгим. При использовании ul + p будет выбрать только первый элемент, идущий за Х. В данном случае будут выбраны все элементы p, идущие на ul.
Совместимость
IE7 +
Firefox
Chrome
Safari
Opera
10.
X
a { color: green; }
В CSS-селекторах также можно использовать атрибуты. Например в данном примере мы выделили все ссылки, имеющие атрибут титле. Остальные ссылки останутся не затронутыми.
Совместимость
IE7 +
Firefox
Chrome
Safari
Opera
11.
X
a { color: #ffde00; }
Обратите внимание, что на кавычки. Не забудьте так же делать в jQuery и других JavaScript библиотеках, в которых элементы выбираются по CSS-селекторам. По возможности, всегда используйте CSS3 CSS-селекторы.
Хорошее правило, но слишком строгое. Что же делать, если ссылка ведет не непосредственно на yandex.ru, а например на http://yandex.ru/page1? В этих случаях мы можем использовать регулярные выражения.
Совместимость
IE7 +
Firefox
Chrome
Safari
Chrome
12.
X
a { color: # 1f6053; }
Вот то, что нам нужно. Звезда обозначает, что искомое значение должно появляться где-нибудь
в атрибуте. Таким образом, CSS-селектор охватывает yandex.ru, http://yandex.ru/somepage
и т.д.
Совместимость
IE7 +
Firefox
Chrome
Safari
Opera
13.
X
a {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
Вы никогда не задумывались, как некоторые веб-сайты могут отображать маленький значок рядом с внешними ссылками? Я уверен, что вы видели их прежде, они хорошо запоминаются.
«^» — наиболее часто используемый в регулярных выражениях символ. Он используется для обозначения начала строки. Если мы хотим охватить все тэги, у которых href начинается с http, нам надо использовать CSS-селектор, приведенных выше.
Обратите внимание, что мы не ищем «http://». Это не правильно, поскольку не учитываются адреса, начинающиеся с https://
А если мы хотим задать стиль только для ссылок, ведущих на фотографию? Нужно искать конец
строки.
Совместимость
IE7 +
Firefox
Safari
Опера
14.
X
a { color: red; }
Опять же, мы используем символ регулярного выражения «$» для обозначения конца строки. В данном мы ищем ссылки, которые ссылаются на jpg-файлы, или url-ы, в конце у которых стоит «.jpg».
Совместимость
IE7 +
Firefox
Safari
Опера
15.
X
a{ color: red; }
Как же нам теперь написать CSS-селектор, который бы выделял ссылки на все виды изображений? Например, мы могли бы написать так:
A,
a,
a,
a {
color: red;
}
Но это геморрой и неэффективно. Другим возможным решением является применение пользовательских атрибутов. Почему бы нам не добавить наш собственный атрибут data-filetype в каждую ссылку?
Ссылка на изображение
A { color: red; }
Совместимость
IE7 +
Firefox
Safari
Опера
16.
X
a { color: red; }
a { border: 1pxsolidblack; }
А вот кое-что особенное. Не все знают об этом CSS-селекторе. Тильда (~) позволяет выделить определенный атрибут из списка атрибутов, разделенных запятой.
Например, мы можем задать наш собственный атрибут data-info, в котором указывать несколько ключевых слов через пробел. Так, мы можем указать, что ссылка является внешней и что она ссылается на изображение.
" Click Me
Вот, Html-код на месте, теперь напишем стили.
Неплохо, да?
Совместимость
IE7 +
Firefox
Safari
Опера
17.
X:checked
input:checked { border:1pxsolidblack; }
Этот псевдокласс выделяет только элементы пользовательского интерфейса, такие как переключатель или флажок. Причем те, которые отмечены/выбраны. Очень просто.
Совместимость
IE9 +
Firefox
Safari
Опера
18.
X:after
Псевдоклассы:before и:after очень крутые. Создается впечатление, что каждый день появляются новые способы их эффективного использования. Они просто генерируют контент вокруг выбранного элемента.
Многие познакомились с этими псевдоклассами при работе с clear-fix hack.
Этот хак
использует:after чтобы добавить пробел после элемента, а запретить его обтекание.
Согласно спецификации CSS3, вы должны использовать два двоеточия (::). Однако, можно использовать и одно двоеточие для совместимости.
Совместимость
IE8 +
Firefox
Safari
Опера
19.
X:hover
div:hover { background: #e3e3e3; }
Хотите применить стиль к элементу, когда наводите на него мышкой? Тогда этот CSS-селектор для вас.
Имейте в виду, что старые версии Internet Explorer применяют:hover только к ссылкам.
Этот CSS-селектор часто используют для того, чтобы поставить border-bottom на ссылки, когда на них наводят мышкой.
A:hover { border-bottom: 1pxsolidblack; }
border-bottom: 1px solid black; выглядит лучше, чем text-decoration: underline;
Совместимость
IE6 + (В IE6: hover должен быть применен к ссылке)
Firefox
Safari
Опера
20.
X:not(selector)
div:not(#container) { color: blue; }
Псевдокласс отрицания бывает очень полезным. Скажем, я хочу выбрать все div, за исключением того, который имеет id = container . Приведенный выше код справиться с этим!
Или, если бы я хотел выбрать все элементы, за исключением p.
*:not(p) { color: green; }
Совместимость
IE9 +
Firefox
Safari
Опера
21.
X::
псевдо
элемент
Мы можем использовать псевдо элементы, чтобы оформлять фрагменты элементов, такие как первая строка, или первая буква. Имейте в виду, что они должны быть применены к элементам уровня блока для того, чтобы вступили в силу.
Аналогичным образом благодаря::first-line мы задаем стиль первой строки в абзаце.
«Для совместимости с существующими таблицами стилей, браузер должен понимать прежнее обозначения псевдо элементов с одним двоеточием, введенные в CSS 1, 2 (:first-line, :first-letter, :before and:after). Эта совместимость не допускается для новых псевдо-элементов, введенных в этой спецификации»
Совместимость
IE6 +
Firefox
Safari
Опера
22.
X:nth-child(n)
li:nth-child(3) { color: red; }
Раньше мы не могли выделить, например, третий дочерний элемент? nth-child решает это!
Обратите внимание, что nth-child принимает целое число в качестве параметра, однако отсчет ведется не с 0. Если вы хотите выбрать второй пункт списка, используйте li:nth-child(2) .
Мы даже можем выбрать каждый четвертый элемент списка, просто написав {0}li:nth-child(4n){/0}.
Совместимость
IE9 +
Firefox 3,5 +
Safari
23.
X:nth-last-child(n)
li:nth-last-child(2) { color: red; }
Что делать, если у вас огромный список элементов в ul , а нем нужно выбрать третий элемент с конца? Вместо того, чтобы писать li:nth-child(397), можно использовать nth-last-child.
Этот метод почти идентичен приведенному выше, однако отсчет ведется с конца.
Совместимость
IE9 +
Firefox 3,5 +
Safari
Опера
24.
X:nth-of-type(n)
ul:nth-of-type(3) { border: 1pxsolidblack; }
Бывает, что надо выбрать не дочерний элемент, а элемент определенного типа.
Представьте себе, что на странице пять неупорядоченных списков. . Если вы хотите применить стиль только к третьему ul, не имеющему уникального id, нужно использовать nth-of-type.
Совместимость
IE9 +
Firefox 3,5 +
Safari
25.
X:nth-last-of-type(n)
ul:nth-last-of-type(3) { border: 1pxsolidblack; }
Мы можем также использовать nth-last-of-type, отсчитывая элементы с конца.
Совместимость
IE9 +
Firefox 3,5 +
Safari
Опера
26.
X:first-child
ul li:first-child { border-top: none; }
Этот псевдокласс выбирает первый дочерний элемент. Часто используется чтобы убрать border в первом и последнем элементе списка.
Совместимость
IE7 +
Firefox
Safari
Опера
27.
X:last-child
ul > li:last-child { color: green; }
В противоположность:first-child:last-child выбирает последний дочерний элемент.
Совместимость
IE9 + (Да да, IE8 поддерживает:first-child , но не поддерживает:last-child . Microsoft-у привет!)
Firefox
Safari
Опера
28.
X:only-child
div p:only-child { color: red; }
Вы не часто встретите этот псевдокласс, тем не менее он существует.
Он позволяет вам выбрать элементы, которые являются единственными дочерними. Например, применим приведенный выше стиль к этому html-коду:
Один параграф.
Два параграфа
Два параграфа
Будет выбран p только первого div`a, потому что он единственный дочерний элемент.
Совместимость
IE9 +
Firefox
Safari
Опера
29.
X:only-of-type
Очень интересный псевдокласс. Он затрагивает элементы, не имеющие соседей в пределах родительского элемента. В качестве примера выберем ul только с одним элементом в списке.
Единственное решение заключается в использовании only-of-type .
Ul > li:only-of-type { font-weight: bold; }
Совместимость
IE9 +
Firefox 3,5 +
Safari
Опера
30.
X:first-of-type
first-of-type выбирает первый элемент заданного типа. Чтобы лучше понять, посмотрим на пример.
При помощи родственного селектора можно выбрать все указанные элементы, идущие в коде за указанным элементом. Родственный селектор указывается символом "~" (тильда).
В этом примере родственный селектор h1~p
сработал на все теги
Следующие за тегом
.
Теперь другой пример использования родственных селекторов:
Селектор родственного элемента в CSS
Привет!
Текст абзаца №1 в про невероятные приключения.
Текст абзаца №2 в про невероятные приключения.
Текст div №1 в про невероятные приключения.
Текст абзаца №3 в про невероятные приключения.
Тут видно, что стиль сработает только для тегов
Которые являются потомками тега
, то есть для абзаца №1 и №2.
То есть родственные элементы должны иметь общего родителя и находиться на одном уровне.
Родственные селекторы похожи на соседние селекторы , но отличаются тем, что стиль применяется ко всем выбраным элементам, а не только к первому из них.
Pодственный селектор и псевдокласс:hover
Теперь давайте используем этот селектор в паре с псевдоклассом :hover
, который отвечает за стиль элемента, на который наведен курсор.
Селектор родственного элемента в CSS
Наведи сюда курсор.
+
Результат будет таким:
Рисунок 1. Родственные селекторы и:hover.
Более реальный и сложный пример
Сейчас мы рассмотрим немного сложный пример, если вы только начали изучение CSS, то вам может он показаться непонятным. Для понимания его работы нужно знать некоторые данные из CSS, которых вы, возможно, ешё не знаете. В таком случае пока просто пропустите его, вернётесь к нему позже.
Давайте рассмотрим код формы, в которой при активации поля формы появляется подсказка. Вот так она выглядит:
Рисунок 2. Поле формы с подсказкой.
Если поместить курсор в поле "Имя пользователя", то появится одна подсказка, если в поле "Пароль", то другая.
Селектор родственного элемента в CSS
Имя пользователя:
7 символов - не использовать спецсимволы.
Пароль:
4-15 символов - не использовать спецсимволы.
Для определения стиля появляющегося блока тут использован селектор input:focus ~ div
. Он значит следующее: когда поле формы input
получает фокус, всем родственным тегам div
применить стиль: display
: block
, то есть они становятся видимыми. До этого они имели свойство display
: none
, то есть были невидимы.
Сама подсказка состоит из трёх блоков div
:
в одном блоке хранится текст подсказки, он обведён рамкой с закруглёнными углами;
треугольник, блок с нолевой высотой и шириной, а также рамками border
, которые рисуют треугольник;
ешё один треугольник, но белого цвета и смещён на 1px в право (этот треугольник закрашивает предыдущий, оставляя лишь боковую линию в 1 px).
Также для понимания работы этого примера нужно знать позиционирование, свойство position
.
Ближайшие статьи этого учебника будут посвящены глубокому изучению селекторов, благодаря которым вы научитесь выбирать совершенно любой элемент, размещенный в HTML документе.
Основная функция селекторов заключается в том, чтобы контролировать дизайн веб страниц, выбирая элемент, или элементы по определенным критериям и стилизуя их с помощью CSS свойств, которые вы указываете в блоке объявлений (описаний).
Селектор типа
В предыдущих примерах, да и в практическом задании предыдущей статьи " " мы с Вами использовали селекторы типа, которые определяют HTML элемент, к которому будет применен стиль. Если вы хорошо знакомы с HTML тегами, то вам будет легко определять в стилях селекторы типа, так как они имеют одноимённые наименования с форматируемыми элементами, например:
p
(параграф).
table
- сообщает браузеру, что необходимо отформатировать все HTML теги
(таблица).
li
- сообщает браузеру, что необходимо отформатировать все HTML теги
(элемент списка).
Давайте рассмотрим пример, в котором с использованием селектора типа мы стилизуем все заголовки второго уровня (
):
Селектор типа
Обычный заголовок второго уровня
Результат нашего примера:
Как вы могли заметить, селектор типа позволяет стилизовать сразу все элементы подобного типа, но что делать если нам необходимо стилизовать какой-то однотипный элемет отлично от других? В этом случае селектор типа нам уже не подойдет и нам придется использовать селектор класса.
Селектор класса
Рис. 4 Селектор класса в CSS.
Прошу от Вас максимального внимания, так как селектор класса является одним из самых распространенных и востребованных селекторов CSS, который мы будем постоянно использовать в дальнейшем изучении CSS.
И так, мы хотим, чтобы один из элементов выглядел не так, как другие. Для этого нам необходимо создать селектор, назначив ему имя, которое нам необходимо придумать самостоятельно:
.test
{
/* имя класса в таблице стилей задается через точку */
text-align
: center
;
font-family
: Courier
;
color
: green
; /* задаем цвет текста*/
margin-top
: 50px
; /* добавляем отступ от верхнего края элемента */
}
После того как мы создали наш класс в таблице стилей, нам необходимо применить его к интересующему нас элементу, или элементам, которые мы хотим стилизовать. Чтобы указать класс для определенного элемента, необходимо добавить к этому элементу глобальный HTML атрибут class со значением нашего класса, но без точки:
class =
"test"
>
Заголовок второго уровня
/* задаем класс для элемента*/
Обратите внимание на следующие правила, которые необходимо соблюдать при работе с селекторами класса:
в отличии от селекторов типа все названия селекторов класса должны начинаться с точки (благодаря ей браузеры находят эти селекторы в таблице стилей). Точка требуется только в названии селектора таблицы стилей (в значении глобального HTML атрибута class она не ставится, ).
название после точки всегда должно начинаться с символа (неправильно: .50cent
, .-vottakvot
).
Учитывайте регистр при наименовании стилевых классов, т.к. они к этому чувствительны и очень ранимы (.vottakvot
и .VotTakVot
разные классы).
Селекторы класса
Обычный заголовок второго уровня
Заголовок с заданным классом
Результат нашего примера:
Рис. 5 Использование селектора класса.
Селекторы класса очень гибкий инструмент, который позволяет указать конкретный стиль даже к одному слову предложения. Для этого мы поместим это слово внутри элемента и назначим этому элементу определённый класс, который опишем во внутренней таблице стилей:
Пример выделения одного слова
Обычный заголовок class =
"test"
>
второго
уровня
Результат нашего примера:
Обращаю Ваше внимание, что вы можете использовать селекторы класса напрямую к HTML элементам, используя следующий синтаксис:
a.test
{
/* выбирает все элементы с классом test */
блок объявлений
;
}
p.intro
{
/* выбирает все элементы
С классом intro */
блок объявлений
;
}
ID селекторы
Рис. 7 Селектор id в CSS.
Основная задача селектора id
заключается в том, чтобы выбрать элемент с определённым идентификатором.
Для начала необходимо создать идентификатор, назначив ему имя, которое нам необходимо придумать самостоятельно:
#test
{
/* имя идентификатора в таблице стилей задается через решетку */
background-color
: #00FF00
; /*Задаём цвет заднего фона*/
color
: white
; /*Задаём цвет шрифта белый*/
font-size
: 30px
; /*Указываем размер шрифта*/
width
: 600px
; /*Указываем ширину элемента*/
height
: 40px
; /*Указываем высоту элемента*/
text-align
: center
; /*Выравниваем текст по центру внутри элемента*/
}
После того как мы создали наш идентификатор в таблице стилей, нам необходимо применить его к интересующему нас элементу, который мы хотим стилизовать. Чтобы указать идентификатор для элемента, необходимо добавить к этому элементу глобальный HTML атрибут со значением нашего идентификатора, но уже без решетки:
id =
"test"
>
Обычный заголовок второго уровня
Обратите внимание на следующие правила, которые необходимо соблюдать при работе с id селекторами:
значение идентификатора должно быть уникально на странице, размещение нескольких одноименных идентификаторов на странице считается ошибкой (выборка остановится на первом идентифакторе).
все названия id
селекторов должны начинаться с решётки (благодаря ей браузеры находят эти селекторы в таблице стилей). Решетка требуется только в названии селектора таблицы стилей (в значении глобального HTML атрибута она не ставится, будьте внимательны из-за этого возникает много ошибок
).
используйте только буквы алфавита (A-Z, a-z), числа, дефисы, знаки подчеркивания.
название после решётки всегда должно начинаться с символа (неправильно: #50cent
, #-vottakvot
).
Учитывайте регистр при наименовании id селекторов, т.к. они к этому чувствительны (#vottakvot
и #VotTakVot
разные идентификаторы).
Теперь соберем это в одном примере и посмотрим результат:
ID селекторы
Обычный заголовок второго уровня
Результат нашего примера:
В настоящее время id
селекторы в основном применяются на веб страницах с целью динамического управления элементами с использованием языка программирования JavaScript
.
Групповые селекторы
В CSS допускается задать единый стиль не только одному селектору, но и группе селекторов. В группу могут входить как селекторы типа
, селекторы класса
, так и рассмотренные нами id селекторы
. При перечислении любых селекторов (даже, которые мы будем рассматривать далее в учебнике) необходимо обязательно разделять их запятой
, позднее вы поймете почему.
Например:
Первым
групповым селектором мы указываем, что заголовки
и
, элементы с классом test
и элемент с идентификатором test
получат цвет заднего фоназеленый
.
Вторым
групповым селектором мы указываем, что кроме заднего фона элементы с классами test
и элемент с идентификатором test
получат синий
цвет текста.
Рассмотрим следующий пример:
Групповые селекторы
Заголовок первого уровня
Заголовок второго уровня
class =
"test"
>
Абзац с классом test
Заголовок третьего уровня
id =
"test"
>
Абзац с идентификатором test
Заголовок четвертого уровня
В этом примере мы использовали три групповых селектора:
Селектор *
позволяет выбрать все элементы внутри документа (универсальный селектор).
Давайте рассмотрим пример использования:
Универсальный селектор
Заголовок первого уровня
Заголовок второго уровня
Абзац, который не несет никакой смысловой нагрузки
В этом примере с использованием универсального селектора мы указали, что все элементы на странице получат определенный цвет текста и будут иметь курсивное начертание шрифта.
Результат нашего примера:
Кроме того универсальный селектор может использоваться в качестве селектора потомков и выбирать все элементы, которые находятся внутри другого элемента.
.test *
{
/* выбирает все элементы внутри элемента c назначенным классом test */
объявление
;
}
#test *
{
/* выбирает все элементы внутри элемента c назначенным идентификатором test */
объявление
;
}
div *
{
/* выбирает все элементы внутри элемента
*/
объявление
;
}
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
Подсказка: при выполнении практических заданий вы можете располагать стилевую информацию как внутри самой веб страницы, так и в отдельном файле.
В практических заданиях для определения цвета элементов вы можете использовать графические редакторы - инструмент палитра (пипетка), либо установите плагин для вашего браузера (например, CollorZilla
), либо использовать свои цвета, так как копирование цветов не является целью практического занятия.
После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы все выполнили правильно.
Всем доброго времени суток. На связи Алексей Гулынин. В данной статье я бы хотел рассказать, какие новые селекторы появились в CSS3
. Сразу отмечу, что все старые селекторы (селекторы тегов, класса, id, псевдоселекторы) также остались. С появлением новых селекторов намного упрощается работа верстальщика, так как сейчас для того, чтобы сделать что-то, не нужно придумывать велосипед и изобретать очередной костыль. Давайте создадим html-страницу, на которой будем тестировать новые селекторы:
Селектор first-child
позволяет задать стиль первому элементу. Чтобы было понятнее сразу пример:
Ul li:first-child {
background: red;
}
Если вы запустите данный пример, то увидите, что фон первого элемента списка стал красным. Если можно задать для первого элемента, то должно быть и для последнего:
Селектор last-child
позволяет задать стиль последнему элементу. Пример:
Ul li:last-child {
background: green;
}
После запуска данного примера, фон последнего элемента списка станет зеленым.
Самое замечательное то, что теперь появился селектор, с помощью которого можно задать любому произвольному элементу определенный стиль:
Селектор nth-child()
, в параметрах которого необходимо передать тот элемент, к которому нужно применить стили:
Ul li:nth-child(2) {
background:yellow;
}
В данном случае 2 элемент списка станет желтым. Обратите внимание на синтаксис: после ":"
пробела быть не должно.
С появлением CSS3 стало возможным изменить цвет выделения. Когда мы выделяем текст на странице в браузере, он обычно становится белым на синем фоне.
Селектор ::selection
позволяет настроить это дело под наш вкус:
::selection {
background: pink;
color: brown;
}
Наберите данный пример и попробуйте что-нибудь выделить (цвет выделения должен измениться).
Теперь можно фильтровать элементы на странице. Допустим нам нужно отобрать все блоки, id которых начинается с "te". Для этого нужно написать следующий код:
Div {
background: #4c4c4c;
}
Конструкция "^="
означает, что id (в нашем случае) должен начинаться "te". Запустите данный пример и посмотрите результат работы. С помощью следующей конструкции можно отобрать элементы, которые заканчиваются на что-то определенное. Допустим у нас есть на странице картинки в формате jpeg и png. Мы хотим всем картинкам в формате png добавить рамку. Делается это следующим образом.