Соседние селекторы
|
Internet Explorer |
|
|
|
Netscape |
|
|
Opera |
|
|
|
Safari |
|
|
|
Firefox |
|
|
6.0 |
7.0 |
8.0 |
8.0 |
9.0 |
8.0 |
9.2 |
9.5 |
1.3 |
2.0 |
3.1 |
1.5 |
2.0 |
3.0 |
|||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Нет |
Ошибки |
Да |
|
Да |
|
Да |
|
Да |
Да |
Да |
|
Да |
Да |
Да |
|
Да |
Да |
Да |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Описание
Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа.
Синтаксис
E + F { Описание правил стиля }
Для управления стилем соседнихэлементов используется символ плюса (+), который устанавливается между двумя селекторами E и F. Пробелы вокруг плюса не обязательны. Стиль при такой записи применяется к элементу F, но только в том случае, если он является соседним для элемента E и следует сразу после него. Рассмотрим несколько примеров.
<p>Lorem ipsum <b>dolor</b> sit amet.</p>
Тег <B> является дочерним по отношению к тегу <P>, поскольку он находится внутри этого контейнера. Соответственно <P> выступает в качестве родителя <B>.
<p>Lorem ipsum <b>dolor</b> <var>sit</var> amet.</p>
Теги <VAR> и <B> никак не перекрываются и представляют собой соседние элементы. То, что они расположены внутри контейнера <P>, не влияет на их отношение.
<p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing <tt>elit</tt>.</p>
Соседними здесь являются теги <B> и <I>, а также <I> и <TT>. При этом <B> и <TT> к соседним элементам не относятся из-за того, что между ними расположен контейнер <I>.
Пример
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Соседние селекторы</title>
<style type="text/css"> B + I {
color: red; /* Красный цвет текста */
}
</style>
</head>
<body>
<p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing elit.</p> <p>Lorem ipsum dolor sit amet, <i>consectetuer</i> adipiscing elit.</p>
</body>
</html>
Браузеры
Браузер Internet Explorer 7 не применяет стиль, если между селекторами располагается комментарий (B + /*
плюс */ I).
Селекторы параметров
|
Internet Explorer |
|
|
|
Netscape |
|
|
Opera |
|
|
|
Safari |
|
|
|
Firefox |
|
|
6.0 |
7.0 |
8.0 |
8.0 |
9.0 |
8.0 |
9.2 |
9.5 |
1.3 |
2.0 |
3.1 |
1.5 |
2.0 |
3.0 |
|||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Нет |
Да |
Да |
|
Да |
|
Да |
|
Да |
Да |
Да |
|
Да |
Да |
Да |
|
Да |
Да |
Да |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Описание
Многие теги различаются по своему действию в зависимости от того, какие в нихиспользуются параметры. Например, тег <INPUT> может создавать кнопку, текстовое поле и другие элементы формы всего лишь за счет изменения значение
параметра type. При этом добавление правил стиля к селектору INPUT применит стиль одновременно ко всем созданным с
помощью этого тега элементам. Чтобы гибко управлять стилем подобныхэлементов, в CSS введены селекторы параметров (называемые также селекторы атрибутов). Они позволяют установить стиль тега по присутствию определенного параметра или его значения.
Простой селектор параметра
Описание
Устанавливает стиль для элемента, если задан специфичный параметр тега. Его значение в данном случае не важно.
Синтаксис
[параметр] { Описание правил стиля } E[параметр] { Описание правил стиля }
Стиль применяется к тем тегам, внутри которых добавлен указанный параметр. Пробел между именем селектора и квадратными скобками не допускается.
Пример 1
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Селекторы параметров</title>
<style type="text/css"> Q {
font-style: italic; /* Курсивное начертание */
quotes: "\00AB" "\00BB"; /* Меняем вид кавычек в цитате */
}
Q[title] {
color: maroon; /* Цвет текста */
}
</style>
</head>
<body>
<p>Продолжая известный закон Мерфи, который гласит: <q>Если неприятность
может случиться, то она обязательно случится</q>, можем ввести свое наблюдение: <q title="Из законов Фергюссона-Мержевича">После того, как веб-страница
будет корректно отображаться в одном браузере, выяснится, что она неправильно показывается в другом</q>.</p>
</body>
</html>
Результат примера показан на рис. 1.
Рис. 1. Изменение стиля элемента в зависимости от применения параметра title
В данном примере меняется цвет текста внутри контейнера <Q>, когда к нему добавляется параметр title. Обратите внимание, что для селектора Q[title] нет нужды повторять стилевые свойства, поскольку они наследуются от селектора Q. Браузер IE7 не добавляет кавычки к тексту, только изменяет его цвет.
Параметр со значением
Описание
Устанавливает стиль для элемента в том случае, если задано определенное значение специфичного параметра.
Синтаксис
[параметр="значение"] { Описание правил стиля } E[параметр="значение"] { Описание правил стиля }
В первом случае стиль применяется ко всем тегам, которые содержат указанное значение параметра. А во втором — только к определенным селекторам.
Пример 2
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Селекторы параметров</title>
<style type="text/css"> A[target="_blank"] {
background: url(blank.png) 0 6px no-repeat; /* Параметры фонового рисунка */ padding-left: 15px; /* Смещаем текст вправо */
}
</style>
</head>
<body>
<p><a href="link1.html">Обычная ссылка</a> |
<a href="link2" target="_blank">Ссылка в новом окне</a></p>
</body>
</html>
Результат примера показан ниже (рис. 2).
Рис. 2. Изменение стиля элемента в зависимости от значения параметра target
В данном примере рисунок к ссылке добавляется с помощью свойства background. В его функции входит создание повторяющейся фоновой картинки, но повторение фона можно отменить через значение no-repeat, что в итоге даст единственное изображение.
Значение параметра начинается с определенного текста
Описание
Устанавливает стиль для элемента в том случае, если значение параметра тега начинается с указанного текста.
Синтаксис
[параметр^="значение"] { Описание правил стиля } E[параметр^="значение"] { Описание правил стиля }
В первом случае стиль применяется ко всем элементам, у которых значение параметра начинаются с указанного текста. А во втором — только к определенным селекторам. Использование кавычек не обязательно.
Пример 3
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Селекторы параметров</title>
<style type="text/css"> A[href^="http://"] {
font-weight: bold /* Жирное начертание */
}
</style>
</head>
<body>
<p><a href="link1.html">Обычная ссылка</a> |
<a href="http://htmlbook.ru" target="_blank">Внешняя ссылка на сайт htmlbook.ru</a></p>
</body>
</html>
Результат примера показан ниже (рис. 3).
Рис. 3. Изменение стиля для внешних ссылок
В данном примере внешние ссылки выделяются жирным начертанием. Внешние ссылки характеризуются добавлением к адресу протокола, например, для доступа к гипертекстовым документам используется протокол HTTP. Поэтому внешние ссылки начинаются с ключевого слова http://, его и добавляем к селектору A, как показано в примере.
Значение параметра оканчивается определенным текстом
Описание
Устанавливает стиль для элемента в том случае, если значение параметра оканчивается указанным текстом.
Синтаксис
[параметр$="значение"] { Описание правил стиля } E[параметр$="значение"] { Описание правил стиля }
В первом случае стиль применяется ко всем элементам у которыхзначение параметра завершается заданным текстом. А во втором — только к определенным селекторам.
Пример 4
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Селекторы параметров</title> <style type="text/css">
A[href$=".ru"] { /* Если ссылка заканчивается на .ru */
background: url('ru.png') no-repeat 0 6px; /* Добавляем фоновый рисунок */ padding-left: 12px; /* Смещаем текст вправо */
}
A[href$=".com"] { /* Если ссылка заканчивается на .com */ background: url('com.png') no-repeat 0 6px; padding-left: 12px;
}
</style>
</head>
<body>
<p><a href="http://www.yandex.com">Yandex.Com</a> | <a href="http://www.yandex.ru">Yandex.Ru</a></p>
</body>
</html>
В данном примере содержатся две ссылки, ведущие на разные домены — com и ru. При этом к каждой такой ссылке с
помощью стилей добавляется своя фоновая картинка (рис. 4). Стилевые свойства будут добавляться только для тех ссылок, параметр href которых оканчивается на «.ru» или «.com». Заметьте, что добавив к имени домена слэш
(http://www.yandex.ru/) или адрес страницы (http://www.yandex.ru/fun.html), мы изменим тем самым окончание и стиль применяться уже не будет.
Рис. 4. Добавление картинки к ссылкам
Значение параметра содержит указанный текст
Описание
Возможны варианты, когда стиль следует применить к тегу с определенным параметром, при этом частью его значения является некоторый текст. При этом точно не известно, в каком месте значения включен данный текст — в начале, середине или конце. В подобном случае следует использовать конструкцию *=.
Синтаксис
[параметр*="значение"] { Описание правил стиля } E[параметр*="значение"] { Описание правил стиля }
Пример 5
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Селекторы параметров</title>
<style type="text/css"> [href*="htmlbook"] {
background: yellow; /* Желтый цвет фона */
}
</style>
</head>
<body>
<p><a href="http://www.htmlbook.ru/html/">Теги HTML</a> | <a href="http://stepbystep.htmlbook.ru">Шаг за шагом</a> | <a href="http://webimg.ru">Графика для Веб</a></p>
</body>
</html>
Результат данного примера показан на рис. 5. В примере показано изменение стиля ссылок, в параметре href которых встречается слово «htmlbook».
Рис. 5. Изменение стиля для ссылок, в адресе которых встречается «htmlbook»
Одно из нескольких значений параметра
Описание
Некоторые значения параметров могут перечисляться через пробел, например имена классов. Чтобы задать стиль при наличии в списке требуемого значения требуется использовать конструкцию ~=.
Синтаксис
[параметр~="значение"] { Описание правил стиля } E[параметр~="значение"] { Описание правил стиля }
Стиль применяется в том случае, если у параметра имеется указанное значение или оно входит в список значений, разделяемыхпробелом.
Пример 6
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Блок</title>
<style type="text/css"> [class~="block"] h3 { color: green; }
</style>
</head>
<body>
<div class="block tag"> <h3>Заголовок</h3>
</div>
</body>
</html>
В данном примере зеленый цвет текста применяется к селектору H3, если имя класса у слоя задано как block. Отметим, что аналогичный результат можно получить, если использовать конструкцию *= вместо ~=.
Дефис в значении параметра
Описание
В именах идентификаторов и классов разрешено использовать символ дефиса (-), что позволяет создавать значащие значения параметров id и class.
Синтаксис
[параметр|="значение"] { Описание правил стиля } E[параметр|="значение"] { Описание правил стиля }
Стиль применяется к элементам, у которых параметр начинается с указанного значения или с фрагмента значения, после которого идет дефис.
Пример 7
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Блок</title>
<style type="text/css"> DIV[class|="block"] {
background: #306589; /* Цвет фона */ color: #acdb4c; /* Цвет текста */ padding: 5px; /* Поля */
}
DIV[class|="block"] A {
color: #fff; /* Цвет ссылок */
}
</style>
</head>
<body>
<div class="block-menu-therm"> <h2>Термины</h2>
<div class="content"> <ul class="menu">
<li><a href="t1.html">Буквица</a></li> <li><a href="t2.html">Выворотка</a></li> <li><a href="t3.html">Выключка</a></li>
<li><a href="t4.html">Интерлиньяж</a></li> <li><a href="t5.html">Капитель</a></li> <li><a href="t6.html">Начертание</a></li>
<li><a href="t7.html">Отбивка</a></li>
</ul>
</div>
</div>
</body>
</html>
В данном примере имя класса задано как block-menu-therm, поэтому в стиляхиспользуется конструкция |="block", поскольку значение начинается именно с этого слова и в значении встречаются дефисы.