Css контекстные селекторы: Контекстные селекторы | htmlbook.ru
Содержание
Контекстные селекторы | htmlbook.ru
При создании веб-страницы часто приходится вкладывать одни
теги внутрь других. Чтобы стили для этих тегов использовались
корректно, помогут селекторы, которые работают только в определённом
контексте. Например, задать стиль для тега <b> только
когда он располагается внутри контейнера <p>.
Таким
образом можно одновременно установить стиль для отдельного тега, а
также для тега, который находится внутри другого.
Контекстный селектор состоит из простых селекторов разделенных
пробелом. Так, для селектора тега синтаксис будет следующий.
Тег1 Тег2 { ... }
В этом случае стиль будет применяться к Тегу2 когда он
размещается внутри Тега1, как показано ниже.
<Тег1>
<Тег2> ... </Тег2>
</Тег1>
Использование контекстных селекторов продемонстрировано в примере 10.1.
Пример 10.1. Контекстные селекторы
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Контекстные селекторы</title>
<style>
P B {
font-family: Times, serif; /* Семейство шрифта */
color: navy; /* Синий цвет текста */
}
</style>
</head>
<body>
<div><b>Жирное начертание текста</b></div>
<p><b>Одновременно жирное начертание текста
и выделенное цветом</b></p>
</body>
</html>
В данном примере показано обычное применение тега <b> и
этого же тега, когда он вложен внутрь абзаца <p>.
При
этом меняется цвет и шрифт текста, как показано на рис. 10.1.
Рис. 10.1. Оформление текста в зависимости от вложенности тегов
Не обязательно контекстные селекторы
содержат только один вложенный
тег. В зависимости от ситуации допустимо применять два и более
последовательно вложенных друг в друга тегов.
Более широкие возможности контекстные селекторы дают при использовании идентификаторов
и классов. Это позволяет устанавливать стиль только для того элемента, который
располагается внутри определённого класса, как показано в примере 10.2.
Пример 10.2. Использование классов
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Контекстные селекторы</title>
<style>
A {
color: green; /* Зеленый цвет текста для всех ссылок */
}
.menu {
padding: 7px; /* Поля вокруг текста */
border: 1px solid #333; /* Параметры рамки */
background: #fc0; /* Цвет фона */
}
. menu A {
color: navy; /* Темно-синий цвет ссылок */
}
</style>
</head>
<body>
<div>
<a href="1.html">Русская кухня</a> |
<a href="2.html">Украинская кухня</a> |
<a href="3.html">Кавказская кухня</a>
</div>
<p><a href="text.html">Другие материалы по теме</a></p>
</body>
</html>
Результат данного примера показан на рис. 10.2.
Рис. 10.2. Ссылки разных цветов
В данном примере используется два типа ссылок. Первая ссылка,
стиль
которой задаётся с помощью селектора A,
будет действовать на всей
странице, а стиль второй ссылки (.menu A)
применяется только к ссылкам
внутри элемента с классом menu.
При таком подходе легко управлять стилем одинаковых элементов,
вроде
изображений и ссылок, оформление которых должно различаться в разных
областях веб-страницы.
Вопросы для проверки
1. Какой цвет будет у текста списка в следующем коде?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Контекстные селекторы</title>
<style>
UL LI UL { color: green; }
UL UL { color: red; }
LI SPAN { color: blue; }
LI LI { color: fuchsia; }
UL SPAN { color: orange; }
</style>
</head>
<body>
<ul>
<li>
<ul>
<li><span>Первый</span></li>
<li><span>Второй</span></li>
<li><span>Третий</span></li>
</ul>
</li>
</ul>
</body>
</html>
- Зелёный.
- Красный.
- Синий.
- Розовый.
- Оранжевый.
2. В коде выше какого цвета будут маркеры перед текстом?
- Зелёного.
- Красного.
- Синего.
- Розового.
- Оранжевого.
Ответы
1. Оранжевый.
2. Розового.
Специальные селекторы в CSS. Соседние, дочерние, контекстные селекторы и селекторы по атрибуту тега
Приветствую Вас, уважаемые читатели. В предыдущих статьях мы изучали, в основном, атрибуты стилей CSS. Их очень много. Одни задают параметры шрифтов, другие параметры фона, третьи параметры отступов и рамок.
В этой статье мы поговорим о селекторах стилей. В одной из статье мы уже затрагивали тему селекторов, в частности селекторы тегов и стилевые классы. А сегодня рассмотрим еще несколько видов селекторов, которые не явно привязывают правило стиля к элементу веб-страницы. Это так называемые специальные селекторы. Их бывает несколько видов.
Комбинаторы в CSS (Соседний, дочерний и контекстный селекторы)
Комбинаторы — это разновидность css селекторов, привязывающие правило стиля к элементу web-страницы на основании его местоположения относительно других элементов.
Первый комбинатор символ плюс (+) или соседний селектор. Плюс устанавливается между двумя селекторами:
<селектор 1> + <селектор 2> { <стиль> }
Стиль в этом случае применяется к селектору 2, но только в том случае если он является соседним для селектора 1 и идет сразу после него. Рассмотрим пример:
strong + i {
color: red; /* Красный цвет текста */
}
…
<p>Это обычный текст. <strong>Это жирный текст</strong>, обычный текст, <i>красный текст</i> к нему применилось правило соседних селекторов.</p>
<p>Это обычный текст. <strong>Это жирный текст</strong>, <span>обычный текст</span>, <i>и это обычный текст</i>.</p>
Результат:
Стиль описанный в примере будет применен только к первому тексту заключенному в тег <i>, т.к. он следует сразу же после тега <strong>.
Комбинатор тильда (~) также применяется к соседним селекторам, но в этот раз между ними могут быть другие элементы. При этом оба селектора должны быть вложены в один и тот же родительский тег:
<селектор 1> ~ <селектор 2> { <стиль> }
Стиль будет применен к селектору 2, который должен следовать за селектором 1. Рассмотри пример:
strong ~ i {
color: red; /* Красный цвет текста */
}
…
<p>Это обычный текст. <strong>Это жирный текст</strong>, обычный текст, <i>красный текст</i> к нему применилось правило соседних селекторов.</p>
<p>Это обычный текст. <strong>Это жирный текст</strong>, <span>обычный текст</span>, <i>а это красный текст</i>.</p>
Результат:
Как видим, в этот раз правило стиля сработало для обоих текстов заключенных в тег <i>, несмотря на то, что во втором случае между тегом <strong> и <i> стоит тег <span>.
Комбинатор > относится к дочерним селекторам. Позволяет привязать стиль CSS к элементу веб-страницы, непосредственно вложенному в другой элемент:
<селектор 1> > <селектор 2> { <стиль> }
Стиль будет привязан к селектору 2, который непосредственно вложен в селектор 1.
Пример:
div > strong {
font-style: italic /* Курсив */
}
…
<div>Это обычный текст. <strong>Это жирный курсивный текст </strong>.
<p>Это обычный текст. <strong>А это обычный жирный текст</strong>.</p>
</div>
И результат:
Как видно на рисунке, правило стиля подействовало только на первый тег <strong>, который непосредственно вложен в тег <div>. А непосредственным родителем второго тега <strong> является тег <p>, поэтому правило на него не действует.
Следующим рассмотрим контекстный селектор <пробел>. Он позволяет привязать CSS стиль к элементу вложенному в другой элемент, причем может быть любой уровень вложенности:
<селектор 1> <селектор 2> { <стиль> }
Стиль будет применен к селектору 2, если он так или иначе вложен в селектор 1.
Рассмотрим предыдущий пример, только при описании CSS правила применим контекстный селектор:
div strong {
font-style: italic /* Курсив */
}
…
<div>Это обычный текст. <strong>Это жирный курсивный текст </strong>.
<p>Это обычный текст. <strong>А это тоже курсивный жирный текст</strong>.</p>
</div>
<p>Обычный текст и <strong>просто жирный текст</strong></p>
Результат:
Как видим, на этот раз правило подействовало на оба тега <strong>, даже на тот, который вложен и в контейнер <div> и в абзац <p>. На тег <strong>, который просто вложен в абзац <p> правило css никак не действует.
Селекторы по атрибутам тега
Селекторы атрибутов — это специальные селекторы, которые привязывают стиль к элементу на основании, присутствует ли в нем определенный атрибут или имеет ли он определенное значение. Существует несколько вариантов применения таких селекторов.
1. Простой селектор атрибута
Имеет вид:
<селектор>[<имя атрибута тега>] { <стиль> }
И привязывает стиль к тем элементам, внутри которых добавлен указанный атрибут. Например:
strong[title]{
color:red;
}
…
<p><strong>Автомобиль</strong> это механическое моторное безрельсовое <strong title=»транспортное средство»>дорожное транспортное средство</strong> минимум с 4 колёсами.</p>
Результат:
На рисунке можно заметить, что правило css (красный цвет текста) применяется к элементу strong, к которому добавлен атрибут title.
2. Селектор атрибута со значением
Синтаксис этого селектора следующий:
<селектор>[<имя атрибута тега>=<значение>] { <стиль> }
Привязывает стиль к элементам, теги которых имеют атрибут с указанным именем и значением. Пример:
a[target=»_blank»]{
color:red;
font-size:150%;
}
…
<p><a href=»//webcodius.ru» target=»_self»>Обычная ссылка</a> | <a href=»//webcodius.ru» target=»_blank»>Ссылка в новом окне</a></p>
Результат:
Как видим, оба элемента типа гиперссылка имеют атрибут target, но правило css, которое увеличивает текст ссылки в полтора раза и изменяет его цвет в красный, применяется к тегу <a> у которого атрибут target имеет значение «_blank».
3. Одно из нескольких значений атрибута
Некоторые значения атрибутов могут перечисляться через пробел, например имена классов. Чтобы задать правило стиля при наличии в списке значений атрибутов требуемого значения применяется следующий селектор:
[<имя атрибута тега>~=<значение>] { <стиль> }
<основной селектор>[<имя атрибута тега>~=<значение>] { <стиль> }
Стиль применяется в том случае, если у атрибута имеется требуемое значение или оно входит в список значений, разделенных пробелами. Например:
[class~=»tel»]{
color:red;
font-size:150%;
}
…
<p>Наш телефон: <span>777-77-77</span></p>
<p>Наш адрес: <span>Москва ул. Советская 5</span></p>
Получиться следующий результат:
Правило применяется к элементу, у которого среди значений атрибута class имеется значение tel.
4. Дефис в значении атрибута
В значениях идентификаторов и классов допускается использовать дефис. Для привязки стиля к элементам, значения атрибутов которых могут содержать дефис можно воспользоваться следующей конструкцией:
[атрибут|=»значение»] { стиль }
Селектор[атрибут|=»значение»] { стиль }
Стиль применяется к тем элементам, у которых значение атрибута начинается с указанного значения после, которого идет дефис. Например:
[class|=»menu»]{
color:red;
font-size:150%;
}
…
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
</ul>
Результат:
В примере правило стиля применяется только к тем элементам списка, у которых имя класса начинается со значения «menu- „. =»http://»]{
color:green;
font-weight:bold;
}
…
<p><a href=“//webcodius.ru»>Внешняя ссылка</a> | <a href=»/spravochnik-css/chto-takoe-css-i-kak-podklyuchit-kaskadnye-tablicy-stilej-k-html-dokumentu.html» target=»_blank»>Ссылка на внутреннюю страницу сайта</a></p>
Результат:
В примере показано, как по разному отобразить внешние ссылки и внутренние ссылки. Внешние ссылки всегда начинаются со строки «http://». Поэтому в селекторе указываем, что стиль применять только к ссылкам, у которых атрибут href начинается со значения http://.
6. Значение атрибута заканчивается определенным текстом
Привязывает стиль к элементам, у которых значение атрибута заканчивается указанным текстом. Имеет следующий синтаксис:
[<имя атрибута тега>$=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> }
В первом случае стиль применяется ко всем элементам, у которых имеется атрибут с указанным именем и имеет значение оканчивающееся указанной подстрокой. Во втором случае тоже самое, только к указанным селекторам. Таким способом, например, можно по разному отображать различные форматы графических изображений. Например:
IMG[SRC$=gif] {
border: 5px solid red;
}
…
<p>Картинка формата gif</p>
<img src=»1.gif»>
<p>Картинка формата png</p>
<img src=»2.jpg»>
Результат:
В примере все картинки с расширением gif будут отображаться с красной рамкой толщиной пять пикселей.
7. Значение атрибута содержит указанную строку
Этот селектор привязывает стиль к тегам, значение атрибута которых содержат определенный текст. Синтаксис:
[<имя атрибута тега>*=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> }
Стиль привязывается к элементам, у которых имеется атрибут с указанным именем и его значение содержит указанную подстроку. Например:
IMG[SRC*=gallery/] {
border: 5px solid red;
}
…
<p>Картинка из папки gallery</p>
<img src=»gallery/1.jpg»>
<p>Картинка из другой папки</p>
<img src=»2.jpg»>
Результат:
В примере стиль применяется к картинкам, которые загружены из папки «gallery».
На этом об селекторах атрибутов все. Все перечисленные методы можно комбинировать между собой:
Селектор[атрибут1=»значение1″][атрибут2=»значение2″] { стиль }
Кроме того напомню о специальных селекторах CSS :
- с помощью символов «+» и «~» формируются соседние селекторы;
- символ «>» привязывает css стили к дочерним тегам;
- символ <пробел> формирует контекстные селекторы.
В следующих статьях мы рассмотрим также псевдоэлементы и псевдоклассы, которые предоставляют мощный инструмент управления стилями.
На этом все, до новых встреч.
Селекторы CSS
В этой статье мы разберём различные виды селекторов. У каждого из них своя задача и каждый срабатывает лишь при соблюдении условий, и по этим условиям делятся на несколько видов:
1) Обычный селектор.
2) Контекстный селектор.
3) Селектор ID.
4) Селектор CLASS.
5) Селектор параметров.
Обсуждать обычный селектор мы не будем, потому что, во-первых, мы его обсуждали, а, во-вторых, это обычный HTML-тег, поэтому тут и сказать нечего.
А теперь подробно разберём контекстные селекторы, так как их используют, пожалуй, чаще всего. Они нужны для того, чтобы к элементу применялся стиль при условии, что данный элемент лежит внутри тега, который лежит внутри другого тега. Звучит запутанно, не спорю, но давайте разберёмся на примере
<div><h3>Заголовок в контейнере</h3></div>
Элемент, в данном случае — это текст «заголовок в контейнере» лежит в теге <h3>, который в свою очередь лежит в теге <div>. Этот пример поясняет то, что я написал чуть выше. А теперь вернёмся к контекстным селекторам. Синтаксис следующий:
тег1 тег2 {
свойство1: значение1;
свойство2: значение2;
}
И работает это так: если тег2 находится внутри тега 1, то элементы внутри тега2 примут свойства1 и свойства2 со значениями значение1 и значение2. А теперь пример CSS для примера выше.
div h3 {
font-weight: bold;
}
Такой стиль будет применён к примеру выше и «заголовок в контейнере» станет жирным. А если будет написано просто:
<h3>Заголовок</h3>
То стиль применён к этому элементу не будет, ведь он не находится внутри тега <div>.
Вопрос: для чего же нужны контекстные селекторы? Их Вы будете вынуждены использовать многократно, ввиду того, что на Вашей странице наверняка будет множество повторяющихся тегов (<div>, <p>, <tr>, <td>, <table> и прочие), и, разумеется, Вы захотите, чтобы у них был далеко не всегда одинаковый внешний вид. И вот тут и придут на помощь контекстные селекторы.
Селекторы ID тоже очень распространены. Они позволяют задать уникальный элемент на странице, и синтаксис объявления этого селектора следующий:
имятега#имя {
свойство1: значение1;
свойство2: значение2;
}
Теперь если тегу «имятега» имеет атрибут «id» со значением «имя«, то к элементам внутри тега «имятега» будет применён стиль.
Если «имятега» отсутствует (то есть селектор начинается с символа «#»), то тогда данный стиль может быть применён к любым тегам, у которых стоит атрибут «id» в значении «имя«.
А теперь пример:
#red {
color: red;
}
И теперь HTML-код, к которому будет применён данный стиль:
<p id = "red">Красный текст</p>
Как видите, всё очень просто, однако есть одно большое НО! Используйте ОДИН идентификатор только ОДИН РАЗ на странице! Например, вот так писать нельзя:
<p id = "red">Красный текст</p>
<p id = "red">Ещё один красный текст</p>
В таких случаях надо создавать два идентификатора вот так:
#red1, #red2 {
color: red;
}
И HTML-код:
<p id = "red1">Красный текст</p>
<p id = "red2">Ещё один красный текст</p>
Вот теперь будет правильно. Кстати, обратите внимание на «запятую» в описании селектора. Это частый приём для сокращения количества строк в стиле. Если у Вас два или более элемента имеют один и тот же стиль, то Вы можете через запятую перечислить все селекторы, а потом сразу для всех написать соответствующий стиль, как в примере выше.
Теперь о селекторе CLASS. Он очень похож на селектор ID, но его «имя» может использоваться несколько раз на странице. Общий синтаксис этого селектора следующий:
имятега.имя {
свойство1: значение1;
свойство2: значение2;
}
Таким образом, если у тега «имятега» стоит атрибут «class» со значением «имя«, то к элементам внутри будет применён данный стиль.
Аналогично, с селектором ID, если «имятега» не задано (то есть описание селектора начинается с символа «.»), то данный стиль может быть присвоен любым элементам.
А теперь пример:
.red {
color: red;
}
И HTML-код под этот стиль:
<p class = "red">Красный текст</p>
<p class = "red">Ещё один красный текст</p>
Вновь всё очень просто. Теперь встаёт вопрос: чем же тогда лучше селектор ID? А лучше он тем, что к данным элементам очень удобное обращение через, например, JavaScript. Поэтому очень удобно задать именно ID, при условии, что такой элемент всего один на странице, то есть он является уникальным.
И последний тип селекторов CSS — это селектор параметров. Не очень часто используют, но в некоторых случаях он является практически незаменимым. Я, надеюсь, что Вы заметили, что вид многих тегов зависит от их атрибутов. Ярким примеров является тег <input>, который может быть и кнопкой, и переключателем, и текстовым полем. Согласитесь, что выглядят все эти элементы совершенно по-разному, однако, отвечает за них один и тот же тег. И для того, чтобы применять стиль лишь при определённом значении какого-либо атрибута, и используют селекторы параметров. Синтаксис следующий
имятега[имяатрибута="значениеатрибута"] {
свойство1: значение1;
свойство2: значение2;
}
Применяется данный стиль в следующем случае: если в теге «имятега» значение «имяатрубита» равно «значениеатрибута» то будет применён стиль, в противном случае стиль не применяется.
Чтобы стало ещё понятнее, привожу пример:
input[type="submit"] {
border: 2px double black;
}
И HTML:
<input type = "submit" value = "Кнопка с двойной чёрной рамкой">
<input type = "button" value = "Другая кнопка">
Надеюсь, что и здесь всё прозрачно. Ещё один очень важный момент, виды селекторов можно совмещать, например, данный CSS вполне нормальный и рабочий:
#header li a {
font-size: 150%;
}
И HTML-код, который вызовет этот стиль:
<ul id = "header">
<li>
<a href = "http://myrusakov.ru">Текст с размером 150%</a>
</li>
</ul>
Думаю, что и здесь вопросов не возникнет.
Напоследок хочется сказать, что селекторы — это основа CSS, которую обязан знать любой, кто создаёт сайты с нуля. А как применять эти селекторы — это уже зависит только от Ваших дизайнерских навыков.
-
Создано 21. 07.2010 20:44:56 -
Михаил Русаков
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
CSS селекторы и их типы на видеокурсе от Loftblog
Добро пожаловать на второй урок нашего видеокурса по основам CSS. Сегодняшний видеоурок мы посвятим одному из самых важных понятий CSS — селекторам. Рассмотрим под микроскопом, на какие типы они подразделяются и как записываются.
Все селекторы CSS как на ладони
Различают следующие типы селекторов CSS:
- 1) универсальные селекторы,
- 2) селекторы по названию тега,
- 3) селекторы по классу,
- 4) селекторы по id,
- 5) селекторы по атрибуту,
- 6) селекторы потомков, или контекстные селекторы,
- 7) селекторы дочерние (только первые),
- 8) селекторы сестринские, или соседние (расположенные на одном уровне),
- 9) селекторы псевдоклассов (селекторы состояния),
- 10) селекторы псевдоэлементов.
На видеоуроке будет подробно рассмотрен каждый тип селекторов CSS в отдельности
Универсальные селекторы CSS
Универсальные селекторы CSS обозначаются обыкновенной звездочкой «*». Под звездочкой может подразумеваться любой элемент разметки HTML-страницы.
* {
font-size: 16px;
}
CSS селекторы по названию тега
Запись селекторов по тегам также не представляет из себя никакой сложности. Выглядит она следующим образом:
h2 {
color: red;
}
где h2 — селектор по названию тега.
CSS селекторы по классам
Следующими в нашем списке видов селекторов CSS идут селекторы по классам. Напомним,, что «class» — это атрибут HTML-тега, он очень удобен тем, что может применяться к однотипным элементам. Название класса может быть каким угодно, главное, чтобы оно соответствовало тому элементу, который описывается CSS-правилом. Вообще атрибут «class» считается самым главным инструментом CSS.
При создании CSS-правила точка «. » перед именем класса обязательна.
.main-header {
background-color: #99ffcc;
}
CSS селекторы по id
К атрибутам HTML-тегов относится и id. Атрибут этот применяется к индивидуальному элементу, т.е. элемент с id может быть в единственном экземпляре на странице согласно правилам семантики. В каскадных таблицах стилей атрибуты эти используются крайне редко, их применение к ним вообще не приветствуется, они предназначены в основном для работы с javascript. На всякий случай полезно знать. что селектор по id в CSS-правиле оформляется так:
#heading {
font-size: 35px;
}
CSS селекторы по атрибутам
Далее будут рассмотрены CSS селекторы по атрибутам HTML-тегов. Их запись также не представляет особой сложности:
a[href = "https://loftblog.ru/"] {
color: black;
}
CSS селекторы потомков, или контекстные селекторы
Под CSS селекторами потомков, или контекстными селекторами подразумевается ситуация, когда один элемент HTML-страницы вложен в другой, причем не обязательно он должен быть первым потомком.
.wraping p {
padding: 15px;
}
Дочерние селекторы CSS
Дочерние селекторы CSS отличаются от селекторов потомков тем, что под дочерним подразумевается только первый потомок, никакие «внуки» и «правнуки» не попадают в эту категорию.
.wraping>p {
`padding: 15px;
}
Сестринские, или соседние селекторы CSS
При помощи сестринского селектора создается CSS-правило для HTML-элементов, расположенных на одном уровне, причем тот элемент, который записывается как сестринский должен быть самым ближайшим из себе подобных к тому элементу, к которому он записывается в «сестры».
h2 + p {
padding-bottom: 30px;
}
CSS селекторы псевдоклассов
К селекторам псевдоклассов относятся селекторы CSS, которые описывают состояния элементов при совершении над ними какого-либо действия. Это могут быть наведение на элемент курсора мыши, клик по элементу и т.п. Записываются они через двоеточие к элементу, к которому применяются.
a:hover {
text-decoration: none;
}
CSS селекторы псевдоэлементов
И последними на сегодняшнем видеоуроке будут рассмотрены CSS селекторы псевдоэлементов. Их прелесть заключается в том, что с их помощью (::before, ::after) можно добавлять различные элементы на веб-странички, но при этом псевдоэлементы никак не будут отражены в HTML-разметке этих страниц. Записываются они по отношению к элементу через двойное двоеточие.
p::first-letter{
color: red;
}
Мы очень надеемся, что этот урок окажется весьма полезным для вас и послужит стимулом для дальнейшего изучения нашего видеокурса по основам CSS.
Приятного всем просмотра! Учитесь с удовольствием! Всегда ваш Loftblog.
Рекомендуемые курсы
Контекстные селекторы в CSS2 — CodeRoad
Мне интересно, почему стилизация элемента внутри определенного класса, как это:
.reddish h2 { color: red }
показан в качестве примера правильного синтаксиса в спецификации CSS1 в разделе контекстные селекторы:
Каскадные Таблицы Стилей, уровень 1
но это не показано в качестве примера в спецификации CSS2:
Каскадные Таблицы Стилей, Уровень 2
По крайней мере, я не могу найти такого примера. Изменились ли синтаксические правила для этого в CSS2, или это просто выводится как правильный синтаксис?
css
syntax
css-selectors
Поделиться
Источник
Unknown
20 ноября 2008 в 00:17
2 ответа
- CSS2 селекторы и переопределение стиля
Это HTML: <div id=testBlue> <span>hello</span> <span id=testGreen class=testGreen>hello2</span> </div> Если я установил в CSS: #testBlue span { color:Blue; } .testGreen, #testGreen { color:Green; } Как я могу переопределить общий стиль во втором SPAN? Я пробовал…
- Как пользоваться компасом background-with-css2-fallback «подмешать»?
Как пользоваться компасом background-with-css2-fallback подмешать в случае неудачи? Я специально хочу иметь возможность установить цвет фона по умолчанию для более старых версий IE. Вот что я сейчас пытаюсь сделать, но IE8 и ниже, похоже, не распознают его: div { background: #0E1B31; @include…
3
Этот синтаксис верен, но пример, возможно, изменился по нескольким причинам.
Во-первых, не рекомендуется называть классы по описанию того, что они делают. В случае .reddish h2
пример CSS показывает, что он должен быть окрашен в красный цвет. Однако если в более позднем изменении дизайна h2
на самом деле должен быть синим, то
.reddish h2 { color: blue; }
в этом мало смысла. Вы должны называть свои классы по их функции или назначению на странице, а не по стилю, который они должны представлять.
Во-вторых, не рекомендуется использовать ключевые слова для цветов, так как цвет, который вы получаете, зависит от интерпретации браузера. Вместо ‘red’ вы должны использовать шестнадцатеричный код ‘#ff0000’, чтобы получить точный цвет во всех браузерах. (красный, возможно, не самый лучший пример здесь, но есть некоторые странные ключевые слова цвета).
Хотя ни одна из этих вещей не так уж плоха, они оба могли бы добавить, почему пример изменился в спецификации.
Поделиться
philnash
20 ноября 2008 в 01:57
1
Вы должны писать элементы строчными буквами (h2, а не h2).
Поделиться
dylanfm
20 ноября 2008 в 02:32
Похожие вопросы:
Селекторы атрибутов CSS2 с Regex
CSS селекторы атрибутов позволяют выбирать элементы на основе значений атрибутов. К сожалению, я не использовал их в течение многих лет (в основном потому, что они не поддерживаются всеми…
Имитация переполнения текста: многоточие в CSS2
Есть ли какой-нибудь способ имитировать text-overflow: ellipsis с помощью CSS2? Я нашел это решение, которое эмулирует text-overflow:ellipsis в firefox с CSS, но оно не работает. Меня не интересует…
Поддержка браузера для CSS3 vs CSS2? Что еще более важно, дизайн против CSS2 или CSS3?
Есть ли у кого-нибудь обновленная статистика относительно поддержки браузером CSS3 vs CSS2? Есть старые посты SO с 2008 года, но нам любопытно, насколько широко поддерживается CSS3 сейчас. Что еще…
CSS2 селекторы и переопределение стиля
Это HTML: <div id=testBlue> <span>hello</span> <span id=testGreen class=testGreen>hello2</span> </div> Если я установил в CSS: #testBlue span { color:Blue; }…
Как пользоваться компасом background-with-css2-fallback «подмешать»?
Как пользоваться компасом background-with-css2-fallback подмешать в случае неудачи? Я специально хочу иметь возможность установить цвет фона по умолчанию для более старых версий IE.=foo AND id$=bar] , чтобы он выбирал все <tr id=foo_something_bar> , но не <tr id=foo_something> или <tr…
как загрузить шрифт с сервера, используя в CSS2
Я хочу загрузить шрифт с сервера с помощью css2. Я хочу сохранить шрифт на сервере. Я не хочу использовать CSS3, так как не все браузеры поддерживают его, так как я могу сделать это с помощью css2?…
<link rel=»stylesheet» type=»text/css» href=»css2/css2.css»> не работает
Я пытался соединить html с CSS. Я это проверил: Путь таблицы стилей css является правильным, и это: css2/css2.css Код <link rel=stylesheet type=text/css href=css2/css2.css /> хорошо написан, и…
Был Media-запрос, либо часть в CSS2?
У меня возник простой вопрос — присутствовали ли Media_Queries в CSS2 (запущен в ноябре 1997 года) или они появились только в CSS 3(7 июня 2011 года)? Media запросов-это функция CSS3, позволяющая…
13. Псевдоклассы и контекстные селекторы · Неожиданный HTML
Поскольку объекты страницы могут принимать разные состояния, нам нужны конструкции, которые бы позволяли с этими состояниями работать
:hover – псевдокласс, который срабатывает в тот момент, когда над объектом находится курсор.
Например если написать в css-файле
.block{
background:blue;
width:100px;
height:100px;
}
.block:hover {
background:red;
}
То данный код будет окрашивать div’ы с классом block в красный цвет при наведении на них курсора.
:visited – определяет цвет гиперссылки после того как она была «посещена», то по ней произошел переход на сайт.
Задание: сделать, чтобы гиперссылки по умолчанию не подчеркивались, а при наведении на них курсора подчеркивание возникало. Посещенные ссылки должны окрашиваться в красный цвет.
:active – срабатывает при клике на объект. Правда active работает только до тех пор, пока мы держим клавишу зажатой.
:focus – срабатывает, когда у элемента с фокусом, например, когда в input’e есть мигающий курсор ввода
<input type="text">
input:focus {
border:10px solid purple;
}
Контекстные селекторы
Допустим у нас есть блок-корзина и товары. Мы хотим, чтобы товары при перемещении в корзину получали специальное оформление, например обводились границей.
.cart {
width:400px;
height:200px;
background-color:grey;
}
.product {
width:100px;
height:100px;
background-color:cornflowerblue;
}
Но если товар попал в корзину, то должна появится корзина
.cart .product {
border:20px solid black;
}
Контекстные селекторы и псевдоклассы
Можно группировать контекстные селекторы с псевдоклассами.
.big:hover .small {
background:red;
}
Данное оформление означает, что к элементу .small , который находится внутри .big , на который навели курсор.
Неочевидные моменты
- При наведении курсора на вложеный элемент, срабатывает hover и на родителе.
- Селектор в контексте имеет больший приоритет, чем селектор без контекста
Рассмотри следующий css-файл
.parent .block {
background-color:orange;
}
.block {
width:100px;
height:100px;
background-color:violet;
}
соответствующий ему html
<div>
<div>
</div>
</div>
Сначала нам кажется, что блок будет фиолетовым, так как селектор с ним стоит ниже, но засчет контекста, мы получим оранжевый.
Примеры
Различные hover-эффекты при наведении на кнопку
http://codepen.io/fox_hover/pen/bqZxLaКнопки с градиентами, которые меняют их при наведении
http://codepen.io/pirrera/pen/bqVe- Библиотека различных hover-эффектов
http://ianlunn.github.io/Hover/
Практика:
- Нужно сделать, чтобы гиперссылка по умолчанию была без подчеркивания, но при наведении начинала подчеркиваться
- Изменение цвета div’a при наведении
- Картинка закрыта градиентом. При наведении градиент пропадает.
- Задаем разные цвета блоков-детей у разных блоков-родителей с помощью контекстных селекторов
- Строим спрайт. При наведении меняем картинку на ее черно-белую копию
При наведении на блок, вложенные блоки показываются
Есть картинка на фоне блока. При наведении картинка приближается, блок не увеличивается.
- Есть меню с вложенными подпунктами. При наведении на пункт меню, появляются его подпункты.
- Есть картинка при клике на нее, она увеличивается и сохраняет свои размеры до тех пор пока на ней курсор мыши.
Задания: CSS селекторы — htmllab
Ягоды: малина
Для уверенной верстки, требуется в идеале знать селекторы CSS: css селекторы классов, css селекторы атрибутов, соседние селекторы css, контекстные селекторы css, дочерние селекторы +в css, приоритет селекторов (нахождение приоритета, специфичность селектора), группировка селекторов, селектор первый элемент, селектор по id.
Задания: CSS селекторы
- Используйте селекторы по атрибуту, чтобы покрасить все гиперссылки, которые ведут на ведущие социальные сети
- Задание по верстке альтернативное предыдущему: Сверстайте фрагмент HTML-страницы, содержащий текст с гиперссылками, часть из которых ведет на социальные сети. У каждой ссылки на соцсеть, нарисуйте пиктограмму.
- Используйте селекторы псевдокласов, чтобы раскрасить ненумерованый список «зеброй»
- Используйте селектор псевдокласса для окраски всех пустых HTML-элементов div на странице
- Используйте псевдокласс, для окраски HTML-элемента на странице, атрибут id которого совпадает с хэшем адреса страницы.
- * Реализуйте эффект галереи, без использования JavaScript. Примечание: для работы пригодится псевдокласс из предыдущего задания и умение работать с позиционированием.
- ** Создайте эффект лайтбокса, не используя JavaScript. Примечание: Задание не простое. Лучше пропустите и вернитесь к нему позже, после изучения / повторения работы с позиционированием и анимацией
- Покрасьте при помощи контекстных селекторов все дочерние элементы других элементов. Примечание: помните о разнице в работе селекторов дочерних элементов и элементов потомков
- Создайте небольшие изображения рядом со всеми ссылками на странице. Используйте для этого спрайтовое изображение.
- Применительно CSS стили к тем HTML-элементам текста, которые содержат слово «htmllab». Примечание: сначала нужно создать разметку и разместить в произвольный элемент это слово.
- Используя псевдокласс, реализуйте реакцию на наведение мыши на HTML-элементы.
- Напишите стили оформления страницы перед печатью
- При помощи псевдокласса :hover создайте тень у гиперссылки
Все задания по HTML
Запись опубликована в рубрике CSS стили, Курсы html. Добавьте в закладки постоянную ссылку.
Комбинаторы CSS
Комбинаторы CSS
Комбинатор — это то, что объясняет взаимосвязь между селекторами.
Селектор CSS может содержать более одного простого селектора. Между простым
селекторы, мы можем включить комбинатор.
В CSS есть четыре разных комбинатора:
- Селектор потомков (пробел)
- дочерний селектор (>)
- Селектор соседних братьев (+)
- общий родственный селектор (~)
Селектор потомков
Селектор потомков соответствует всем элементам, которые являются потомками указанного
элемент.
В следующем примере выбираются все элементы
внутри элементов
Селектор детей (>)
Дочерний селектор выбирает все элементы, которые являются дочерними элементами
указанный элемент.
В следующем примере выбираются все элементы
, которые
дочерние элементы
Селектор соседних братьев и сестер (+)
Соседний родственный селектор используется для выбора элемента, который непосредственно
после другого конкретного элемента.
Родственные элементы должны иметь один и тот же родительский элемент, и «смежный» означает
«сразу после».
В следующем примере выбирается первый элемент
, который помещается сразу после элементов
Общий селектор братьев и сестер (~)
Общий селектор одноуровневых элементов выбирает все элементы, являющиеся братьями и сестрами указанного элемента.
В следующем примере выбираются все элементы
, которые являются родственниками элементов
Проверьте себя упражнениями!
Все селекторы комбинаторов CSS
Селектор | Пример | Описание примера |
---|---|---|
элемент элемент | div p | Выбирает все элементы внутри элементов |
элемент > элемент | div> p | Выбирает все элементы , где родительский элемент |
элемент + элемент | div + p | Выбирает первый элемент , который помещается сразу после элементов |
элемент1 ~ элемент2 | полоса | Выбирает каждый элемент
|
Селекторы CSS | Учебник CSS
Хорошо! Итак, теперь, когда вы хорошо разбираетесь в синтаксисе CSS, давайте перейдем к Selectors .Селектор помогает нам идентифицировать элементы HTML, к которым нужно применить тот или иной стиль.
Селекторы
бывают 3-х типов, а именно
- элемент Селекторы
- id Селекторы
- класс Селекторы
Этот модуль поможет вам понять, что означают селекторы и как работают эти три типа селекторов, что, в свою очередь, сэкономит много времени и усилий при разработке обширных (больших) веб-страниц.
Чтобы создать таблицу стилей, нам нужно определить правила, которые выбирают элементы HTML и применяют к ним различные свойства стиля.Мы уже знаем о селекторах элементов (напомним, мы присвоили стиль тегу
), не беспокойтесь, если вы не помните, мы обсудим это снова в этом руководстве. Помимо селектора элементов, двумя наиболее распространенными формами селекторов являются селекторы id и class .
В видео ниже мы подробно объяснили все три типа селекторов CSS.
Селекторы элементов (тегов)
Селектор элементов или селектор тегов, работает на уровне тегов HTML.Когда мы добавляем стиль для HTML-тега напрямую в наш CSS-файл, он называется селекторами элементов.
Например:
HTML код
Добро пожаловать в Studytonight
Код CSS
h2 {
красный цвет;
}
В приведенном выше коде CSS мы напрямую присвоили стиль тегу / элементу h2
, этот способ выбора тега и стиля известен как селекторы элементов, поскольку мы назначаем стиль непосредственно элементу.
Приведенный выше код CSS изменит цвет шрифта текста внутри всех тегов h2
в файле HTML на красный
. Этот режим выбора следует использовать, когда вы хотите применить базовый стиль к любому элементу / тегу, например, если вы хотите, чтобы весь текст абзаца был шрифтом calibri , вы пишете следующее правило CSS:
п {
семейство шрифтов: calibri;
}
Живой пример →
Селекторы идентификаторов
Что делать, если из всех тегов абзацев со шрифтом, установленным как calibri
, вы хотите, чтобы один абзац выделялся на вашей веб-странице, и вы хотите оформить его по-другому.Как ты это сделаешь?
Элементы в HTML могут быть названы для удобства использования с помощью атрибута id внутри тега. Рассмотрим следующий пример:
CSS - это весело!
Теперь, когда тегу присвоено имя, мы можем назначить ему правило стиля, просто используя тег #unique
( #
, за которым следует значение идентификатора ).
#unique {
цвет: зеленый;
выравнивание текста: центр;
}
Живой пример →
Селектор
#id
используется, когда вы хотите стилизовать определенный тег / элемент.Все, что вам нужно сделать, это присвоить тегу HTML атрибут id
и указать его стиль в файле CSS.
Мы также можем сделать селектор id , специфичный для тега / элемента, добавив тег перед селектором #id
в файле CSS.
Рассмотрим следующий стиль:
p # star {
семейство шрифтов: Arial;
}
Живой пример →
При этом будут выбраны только элементы абзаца с атрибутом id
, установленным на звездочка
.Сравнивая это правило с тем, что мы видели ранее,
#star {
семейство шрифтов: Arial;
}
Что будет соответствовать любому элементу / тегу с id = "star"
, будь то абзацы заголовков. Это может ответить на ваш вопрос, могут ли несколько тегов иметь один и тот же идентификатор? Да, они могут! Но по стандартной практике для стилизации отдельного элемента следует использовать атрибут id
.
Хотя CSS предоставляет вам способ выбора правил идентификаторов для конкретных элементов , таких как p # star
, нецелесообразно все время использовать одни и те же имена тегов вместе с селектором id , а затем фильтровать их на основе элементов.Однако такие правила имеют смысл, если у вас есть таблица стилей, которая используется на всем сайте, и у вас есть разные элементы с идентификатором , звездочкой
в разных документах. Чтобы обезопасить себя и избежать путаницы, лучше использовать уникальный идентификатор для элементов.
Селекторы класса
Правила для селекторов класса
определены как . Имя-класса
, как показано ниже:
HTML код
Прикольный абзац
Мне нравится заголовок
Я тоже!
Код CSS
.класс {
цвет фона: черный;
цвет белый;
стиль шрифта: курсив;
}
Живой пример →
Атрибут class
используется для определения имени класса, которому принадлежит конкретный тег или набор тегов. В отличие от значений id
, значения класса не обязательно должны быть уникальными, потому что многие элементы могут быть членами одного и того же класса стиля. Фактически, элементы разного типа также могут принадлежать к одному классу стилей.
Правила класса также имеют некоторые вариации.Например, установив для всех элементов h2
класса css_demo
желтый цвет фона,
h2.css_demo {цвет фона: желтый; }
можно использовать.
Для явного выбора всех элементов класса css_demo
, также можно использовать *
.
* .css_demo {цвет фона: желтый; }
такой же, как,
.css_demo {цвет фона: желтый; }
Хотя атрибуты class
и id
обеспечивают большую гибкость при создании правил стиля, существует множество других тегов с равным значением.Например, вы можете обрабатывать все теги
внутри
иначе, чем теги
, появляющиеся вне тегов
. Для этого необходимо использовать Контекстный выбор .
Такой выбор осуществляется путем указания порядка, в котором теги должны быть вложены, с разделением >
для применения правила. Например,
p> strong {
цвет фона: желтый;
}
Живой пример →
Вышеупомянутое правило будет применяться ко всем тегам
внутри тега
.
Все вхождения элемента strong
в элементе p
будут иметь шрифт Helvetica . К другим вхождениям тега strong
, которые не включены в тег p
, не будет применено то же правило.
Примечание: Будьте осторожны при использовании контекстных селекторов. Нежелательная запятая может превратить контекстный выбор в группировку и наоборот.
Теперь, когда вы освоились с селекторами, перейдем к стилям фона в CSS!
CSS-селекторов — SitePoint
Знакомство с CSS-селекторами
Селектор CSS — это часть набора правил CSS, которая фактически выбирает контент, который вы хотите стилизовать.Давайте рассмотрим все доступные виды селекторов с кратким описанием каждого из них.
Универсальный селектор
Универсальный селектор работает как подстановочный знак, выбирая все элементы на странице. Каждая HTML-страница построена на содержимом, размещенном в HTML-тегах. Каждый набор тегов представляет собой элемент на странице. Посмотрите на следующий пример CSS, в котором используется универсальный селектор:
* {
цвет: зеленый;
размер шрифта: 20 пикселей;
высота строки: 25 пикселей;
}
Три строки кода внутри фигурных скобок ( цвет
, font-size
и line-height
) будут применяться ко всем элементам на странице HTML.Как видно здесь, универсальный селектор объявлен звездочкой. Вы также можете использовать универсальный селектор в сочетании с другими селекторами.
Выбор типа элемента
Также называемый просто «селектором типа», этот селектор должен соответствовать одному или нескольким элементам HTML с тем же именем. Таким образом, селектор nav будет соответствовать всем элементам HTML nav
, а селектор
- будет соответствовать всем неупорядоченным спискам HTML или элементам
. В следующем примере используется селектор типа элемента для сопоставления всех элементов
- :
ul {
стиль списка: нет;
граница: сплошная 1px #ccc;
}
Чтобы поместить это в некоторый контекст, вот раздел HTML, к которому мы применим приведенный выше CSS:
- Рыба
- Яблоки
- Сыр
Пример текста абзаца.
- Вода
- Сок
- Кленовый сироп
Эту часть страницы составляют три основных элемента: два элемента
- и один
- Селекторы уровня 3
- Рекомендация
- Что это такое?
- Эти селекторы определяют часть дерева документа на основе
в его контексте по отношению к другим элементам. - Селектор пространства имен
- [ CSS3 ]
[ N6 | O7 ] - [ CSS3 ]
- Описание:
- Этот синтаксис позволяет адресовать отдельные пространства имен XML в CSS.
селекторы. Эта возможность будет важна, поскольку количество XML
диалектов в сети в будущем станет больше.- Синтаксисы:
1: Ссылка на элементы в определенном пространстве имен
[ПРЕФИКС NAMESPACE] | [НАЗВАНИЕ ЭЛЕМЕНТА]
{[Блок объявления]}
2.Ссылка на элементы в любом пространстве имен:
* | [НАЗВАНИЕ ЭЛЕМЕНТА]
{[Блок объявления]}
Или, если нет пространства имен по умолчанию
объявлен, его можно просто записать как:
[ИМЯ ЭЛЕМЕНТА] {[Блок объявления]}
3. Ссылка на элементы без какого-либо объявленного пространства имен:
| [ИМЯ ЭЛЕМЕНТА]
{[Блок объявления]}- Примеры:
1: foo | книга
{ красный цвет }
[соответствует всем вхождениям элемента ‘book’ в пространстве имен ‘foo’]
2: * | book
{ красный цвет }
[соответствует всем вхождениям элемента ‘book’ в любом пространстве имен]
3: | book
{ красный цвет }
[соответствует всем вхождениям элемента ‘book’ без объявленных пространств имен] - Этот синтаксис позволяет адресовать отдельные пространства имен XML в CSS.
- Универсальный селектор
- [ CSS2 | CSS2.1 | CSS3 ]
[ IE5 | N6 | O4 ] - [ CSS2 | CSS2.1 | CSS3 ]
- Описание:
- Это особый тип селектора, используемый для сопоставления любого элемента.
Универсальный селектор может быть исключен из простого селектора.
если это не единственный компонент (например: ‘*: first-line’ — это
то же, что и ‘: first-line’.) Этот тип селектора позволяет
мощное сопоставление обобщенных структур в общих языках
как XML, где имена элементов не обязательно известны заранее
время для таблицы стилей.- Синтаксис:
- * {[Блок объявления]}
- Пример:
* [foo]
{ красный цвет }
[соответствует всем вхождениям атрибута ‘foo’ в документе] - Это особый тип селектора, используемый для сопоставления любого элемента.
- Селектор простых элементов
- [ CSS1 | CSS2 | CSS2.1 | CSS3 ]
[ IE3 | N4 | O3.5 | S1 ] - [ CSS1 | CSS2 | CSS2.1 | CSS3 ]
- Описание:
- Этот селектор явно указывает имя элемента в
дерево документа. Все вхождения имени элемента в
документ сопоставлен.- Синтаксис:
- [Имя элемента] {[Блок объявления]}
- Пример:
h3
{font-size: 2em}
[Соответствует всем вхождениям элемента с именем ‘h3’. Это также будет соответствовать
элементы с именем «h3» в HTML, но не в XML] - Этот селектор явно указывает имя элемента в
- Селектор потомков
- [ CSS1 | CSS2 | CSS2.1 | CSS3 ]
[ IE3 | N4 | O3.5 | S1 ] - [ CSS1 | CSS2 | CSS2.1 | CSS3 ]
- Описание:
- Также известен как «контекстный селектор» в CSS1. Этот селектор позволяет
элемент, который должен быть сопоставлен на основе его происхождения в дереве документа.
Имена двух элементов перечислены через пробел. В
элемент слева является прямым или косвенным предком элемента
вправо через произвольную глубину вложенности.- Синтаксис:
- [Element1] S + [Element2]
{[Блок объявления]}- Пример:
h4 высотой
{font-weight: bold}
[соответствует
< h4 > привет < em > там em > h4 >
и
< h4 > привет
< b > < em > там em > b > h4 >] - Также известен как «контекстный селектор» в CSS1. Этот селектор позволяет
- Селектор детей
- [ CSS2 | CSS2.1 | CSS3 ]
[ N6 | O3.5 | S1 ]- Описание:
- [ CSS2 | CSS2.1 | CSS3 ]
- В отличие от обобщенного селектора потомков, этот селектор
таргетинг только на элементы, которые имеют прямые отношения родитель / потомок
в дереве документа. Имена двух элементов перечислены, разделены
символом «>» (пробелы по обе стороны от «>»
необязательно.) Имя элемента слева является прямым родительским элементом
элемента справа. - Синтаксис:
- [Element1] «>» [Element2]
{[Блок объявления]} - Пример:
h4> em
{font-weight: bold}
[соответствует
< h4 > привет
< em > там em > h4 >
но не
< h4 > привет
< b > < em > там em > b > h4 >]- Смежный селектор
- [ CSS2 | CSS2.1 | CSS3 ]
[ N6 | O5 | S1 ]- Описание:
- [ CSS2 | CSS2.1 | CSS3 ]
- Этот селектор сопоставляет два элемента с одним и тем же прямым родителем
элемент в дереве документа, И существуют рядом друг с другом в
дерево документов. Имена двух элементов перечислены, разделены
символом «+» (пробелы по обе стороны от «+» необязательны).
Оба элемента имеют общего родителя, и имя элемента на
left непосредственно предшествует элементу справа в дереве документа. - Синтаксис:
- [Element1] «+» [Element2]
{[Блок объявления]} - Пример:
б + я
{font-weight: bold}
[соответствует
< h4 > < b > привет b > там < i > мир i > h4 >
но нет
< h4 > < b > привет b > < tt > там tt > < i > мир i > h4 >]- Netscape
- 4.х +:
- — Применение правил стиля к явным дочерним селекторам (CSS1:
контекстные селекторы) к элементам с внутренней подструктурой
(например, списки и таблицы) не выполняется (например: ‘UL LI UL’ не применяется
во вложенный список, но «ul ul» успешно.) - — Применение правил стиля к явным дочерним селекторам (CSS1:
- 4.х +:
- Opera
- 3,5+:
- — Если родительский элемент в селекторе потомков (CSS1:
контекстный селектор) не существует, правило стиля все равно будет
применяться к указанному дочернему элементу. - — Если родительский элемент в селекторе потомков (CSS1:
- 3,5+:
- сам по себе черный
- в контексте тега P как темно-фиолетовый
- в контексте ячейки TD в ТАБЛИЦЕ темно-зеленым
- в контексте P в ячейке TD в ТАБЛИЦЕ как темно-синий
- Текст em здесь не фиолетового цвета.
- Смотрите, список:
- Здесь выделенный текст фиолетовый.
- Текст здесь серебристый.
- Смотрите, список (и этот текст, кстати, не серебряный):
- Текст здесь не серебристого цвета.
.CSS будет применяться только к двум элементам
, но не к . Если бы мы изменили селектор типа элемента на использование вместо
, тогда стили применились бы к , а не к двум элементам
. Также обратите внимание, что стили не будут применяться к элементам внутри элементов
или . При этом некоторые стили могут быть унаследованы этими внутренними элементами. Селектор идентификаторов
Селектор идентификатора объявляется с помощью решетки или символа решетки ( #
) перед строкой символов. Строка символов определяется разработчиком. Этот селектор соответствует любому элементу HTML, у которого есть атрибут ID с тем же значением, что и у селектора, но без символа решетки.
Вот пример:
#container {
ширина: 960 пикселей;
маржа: 0 авто;
}
Этот CSS использует селектор идентификатора для соответствия элементу HTML, например:
В данном случае тот факт, что это элемент
, не имеет значения — это может быть любой тип HTML-элемента.Если у него есть атрибут ID со значением , контейнер
, стили будут применяться. Элемент ID на веб-странице должен быть уникальным. То есть на любой странице должен быть только один элемент с идентификатором , контейнер
. Это делает селектор ID довольно негибким, потому что стили, используемые в наборе правил селектора ID, можно использовать только один раз на странице.
Если на странице есть более одного элемента с одним и тем же идентификатором, стили все равно будут применяться, но HTML на такой странице будет недопустимым с технической точки зрения, поэтому этого не следует делать.
Помимо проблем негибкости, селекторы ID также имеют проблему очень высокой специфичности.
Селектор класса
Селектор класса — самый полезный из всех селекторов CSS. Он объявляется с точкой перед строкой из одного или нескольких символов. Как и в случае с селектором идентификатора, эта строка символов определяется разработчиком. Селектор класса также сопоставляет все элементы на странице, для которых атрибут класса установлен на то же значение, что и класс, за вычетом точки.
Возьмите следующий набор правил:
.box {
отступ: 20 пикселей;
маржа: 10 пикселей;
ширина: 240 пикселей;
}
Эти стили будут применяться к следующему элементу HTML:
Те же стили будут применяться и к любым другим элементам HTML, у которых есть атрибут class со значением box
. Наличие нескольких элементов на одной странице с одним и тем же атрибутом класса полезно, поскольку позволяет повторно использовать стили и избегать ненужного повторения.В дополнение к этому, селекторы классов имеют очень низкую специфичность — опять же, подробнее об этом позже.
Еще одна причина, по которой селектор классов является ценным союзником, заключается в том, что HTML позволяет добавлять несколько классов к одному элементу. Это делается путем разделения классов в атрибуте HTML class с помощью пробелов. Вот пример:
Комбинатор потомков
Селектор потомков или, точнее, комбинатор потомков позволяет вам комбинировать два или более селектора, чтобы вы могли более точно использовать свой метод выбора.Например:
#container .box {
плыть налево;
padding-bottom: 15 пикселей;
}
Этот блок объявления будет применяться ко всем элементам, имеющим класс box, которые находятся внутри элемента с идентификатором , контейнера
. Стоит отметить, что элемент .box
не обязательно должен быть непосредственным дочерним элементом: может быть другой элемент, охватывающий .box
, и стили все равно будут применяться.
Посмотрите на следующий HTML-код:
Если мы применим CSS из предыдущего примера к этому разделу HTML, единственный элемент, на который будут влиять эти стили, — это первый элемент
, который имеет класс box
.Стили не затронут элемент , имеющий класс box-2
. Точно так же не будет затронут второй элемент с классом box
, потому что он не находится внутри элемента с идентификатором container
. Вы должны быть осторожны при использовании комбинатора потомков в вашем CSS. Этот вид селектора, делая ваш CSS немного более читабельным, может излишне ограничивать ваши стили конкретным контекстом — в этом случае стили ограничены рамками внутри #container
— что может сделать ваш код негибким.
Детский комбинатор
Селектор, использующий дочерний комбинатор
, аналогичен селектору, который использует комбинатор потомков, за исключением того, что он нацелен только на непосредственные дочерние элементы
:
#container> .box {
плыть налево;
padding-bottom: 15 пикселей;
}
Это тот же код из примера комбинатора потомков, но вместо символа пробела мы используем символ «больше» (или правую угловую скобку).
В этом примере селектор будет соответствовать всем элементам, которые имеют класс box
и являются непосредственными дочерними элементами элемента #container
.Это означает, что, в отличие от комбинатора-потомка, не может быть другого элемента, охватывающего .box
— он должен быть прямым дочерним элементом.
Вот пример HTML:
В этом примере CSS из предыдущего примера кода будет применяться только к первому элементу
, который имеет класс box
. Как видите, второй элемент с классом box
находится внутри другого элемента .В результате стили не будут применяться к этому элементу, даже если он также имеет класс , поле
. Опять же, селекторы, использующие этот комбинатор, могут быть несколько ограничивающими, но они могут пригодиться, например, при стилизации вложенных списков.
General Sibling Combinator
Селектор, использующий общий комбинатор одноуровневого соответствия, сопоставляет элементы на основе одноуровневых отношений. Другими словами, выбранные элементы находятся рядом друг с другом в HTML.
h3 ~ p {
нижнее поле: 20 пикселей;
}
Этот тип селектора объявляется с помощью символа тильды (~).В этом примере для всех элементов абзаца (
) будет применен стиль в соответствии с указанными правилами, но только если они являются родственниками элементов
. Между
и
могут быть другие элементы, и стили все равно будут применяться.
Давайте применим приведенный выше CSS к следующему HTML:
Заголовок
Пример абзаца
Пример абзаца
Пример абзаца.
Пример абзаца
В этом примере стили будут применяться только к первым трем элементам абзаца. Последний элемент абзаца не является родственником элемента
, потому что он находится внутри элемента
. Объединитель смежных братьев и сестер
Селектор, использующий комбинатор соседних братьев и сестер, использует знак плюса (+) и почти такой же, как и общий селектор братьев и сестер.Разница в том, что целевой элемент должен быть непосредственным родственником, а не только общим. Давайте посмотрим, как выглядит код CSS для этого:
п + п {
текстовый отступ: 1.5em;
нижнее поле: 0;
}
В этом примере указанные стили будут применены только к элементам абзаца, которые следуют сразу за другими элементами абзаца. Это означает, что первый элемент абзаца на странице не получит эти стили. Кроме того, если между двумя абзацами появится другой элемент, стили ко второму из двух абзацев не будут применены.
Итак, если мы применим этот селектор к следующему HTML:
Заголовок
Пример абзаца
Пример абзаца
Пример абзаца
Пример абзаца
Пример абзаца
… стили будут применяться только ко второму, третьему и пятому абзацам в этом разделе HTML.
Селектор атрибутов
Селектор атрибута нацелен на элементы на основе наличия и / или значения атрибутов HTML и объявляется с использованием квадратных скобок:
input [type = "text"] {
цвет фона: # 444;
ширина: 200 пикселей;
}
Перед открывающей квадратной скобкой не должно быть пробела, если вы не собираетесь использовать ее вместе с потомком комбинатора.Приведенный выше CSS будет соответствовать следующему элементу:
Но это не совпадет с этим:
Селектор атрибута также может быть объявлен с использованием только самого атрибута без значения, например:
ввод [тип] {
цвет фона: # 444;
ширина: 200 пикселей;
}
Это будет соответствовать всем входным элементам с атрибутом типа, независимо от значения.
Вы также можете использовать селекторы атрибутов, не указывая ничего за пределами квадратных скобок (таким образом, таргетинг основан только на атрибуте, независимо от элемента). Также стоит отметить, что при использовании значений у вас есть возможность включать кавычки (одинарные или двойные) или нет.
Псевдокласс
Псевдокласс использует символ двоеточия для идентификации псевдосостояния, в котором может находиться элемент, например, состояние зависания или состояние активации.Давайте посмотрим на типичный пример:
a: hover {
красный цвет;
}
В данном случае псевдоклассом селектора является часть : hover
. Здесь мы прикрепили этот псевдокласс ко всем элементам привязки (
элементов). Это означает, что когда пользователь наводит указатель мыши на элемент
, свойство color
для этого элемента изменится на красный. Этот тип псевдокласса является динамическим псевдоклассом, потому что он возникает только в ответ на взаимодействие с пользователем — в данном случае при перемещении мыши по целевому элементу.
Важно понимать, что эти типы селекторов не просто выбирают элементы; они выбирают элементы, которые находятся в определенном состоянии. Для целей этого примера состояние — это состояние «зависания».
Псевдоэлемент
Наконец, в CSS есть селектор, называемый псевдоэлементом, и при правильном использовании он может быть очень полезным. Единственное предостережение: этот селектор сильно отличается от других рассмотренных нами примеров. Давайте посмотрим на псевдоэлемент в контексте:
.container: before {
содержание: "";
дисплей: блок;
ширина: 50 пикселей;
высота: 50 пикселей;
цвет фона: # 141414;
}
В этом примере используется один вид псевдоэлемента, псевдоэлемент : до
. Как следует из названия, этот селектор вставляет воображаемый элемент на страницу внутри целевого элемента перед его содержимым.
CSS-селекторов · Документы WebPlatform
Сводка
Селектор представляет структуру. Эта структура может использоваться как условие (например,грамм. в правиле CSS), который определяет, каким элементам соответствует селектор в дереве документа, или как простое описание фрагмента HTML или XML, соответствующего этой структуре.
Селекторы могут варьироваться от простых имен элементов до богатых контекстных представлений.
Ссылка на селектор CSS
Селектор типа
Универсальный селектор
Селектор атрибутов
Селектор классов
Селектор ID
Псевдоклассы
Динамические псевдоклассы
Целевой псевдокласс
Псевдокласс языка
Элемент пользовательского интерфейса состояния псевдоклассов
Структурные псевдоклассы
Псевдокласс отрицания
Псевдоэлементы
Комбинаторы
Комбинатор потомков
Детский комбинатор
Комбинатор смежных братьев и сестер
Общий родственный комбинатор
Чувствительность к регистру
Синтаксис All Selectors нечувствителен к регистру в пределах диапазона ASCII (т.е.е. [a-z] и [A-Z] эквивалентны), за исключением частей, которые не находятся под контролем Selectors. Чувствительность к регистру имен элементов языка документа, имен атрибутов и значений атрибутов в селекторах зависит от языка документа. Например, в HTML имена элементов нечувствительны к регистру, но в XML они чувствительны к регистру. Чувствительность к регистру префиксов пространств имен определяется в CSS3NAMESPACE.
Синтаксис селектора
Селектор — это цепочка из одной или нескольких последовательностей простых селекторов, разделенных комбинаторами.Один псевдоэлемент может быть добавлен к последней последовательности простых селекторов в селекторе. Последовательность простых селекторов — это цепочка простых селекторов, не разделенных комбинатором. Он всегда начинается с селектора типа или универсального селектора. Никакой другой селектор типа или универсальный селектор не допускается в последовательности.
Простой селектор — это селектор типа, универсальный селектор, селектор атрибутов, селектор класса, селектор идентификатора или псевдокласс.
Комбинаторами
являются: пробел, «знак больше» (U + 003E,>), «знак плюс» (U + 002B, +) и «тильда» (U + 007E, ~).Между комбинатором и простыми селекторами вокруг него может появиться пробел. Только символы «пробел» (U + 0020), «табуляция» (U + 0009), «перевод строки» (U + 000A), «возврат каретки» (U + 000D) и «подача страницы» (U + 000C) ) может находиться в пробелах. Другие символы, похожие на пробелы, такие как «em-пробел» (U + 2003) и «идеографическое пространство» (U + 3000), никогда не являются частью пробела.
Элементы дерева документа, представленные селектором, являются объектами селектора. Селектор, состоящий из единственной последовательности простых селекторов, представляет любой элемент, удовлетворяющий его требованиям.Добавление другой последовательности простых селекторов и комбинатора к последовательности налагает дополнительные ограничения сопоставления, поэтому субъекты селектора всегда являются подмножеством элементов, представленных последней последовательностью простых селекторов.
Пустой селектор, не содержащий последовательности простых селекторов и псевдоэлементов, является недопустимым селектором. Символы в селекторах можно экранировать с помощью обратной косой черты в соответствии с теми же правилами экранирования, что и в CSS. CSS21.
Некоторые селекторы поддерживают префиксы пространства имен.Механизм объявления префиксов пространства имен должен определяться языком, который использует селекторы. Если в языке не указан механизм объявления префиксов пространства имен, префиксы не объявляются. В CSS префиксы пространства имен объявляются правилом @namespace. CSS3NAMESPACE
Группы селекторов
Список селекторов, разделенных запятыми, представляет собой объединение всех элементов, выбранных каждым из отдельных селекторов в списке. (Запятая — U + 002C.) Например, в CSS, когда несколько селекторов используют одни и те же объявления, они могут быть сгруппированы в список, разделенный запятыми.Перед запятой и / или после нее может быть пробел.
В этом примере мы объединяем три правила с идентичными объявлениями в одно. Таким образом,
h2 {font-family: sans-serif}
h3 {font-family: sans-serif}
h4 {font-family: sans-serif}
эквивалентно:
h2, h3, h4 {font-family: sans-serif}
Предупреждение : эквивалентность истинна в этом примере, потому что все селекторы являются действительными селекторами. Если бы только один из этих селекторов был недействителен, вся группа селекторов была бы недействительной.Это сделало бы недействительным правило для всех трех элементов заголовка, тогда как в первом случае только одно из трех отдельных правил заголовка было бы недействительным.
Пример неверного CSS:
h2 {font-family: sans-serif}
h3..foo {font-family: sans-serif}
h4 {font-family: sans-serif}
не эквивалентно:
h2, h3..foo, h4 {font-family: sans-serif}
, потому что указанный выше селектор (h2, h3… foo, h4) полностью недопустим, и все правило стиля отбрасывается.(Когда селекторы не сгруппированы, отбрасывается только правило для h3… foo.)
См. Также
Связанные темы
Список выбора
[css / selectors / -ms-scrollbar-shadow-color] (/ css / selectors / -ms-scrollbar-shadow-color) [css / selectors / ID] (/ css / selectors / ID) [css / selectors / Namespaced] (/ css / selectors / Namespaced) [css / selectors / Type] (/ css / selectors / Type) [css / selectors / Universal] (/ css / selectors / Universal) [css / selectors / attribute selector] (/ css / selectors / attribute_selector) [CSS / селекторы / атрибуты / равенство] (/ CSS / селекторы / атрибуты / равенство) [css / селекторы / атрибуты / существование] (/ css / селекторы / атрибуты / существование) [css / селекторы / атрибуты / дефис] (/ css / селекторы / атрибуты / дефис) [css / селекторы / атрибуты / префикс] (/ css / селекторы / атрибуты / префикс) [css / селекторы / атрибуты / подстрока] (/ css / селекторы / атрибуты / подстрока) [css / селекторы / атрибуты / суффикс] (/ css / селекторы / атрибуты / суффикс) [css / селекторы / атрибуты / пробел] (/ css / селекторы / атрибуты / пробел) [css / selectors / border-image] (/ css / selectors / border-image) [CSS / селекторы / класс] (/ CSS / селекторы / класс) [css / selectors / селектор классов] (/ css / selectors / class_selector) [css / селекторы / комбинаторы / смежный брат] (/ css / селекторы / комбинаторы / смежный_сиблинг) [CSS / селекторы / комбинаторы / дочерний элемент] (/ CSS / селекторы / комбинаторы / дочерний элемент) [CSS / селекторы / комбинаторы / потомок] (/ CSS / селекторы / комбинаторы / потомок) [css / селекторы / комбинаторы / общие родственники] (/ css / selectors / комбинаторы / general_sibling) [css / selectors / cursor] (/ css / selectors / cursor) [css / selectors / id selector] (/ css / selectors / id_selector) [css / selectors / outline] (/ css / selectors / outline) [CSS / селекторы / цвет контура] (/ css / селекторы / цвет контура) [CSS / селекторы / стиль контура] (/ css / селекторы / стиль контура) [CSS / селекторы / ширина контура] (/ CSS / селекторы / ширина контура) [css / selectors / псевдоклассы] (/ css / selectors / псевдоклассы) [css / selectors / псевдоклассы /: — ms-input-placeholder] (/ css / selectors / псевдоклассы /: — ms-input-placeholder) [css / selectors / псевдоклассы /: active] (/ css / selectors / псевдоклассы /: active) [css / selectors / псевдоклассы /: проверено] (/ css / selectors / псевдоклассы /: проверено) [css / selectors / псевдоклассы /: отключено] (/ css / selectors / псевдоклассы /: отключено) [css / selectors / псевдоклассы /: пусто] (/ css / selectors / псевдоклассы /: пусто) [css / selectors / псевдоклассы /: включено] (/ css / selectors / псевдоклассы /: включено) [css / selectors / псевдоклассы /: первый ребенок] (/ css / selectors / псевдоклассы /: первый ребенок) [css / selectors / pseudo-classes /: first-of-type] (/ css / selectors / pseudo-classes /: first-of-type) [css / selectors / псевдоклассы /: focus] (/ css / selectors / псевдоклассы /: focus) [css / selectors / псевдоклассы /: hover] (/ css / selectors / псевдоклассы /: hover) [css / selectors / псевдоклассы /: в диапазоне] (/ css / selectors / псевдоклассы /: в диапазоне) [css / selectors / псевдоклассы /: неопределенный] (/ css / selectors / псевдоклассы /: неопределенный) [css / selectors / псевдоклассы /: недопустимые] (/ css / selectors / псевдоклассы /: недопустимы) [css / selectors / псевдоклассы /: lang (c)] (/ css / selectors / псевдоклассы /: lang (c)) [css / selectors / псевдоклассы /: last-child] (/ css / selectors / псевдоклассы /: last-child) [css / selectors / pseudo-classes /: last-of-type] (/ css / selectors / pseudo-classes /: last-of-type) [css / selectors / псевдоклассы /: ссылка] (/ css / selectors / псевдоклассы /: ссылка) [css / selectors / псевдоклассы /: не] (/ css / selectors / псевдоклассы /: нет) [css / селекторы / псевдоклассы /: nth-child (n)] (/ css / selectors / псевдоклассы /: nth-child (n)) [css / selectors / псевдоклассы /: nth-last-child (n)] (/ css / selectors / псевдоклассы /: nth-last-child (n)) [css / selectors / псевдоклассы /: nth-last-of-type (n)] (/ css / selectors / псевдоклассы /: nth-last-of-type (n)) [css / selectors / псевдоклассы /: nth-of-type (n)] (/ css / selectors / псевдоклассы /: nth-of-type (n)) [css / selectors / псевдоклассы /: only-child] (/ css / selectors / псевдоклассы /: only-child) [css / selectors / pseudo-classes /: only-of-type] (/ css / selectors / pseudo-classes /: only-of-type) [css / selectors / псевдоклассы /: необязательно] (/ css / selectors / псевдоклассы /: необязательно) [css / selectors / псевдоклассы /: требуется] (/ css / selectors / псевдоклассы /: требуется) [css / selectors / псевдоклассы /: root] (/ css / selectors / псевдоклассы /: root) [css / selectors / псевдоклассы /: target] (/ css / selectors / псевдоклассы /: target) [css / selectors / псевдоклассы /: допустимые] (/ css / selectors / псевдоклассы /: допустимые) [css / selectors / псевдоклассы /: посещены] (/ css / selectors / псевдоклассы /: посещены) [css / selectors / псевдоклассы / Динамические псевдоклассы] (/ css / selectors / псевдоклассы / Dynamic_pseudo-классы) [css / selectors / псевдоклассы / Структурные псевдоклассы] (/ css / selectors / псевдоклассы / Structural_pseudo-классы) [css / selectors / псевдоклассы / псевдоклассы состояний элементов пользовательского интерфейса] (/ css / selectors / псевдоклассы / ui_element_states_pseudo-classes) [css / selectors / псевдоэлементы] (/ css / selectors / псевдоэлементы) [css / selectors / псевдоэлементы / :: after] (/ css / selectors / псевдоэлементы / :: after) [css / selectors / псевдоэлементы / :: before] (/ css / selectors / псевдоэлементы / :: before) [css / selectors / псевдоэлементы / :: first-letter] (/ css / selectors / псевдоэлементы / :: first-letter) [css / selectors / псевдоэлементы / :: first-line] (/ css / selectors / псевдоэлементы / :: first-line) [css / selectors / псевдоэлементы / :: region] (/ css / selectors / псевдоэлементы / :: region) [css / selectors / псевдоэлементы / :: selection] (/ css / selectors / псевдоэлементы / :: selection) [css / selectors / type] (/ css / selectors / type) [css / selectors / универсальный селектор] (/ css / selectors / universal_selector) [css / selectors / user-select] (/ css / selectors / user-select) [css / selectors / zoom] (/ css / selectors / zoom)
## Связанные спецификации
Селекторы элементов
— синтаксис каскадных таблиц стилей
Селекторы элементов — синтаксис каскадных таблиц стилей
Особенности браузера
Расточка Авторские права ….
Модуль 10 — страница 09
Модуль 10 — страница 09 — Базовый синтаксис CSS: контекстные селекторы
Базовый синтаксис CSS: контекстные селекторы
Контекстные селекторы позволяют определять внешний вид тегов HTML в родительско-дочерних отношениях с другими тегами HTML. В следующем примере я создал два экземпляра тега B
(полужирный): один сам по себе и один, где он появляется как дочерний объект тега P
(абзац).
Пример:
Вот жирный текст.
Вот абзац со словом жирным шрифтом .
Теперь я мог бы сделать одно объявление CSS, которое будет определять все экземпляры тега B
единообразно, как я делал раньше:
b {font-weight: жирный; цвет: # 000000; }
Но что, если я хочу, чтобы тег B
, когда он появляется как дочерний элемент тега P
, выглядел иначе, чем тег B
сам по себе? Внешний вид этих тегов B
можно определить отдельно с помощью контекстного селектора в объявлении CSS.
Контекстный селектор для объявления сначала устанавливает родительский селектор, затем пробел, затем дочерний селектор, за которым следуют пробел и фигурные скобки, содержащие свойства.
Общий пример:
parenttagname childtagname {свойство: значение; так далее... }
Фактический пример (определение тега B
, когда он является дочерним по отношению к тегу P
):
п б {цвет: # 660066; font-weight: жирный; }
Используя контекстные селекторы, я могу определить, как будет выглядеть HTML-тег, когда он В КОНТЕКСТЕ другого конкретного HTML-тега (другими словами, когда он является дочерним по отношению к другому тегу).Например, я могу определить тег B
как дочерний элемент тега P
отдельно от тега B
как дочерний элемент тега TH
; Я могу определить внешний вид тега на основе его КОНТЕКСТА, отсюда и термин Селектор КОНТЕКСТ.
Я могу определить свойства тега B
в целом, и я могу ТАКЖЕ более конкретно переопределить некоторые или все эти свойства, когда тег B
появляется как дочерний по отношению к тегу P
.
Пример:
b {font-weight: жирный; цвет: # 000000; }
п б {цвет: # 660066; }
В первом объявлении CSS выше я сказал браузеру сделать тег B
жирным и черным.Во втором объявлении я использовал контекстный селектор, чтобы указать браузеру, что тег B
(когда он появляется как дочерний элемент тега P
) отображается темно-фиолетовым. Поскольку я СНОВА не указал свойство font-weight во втором объявлении CSS выше, тег B
как дочерний элемент тега P
НАСЛЕДУЕТ свойство font-weight (boldness) из общего объявления тега B
.
Помните, что : вы можете определить основные свойства тега в общем объявлении (например, для тега B
выше), а затем переопределить одно или несколько свойств, определенных для тега в различных КОНТЕКСТАХ (ситуациях), используя контекстные селекторы в объявлениях CSS, как вы также можете видеть выше.
При создании контекстных селекторов вы ДОЛЖНЫ разделять разные селекторы пробелами. Следующий пример НЕПРАВИЛЬНО:
pb {color: # 660066; }
Я НЕ использовал контекстный селектор в приведенном выше примере; Вместо этого я сделал объявление CSS для какого-то несуществующего тега под названием "pb"
, который не принесет нам никакой пользы.
При использовании контекстных селекторов я могу определять контексты для данного тега с такой степенью детализации, насколько мне нравится. Другими словами, я могу указать очень обширные родственные связи, используя несколько контекстных селекторов в объявлении CSS, каждый из которых разделен пробелом.
Пример:
б {цвет: # 000000; }
п б {цвет: # 660066; }
таблица tr td b {цвет: # 006600; }
таблица tr td p b {цвет: # 000066; }
В приведенном выше примере я определил тег B
:
Пример:
таблица tr td {цвет: # 000000; }
таблица tr th {color: # 660066; }
таблица tr td table tr td {цвет: # 006600; }
таблица tr th таблица tr td {цвет: # 000066; }
В приведенном выше примере я определил цвет текста в ячейках TD и TH в ТАБЛИЦЕ (черный текст для TD, темно-фиолетовый текст для TH).Я также определил цвет текста в ячейках TD для ТАБЛИЦЫ, вложенной в тег TD в другой ТАБЛИЦЕ, в отличие от следующего объявления, где я определил цвет текста в ячейках TD для ТАБЛИЦЫ, вложенной в тег TH другого ТАБЛИЦА; Итак, я различаю ячейки TD таблиц, вложенных в теги TD, и ячейки TD таблиц, вложенных в теги TH. Как видите, я могу уточнить различия во внешнем виде тегов в разных контекстах, используя объявления CSS и контекстные селекторы.
Возможно, вам никогда не понадобится доступ к этому уровню детализации, но важно знать, как это сделать, если он вам когда-нибудь понадобится.
Я бы также использовал такой контекстный селектор при определении внешнего вида списка и подсписка:
ул ли {список-стиль-тип: диск; }
уль уль ли {список-стиль-тип: квадрат; }
В приведенном выше примере я определил тег LI
для неупорядоченного списка, чтобы использовать маркер дискового типа, а тег LI
для вложенного неупорядоченного списка (или подсписка) использовал квадратный тип. пуля.
Контекстные селекторы предоставляют очень мощный механизм для различения внешнего вида тега в зависимости от контекста тега. Есть также другой способ различать теги, используя так называемый КЛАСС; мы обсудим классы в следующем разделе.
Авторские права © 2001 Майкл Масумото. Все права защищены.
Селектор детей
Селектор детей
Web Review
Июнь 2000 г.
Во второй из пяти статей о новых селекторах в CSS2 мы обращаемся к дочернему селектору .Это используется для сопоставления элементов, которые являются прямыми дочерними элементами других элементов, что немного точнее, чем традиционный контекстный селектор. Однако, если вы не читали статью об универсальном селекторе, вы можете сначала прочитать ее, поскольку универсальный селектор присутствует в некоторых примерах для этой и будущих статей.
Как это работает
Использовать дочерний селектор довольно просто. Он написан с использованием символа «больше» (>
) и должен находиться между двумя другими селекторами.Например:
body> p {color: green;}
Это правило сделает зеленым любой абзац, который является прямым потомком элемента body
. Следовательно, любой абзац, который является дочерним по отношению к другому элементу, например, div
или ячейке таблицы, не будет соответствовать этому правилу.
Чем это отличается от традиционных контекстных селекторов? Разница в том, что для селектора, такого как bodyp
, будет сопоставлен любой абзац, который является потомком body
.Конечно, это может означать дочерний абзац, но это также может означать абзац, который содержится внутри ячейки таблицы, которая находится внутри таблицы
, которая является частью div
. Контекстные селекторы можно легко назвать селекторами потомков , поскольку они определяют, какие потомки каких элементов могут быть выбраны.
Выбор точных потомков
Объединив дочерние селекторы вместе, можно очень точно нацелить определенные элементы на определенные точки документа.Например, предположим, что мы хотим выбрать любой абзац, который является дочерним для элемента div
, который сам является дочерним элементом элемента div
, который является дочерним элементом элемента body
. Кроме того, мы хотим сделать эти абзацы салатово-зелеными на голубом фоне. Таким образом мы пишем:
body> div> div> p {цвет: салатовый; фон: голубой;}
Это подействует именно на те параграфы, которые описаны выше, и никакие другие. Если у нас есть параграф, вложенный в три div
s, он не будет выбран; также не будет абзац внутри div
, который является дочерним элементом body
элемента.
Дети и потомки
Для тех, кого смущает разница между детьми и потомками, давайте на минутку рассмотрим это. Однако, чтобы понять это, нам нужно ввести понятие «древовидного представления» для данного документа. Документы HTML, как и большинство структурированных документов любого типа, основаны на иерархии элементов, которая наиболее заметна в древовидной структуре документа. В этой иерархии каждый элемент вписывается в общую структуру документа, и каждый элемент является либо родительским, либо дочерним для другого элемента, а часто и тем и другим.См. Рисунок 1 для примера дерева документа.
Рисунок 1: Схема иерархии элементов.
Во-первых, давайте поговорим об отношениях между родителями и детьми. На рисунке 1 элемент body
имеет двух дочерних элементов: элемент p
и элемент ul
. Элемент p
, в свою очередь, имеет двух дочерних элементов: em
и strong
элементов непосредственно под ним на дереве.Элемент p
имеет одного родителя, и это элемент body
. Фактически, у элемента может быть только один родительский элемент, хотя у него может быть много дочерних элементов.
Теперь о предках и потомках. Возьмите якорь , элемент
. У него три предка: сильный
, p
и body
. Когда мы поднимаемся вверх по дереву к верхнему уровню, каждый элемент, который мы передаем, является предком элемента, с которого мы начали. Обратный путь сложнее: чтобы найти потомков, мы должны пройти все ветви вниз от нашей начальной точки.Таким образом, для абзаца, элемента p
, потомками будут: em
, strong
, a
и em
.
Таким образом, чтобы выбрать элемент a
с помощью дочернего селектора, нам нужно написать strong> a
. Что-то еще, например p>
, не будет соответствовать привязке, потому что это не дочерний элемент абзаца.
Это не означает, что дочерний выбор и выбор потомков должны оставаться навсегда разделенными, как мы увидим в следующем разделе.
Дети в контексте
В дополнение к простым дочерним выборкам, которые мы видели до сих пор, можно также сделать дочерний селектор частью контекстного селектора:
div ol> li em {color: purple;}
Это правило соответствует любому тексту em
, который является потомком элемента списка, если этот элемент списка является потомком элемента OL, который является потомком элемента div
. Также обратите внимание, что на этот раз вокруг символа >
нет пробелов, что допустимо: пробелы вокруг этого символа необязательны.Таким образом:
Пурпурный текст em
фиолетовый, потому что это правнук элемента li
, который является прямым потомком ol
, а ol
является внуком элемента body
.Первый em
не соответствует, потому что его прародитель ol
не является прямым потомком div
.
Еще лучше, вы можете связать более одного дочернего селектора вместе, чтобы точно нацелить данный тип элемента. Возьмем, например:
body> ol> li {color: silver;}
Первый элемент списка в источнике — silver, потому что он дочерний элемент упорядоченного списка, который сам является дочерним элементом тела
. Второй элемент списка в источнике является дочерним по отношению к неупорядоченному списку, поэтому он не может соответствовать правилу. Наконец, третий элемент списка в источнике является дочерним по отношению к упорядоченному списку, но элемент ol
является дочерним элементом элемента li
, поэтому он тоже не соответствует.
Универсальный детский
Звучит как название серии Star Trek , не так ли? В этом случае мы говорим об использовании универсального селектора в сочетании с дочерним селектором, который может дать некоторые интересные эффекты.
Допустим, вы хотите выделить жирным шрифтом только те элементы, которые являются дочерними по отношению к элементу body
. Это будет сделано следующим образом:
body> * {font-weight: bold;}
С помощью этого правила вы можете легко увидеть, какие элементы находятся на «верхнем уровне» документа, а какие вложены в другие элементы.Вы можете расширить этот подход, чтобы выбрать только внуков тела
:
body> *> * {font-weight: bold;}
Теперь будут выбираться только те элементы, которые на один уровень ниже «верхнего уровня». Конечно, это не тот эффект, который нам понадобится очень часто, но мы могли бы выбрать только те элементы h2
, которые являются внуками тела
, и так:
body> *> h2 {font-style: italic;}
Мы также можем выбрать любого потомка элемента, который является потомком h2
, который является потомком div
:
div> h2> * *
Селекторы такого типа не всегда просты для понимания на первый взгляд, но после небольшой практики и некоторого строгого мышления они становятся достаточно ясными.
Поддержка браузера
Дочерний селектор поддерживается в Internet Explorer 5.x для Macintosh и Opera 3.6. Он также поддерживается в Netscape 6 Preview Release 1 для всех бесчисленных платформ, для которых он доступен, и в Preview Release 3 Opera 4 для Windows.
Еще не все
Как мы видели, дочерний селектор — очень точный оператор, но в сочетании с контекстными и универсальными селекторами он может привести к некоторым неожиданным возможностям.Возможные варианты выбора выходят далеко за рамки всего, что может быть достигнуто с помощью одних только простых контекстных селекторов.
Но это еще не конец. Как мы увидим в следующей статье этой серии, селектор по соседнему брату делает еще более сложные — но часто гораздо более полезные — селекторы, чем те, которые мы уже видели.
.