Простые селекторы #
Группа самых простых селекторов предназначена для элементов HTML, а также классов, идентификаторов и других атрибутов, которые можно добавить в тег HTML.
Универсальный селектор
Универсальный селектор, также называемый подстановочным знаком, соответствует любому элементу.
Благодаря этому правилу текст каждого элемента HTML на странице будет иметь ярко-розовый (hotpink) цвет.
Селектор типа
Селектор типа напрямую соответствует элементу HTML.
Благодаря этому правилу для всех сторон каждого элемента атрибут отступа будет иметь значение .
Селектор класса
Элемент HTML может содержать один или несколько элементов, определенных в его атрибуте . Селектор класса соответствует любому элементу, к которому применен этот класс.
Любой элемент, к которому применен этот класс, будет окрашен в красный цвет:
Обратите внимание на то, что символ имеется только в CSS, но не в HTML. Это связано с тем, что символ указывает языку CSS, что необходимо сопоставить члены атрибутов класса
Это распространенный шаблон в CSS, когда специальный символ или набор символов используется для определения типов селекторов.
Элемент HTML, имеющий класс , по-прежнему будет соответствовать указанному выше правилу CSS, даже если у него есть несколько других классов. Пример:
Это связано с тем, что CSS ищет атрибут , который содержит определенный класс, а не точно соответствует этому классу.
Селектор идентификатора
Элемент HTML с атрибутом должен быть единственным элементом на странице с нужным значением идентификатора. Выбирайте элементы с помощью селектора идентификатора следующим образом:
Этот код CSS задает синюю границу для элемента HTML, у которого атрибут имеет значение . Пример:
Как и в случае с селектором класса используйте символ , чтобы указать CSS, что нужно искать элемент, соответствующий следующему за ним атрибуту .
Селектор атрибута
С помощью селектора атрибута можно выполнять поиск элементов, которые имеют определенный атрибут HTML или определенное значение атрибута HTML. Чтобы указать CSS, что нужно найти атрибуты, заключите селектор в квадратные скобки ().
Этот код CSS ищет все элементы, у которых есть атрибут со значением . Пример:
Вместо того, чтобы искать конкретное значение атрибута , можно также искать элементы, у которых имеется этот атрибут независимо от его значения.
Текст в обоих этих элементах будет красным.
Вы можете использовать селекторы атрибутов с учетом регистра, добавляя в них оператор .
Это означает, что если бы у элемента HTML атрибут имел значение , а не , текст в нем не был бы красным. Можно сделать наоборот — отключить функцию учета регистра — с помощью оператора .
Наряду с операторами case можно использовать операторы, которые сопоставляют части строк внутри значений атрибутов.
В этой демонстрации оператор $ в селекторе атрибута получает значение типа файла из атрибута href. Это позволяет добавить префикс к подписи на основе этого типа файла с помощью псевдоэлемента.
Группирование селекторов
Селектор необязательно должен соответствовать только одному элементу. Можно сгруппировать несколько селекторов, разделив их запятыми:
В этом примере изменяется цвет как элементов , так и элементов . Он также расширен и включает класс и элемент с атрибутом .
Test your knowledge of simple selectors
What kind of simple selector is used in the above snippet?
attribute ID universal class
are used for attribute simple selectors.
are used for ID simple selectors.
is the universal simple selector.
are used for class simple selectors.
What kind of simple selector is used in the above snippet?
class type attribute ID
A is used for class simple selectors.
An name is used for type simple selectors.
Square brackets are used for attribute simple selectors.
A is used for ID simple selectors.
Pseudo-Selectors
Селекторы псевдокласса
Есть времена, мы определенно хотим, чтобы стиль элемента, когда посещаются состояние элемента, парили над, активным, в центре внимания, и т.д. Мы можем использовать псевдо-селекторы класса в стиль определенных элементы, которые будут оформлены определенным образом на основе поведение или размещение. Используйте двоеточие : после элемента, который хотите стилизовать.
Селекторы псевдоэлементов
Селекторы псевдоэлементов очень похожи на селекторы псевдоклассов по способу написания. Если мы хотим, чтобы текст, который пользователь выбирает в a, divимел определенный цвет фона, мы можем стилизовать его, используя div::selection.
Обратите внимание на два двоеточия. Это было изменение по сравнению с предыдущими версиями CSS
Современный CSS использует два двоеточия, чтобы лучше различать псевдокласс и псевдоэлемент.
::beforeИ ::afterпсевдо-селекторы имеют свойство контента. Это содержимое будет вставлено до или после указанного элемента. В этом примере будет вставлен до и после h1.
Селекторы атрибутов
Существует два типа селекторов атрибутов : один, который указывает, только ли элемент имеет namedатрибут, и второй, который определяет именованный атрибут и значение атрибута. Этот тип селектора особенно полезен, если вы используете настраиваемые атрибуты в своем HTML.
Этот пример нацелен на объект, divкоторый имеет вкладку данных настраиваемого атрибута и displayпо умолчанию не имеет значения. Следующее правило CSS становится еще более конкретным, когда мы выбираем data-tabатрибут со значением «один» для его отображения.
Селекторы атрибутов в CSS
Можно применять правила к элементам, имеющим определённый атрибут или определённое значение в атрибуте.
<атрибут> — селектор элементов с указанным атрибутом.
<атрибут>=<значение> — селектор элементов с указанным значением атрибута.
<селектор><атрибут> — селектор элементов с указанным селектором и указанным атрибутом.
<селектор><атрибут>=<значение> — селектор элементов с указанным селектором и указанным значением атрибута.
Пример:
XHTML
<!DOCTYPE html>
<html>
<head>
<title>Селектры CSS</title>
<meta http-equiv=»Content-Type» content=»text/html;charset=utf-8″ />
<style media=»screen»>
/*Правило применится ко всем тегам a, у которых указан атрибут target.*/
a {
font-style : italic; /* Наклонный шрифт */
}
/*Правило применится ко всем тегам a, у которых в атрибуте target указано «_blank»*/
a {
background-color : #f00000; /*Красный цвет фона*/
}
</style>
</head>
<body>
<p>
<a href=»https://urvanov.ru»>Ссылка без target</a>
</p>
<p>
<a href=»https://urvanov.ru» target=»_parent»>Ссылка с target</a>
</p>
<p>
<a href=»https://urvanov.ru» target=»_blank»>Ссылка с target=»_blank»</a>
</p>
<a href=»https://urvanov.ru/2016/02/11/css-%D1%81%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/#attributeselectors1″>Статья с описанием видов селекторов CSS</a>
</body>
</html>
|
1 |
<!DOCTYPE html> <title>Селектры CSS</title> <meta http-equiv=»Content-Type»content=»text/html;charset=utf-8″ /> <style media=»screen»> a { font-styleitalic;/* Наклонный шрифт */ } /*Правило применится ко всем тегам a, у которых в атрибуте target указано «_blank»*/ a { background-color#f00000;/*Красный цвет фона*/ } </style> </head> <a href=»https://urvanov.ru»>Ссылка без target</a> </p> <a href=»https://urvanov.ru»target=»_parent»>Ссылка с target</a> </p> <a href=»https://urvanov.ru»target=»_blank»>Ссылка с target=»_blank»</a> </p> <a href=»https://urvanov.ru/2016/02/11/css-%D1%81%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/#attributeselectors1″>Статья с описанием видов селекторов CSS</a> </body> |
Селекторы тегов в языке CSS
СелекторыСелекторы тегов в CSS
Схема CSS-кода выглядит следующим образом:
селектор {
CSS-свойство: значение;
CSS-свойство: значение;
... и т.д.
}
В селекторе тега, в качестве селектора выступает имя тега:
имяТега { CSS-свойство: значение; CSS-свойство: значение; и т.д. }
Селекторы тега — это выборка элементов по именам их тегов: , , , и т.д. Это пока что единственный знакомый нам селектор, который мы изучали в учебнике по CSS.
Допустим у нас есть HTML-документ, содержащий следующий код:
<!DOCTYPE html> <html> <head> <title>Страница о снежном барсе</title> </head> <body> <h1>Снежный барс</h1> <p> Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, Казахстана, Киргизстана, Китая, Монголии, Непала, Пакистана, России, Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, относительно короткими лапами, небольшой головой и очень длинным хвостом. Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг. Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными пятнами.</p> <p> Охотится снежный барс, в основном, на горных козлов и баранов, также в его рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по приблизительным оценкам их количество варьируется в районе около 10 тысяч особей. По состоянию на 2013 год, охота на снежных барсов повсеместно запрещена.</p> </body> </html>
Открыв документ в браузере, получим следующее.
Назначим с помощью CSS, абзацам синий цвет текста. Для этого, в качестве селектора нужно написать имя тега абзаца и сразу у всех абзацев, цвет текста станет синим:
<style>
p {
color: blue;
}
</style>
Код HTML-документа:
<!DOCTYPE html>
<html>
<head>
<title>Страница о снежном барсе</title>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<h1>Снежный барс</h1>
<p>
Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства
кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии,
Казахстана, Киргизстана, Китая, Монголии, Непала, Пакистана, России,
Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом,
относительно короткими лапами, небольшой головой и очень длинным хвостом.
Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг.
Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными
пятнами.</p>
<p>
Охотится снежный барс, в основном, на горных козлов и баранов, также в его
рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности
местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по
приблизительным оценкам их количество варьируется в районе около 10 тысяч
особей. По состоянию на 2013 год, охота на снежных барсов повсеместно
запрещена.</p>
</body>
</html>
Открыв документ в браузере, получим следующее.
Читать далее: Селекторы классов CSS
Category:
Разное
Допустимые значения для пользовательских свойств
У обычного CSS-свойства можно задать только разрешенные по стандарту значения. Согласно стандарту пользовательских свойств, в качестве значения можно использовать любое существующее корректное CSS-значение. Например, как у всех следующих пользовательских свойств:
.element::before {
—color: rgba(0, 0, 0, 1);
—hex: #000000;
—value: 20px;
—number: 3;
—text: «Hey, what’s up?»;
—keyword: currentColor;
}
Для примера зададим рамку с цветом #800080 для кнопки:
button {
—netologyBrandColor: #800080;
border-width: 2px;
border-style: solid;
border-color: var(—netologyBrandColor);
}
Помимо стандартных значений, можно задать одно пользовательское свойство в качестве значения для другого.
button {
—netologyBrandColor: #800080;
—buttonBorderColor: var(—netologyBrandColor);
border-width: 2px;
border-style: solid;
border-color: var(—buttonBorderColor);
}
Результат ничем отличается от предыдущего, и у кнопки все так же рамка с цветом #800080.
Если у пользовательского свойства —netologyBrandColor будет некорректное значение для свойства border-color, например 18px, то рамка станет черной.
button {
—netologyBrandColor: 18px;
—buttonBorderColor: var(—netologyBrandColor);
border-width: 2px;
border-style: solid;
border-color: var(—buttonBorderColor);
}
Дело в том, что прежде чем браузер применит значение пользовательского свойства для встроенного свойства, он проверит его на корректность. Если значение доступно для встроенного свойства, то браузер применит его. А если нет, то установит для встроенного свойства значение по умолчанию.
В нашем случае 18px некорректное значение для встроенного свойства border-color, и поэтому браузер установит значение по умолчанию, т.е currentColor. Это очень легко проверить, задав для свойства color значение #800080:
button {
—netologyBrandColor: 18px;
—buttonBorderColor: var(—netologyBrandColor);
border-width: 2px;
border-style: solid;
border-color: var(—buttonBorderColor);
color: #800080;
}
Как видим, браузер применил значение #800080 для рамки. В этом примере я использовал полный синтаксис, чтобы установить рамку. Но мы можем использовать краткий, а именно свойство border.
button {
—netologyBrandColor: 18px;
—buttonBorderColor: var(—netologyBrandColor);
border: 2px solid var(—buttonBorderColor);
color: #800080;
}
Здесь нас ожидает еще один нюанс. В стандарте есть отдельный раздел, в котором описано поведение пользовательских свойств в такой ситуации. Согласно ему, если пользовательское свойство имеет некорректное значение для встроенного свойства, то это пользовательское свойство является невалидным, поэтому браузер проигнорирует встроенное свойство.
В нашем примере у встроенного свойства border в качестве одного из значений установлено пользовательское свойство —buttonBorderColor с некорректным значением 18px. Согласно описанному алгоритму, браузер просто проигнорировал свойство border, поэтому у элемента пропала рамка.
Селекторы элементов
В качестве селектора выступает имя любого элемента HTML, но без написания угловых скобок. К примеру, селектор p задаёт стиль всех элементов <p>, которые встречаются в коде HTML. В примере 1 показано изменение цвета фона и текста веб-страницы с помощью селектора body.
Пример 1. Использование селектора body
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Селекторы</title>
<style>
body {
background: #f6e8d7; /* Цвет фона */
color: #d6562b; /* Цвет текста */
}
</style>
</head>
<body>
<p>Более эффективным способом ловли льва в пустыне
является метод золотого сечения. При его использовании пустыня делится
на две неравные части, размер которых подчиняется правилу золотого
сечения.</p>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Изменение цвета фона и текста веб-страницы
Следует понимать, что хотя стиль можно применить к любому элементу, результат будет заметен только для тех элементов, которые непосредственно отображаются в <body>.
Таблица всех селекторов
В таблице приведены все селекторы с примером и описанием:
| Селектор | Пример | Описание примера |
|---|---|---|
| * | * | Все элементы. |
| #id | #firstname | Элемент с id=»firstname». |
| .class | .intro | Все элементы с class=»intro». |
| .class1.class2 | .name1.name2 | Все элементы с class=»name1 name2″. |
| .class1 .class2 | .name1 .name2 | Все элементы с class=»name2″ у которых родитель с class=»name1″. |
| tag | p | Все <p> элементы. |
| tag.class | p.intro | Все <p> элементы с class=»intro». |
| tag, tag | div, p | Все <div> и все <p> элементы. |
| tag tag | div p | Все <p> внутри всех <div>. |
| tag > tag | div > p | Все <p> прямой родитель которых <div>. |
| tag + tag | div + p | <p> который находятся сразу после <div>. |
| tag ~ tag | div ~ p | Все <p> которые находятся после <div>. |
| Все элементы с target=»что-либо». | ||
| Все элементы с target=»_blank». | ||
| a | Каждый <a> атрибут href которого начинается с «https». | |
| a | Каждый <a> атрибут href которого заканчивается «.pdf». | |
| a | Каждый <a> атрибут href которого содержит подстроку «w3schools». | |
| Все элементы в атрибуте title которых есть слово «flower». | ||
| Все элементы атрибут lang которых начинается с «en». | ||
| :active | a:active | Активная ссылка. |
| ::after | p::after | Вставляет псевод-элемент в начале каждого <p> элемента. |
| ::before | p::before | Вставляет псевод-элемент в конце каждого <p> элемента. |
| :checked | input:checked | Все выбранные <input type=»checkbox»> элементы. |
| :default | input:default | Все <input> элементы. |
| :disabled | input:disabled | Все <input disabled> элементы. |
| :empty | p:empty | Все пустые <p>, в которых нет пробелом, текста или других элементов. |
| :enabled | input:enabled | Все активные (не disabled) элементы <input>. |
| :first-child | p:first-child | Первый элемент в списке родительского элемента. |
| :first-of-type | p:first-of-type | Первый <p> элемент в списке родительского элемента. |
| ::first-letter | p::first-letter | Первая буква каждого <p> элемента. |
| ::first-line | p::first-line | Первая линия каждого <p> элемента. |
| :focus | input:focus | <input> в котором находится курсор. |
| :focus-visible | a:focus-visible | Фокус сработает, только если на кнопку перешли с клавиатуры через TAB. |
| :focus-within | div:focus-within | Сработает на блоке, когда его внутренний элемент находится в фокусе. |
| :hover | a:hover | Сслыка на которую наведена мышка. |
| :in-range | input:in-range | Все <input> со значением в пределах указанного диапазона. |
| :indeterminate | input:indeterminate | Все <input> в статусе indeterminate. |
| :invalid | input:invalid | Все <input> с недопустимым значением. |
| :lang(language) | p:lang(it) | Все <p> с lang=»it». |
| :last-child | p:last-child | Последний элемент в списке родительского элемента. |
| :last-of-type | p:last-of-type | Последний <p> в списке родительского элемента. |
| :link | a:link | Все непосещенные ссылки. |
| :not(selector) | :not(p) | Все не <p> элементы. |
| :not(:only-child) | div:not(:only-child) | Все <div> внутри которых больше одного элемента. |
| :nth-child(n) | p:nth-child(2) | Второй элемент в списке родительского элемента. |
| :nth-of-type(n) | p:nth-of-type(2) | Второй <p> в списке родительского элемента. |
| :nth-last-child(n) | p:nth-last-child(2) | Второй элемент в списке родительского элемента (счет идет с конца). |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Второй <p> в списке родительского элемента (счет идет с конца). |
| :only-child | p:only-child | Единственный <p> у родителя (других элементов быть не может). |
| :only-of-type | p:only-of-type | Один <p> у родителя (других элементы могут быть). |
| :optional | input:optional | Все <input> у которых нет артибута «required». |
| :required | input:required | Все <input> у которых указан атрибут «required». |
| :out-of-range | input:out-of-range | Все <input> со значением выходящим за указанный рэндж. |
| ::placeholder | input::placeholder | Все <input> у которых указан атрибут «placeholder». |
| :read-only | input:read-only | Все <input> у которых указан атрибут «readonly». |
| :read-write | input:read-write | Все <input> у которых не указан атрибут «readonly». |
| :root | :root | Корен документа. |
| ::selection | ::selection | Выберет текущее выделение текста мышкой. |
| :target | #news:target | Выберет элемент с id=»news» когда к нему пришил по клику. |
| :valid | input:valid | Все <input> с валидным значением. |
| :visited | a:visited | Все посещенные ссылки. |
Селекторы тегов в CSS
Можно выбрать элементы на странице по названию тега.
Пример 1:
XHTML
<!DOCTYPE html>
<html>
<head>
<title>Селектры CSS</title>
<meta http-equiv=»Content-Type» content=»text/html;charset=utf-8″ />
<style media=»screen»>
p {
background-color: #f0f0f0;
};
</style>
</head>
<body>
<p>
Шла Саша по шоссе и сосала сушку.
</p>
<p>
Крокодил плывёт.
</p>
<p>
Индейцы пошли в атаку.
</p>
<a href=»https://urvanov.ru/2016/02/11/css-%D1%81%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/#tagselectors1″>Статья с описанием видов селекторов CSS</a>
</body>
</html>
|
1 |
<!DOCTYPE html> <title>Селектры CSS</title> <meta http-equiv=»Content-Type»content=»text/html;charset=utf-8″ /> <style media=»screen»> p { background-color#f0f0f0; }; </style> </head> <a href=»https://urvanov.ru/2016/02/11/css-%D1%81%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/#tagselectors1″>Статья с описанием видов селекторов CSS</a> </body> |
В этом примере все абзацы будут иметь серый фон. Посмотреть результат.
Пример 2:
XHTML
<!DOCTYPE html>
<html>
<head>
<title>Селектры CSS</title>
<meta http-equiv=»Content-Type» content=»text/html;charset=utf-8″ />
<style media=»screen»>
div {
background-color: #f0f0f0;
};
</style>
</head>
<body>
<p>
Шла Саша по шоссе и сосала сушку.
</p>
<div>
Крокодил плывёт.
</div>
<p>
Индейцы пошли в атаку.
</p>
<a href=»https://urvanov.ru/2016/02/11/css-%D1%81%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/#tagselectors2″>Статья с описанием видов селекторов CSS</a>
</body>
</html>
|
1 |
<!DOCTYPE html> <title>Селектры CSS</title> <meta http-equiv=»Content-Type»content=»text/html;charset=utf-8″ /> <style media=»screen»> div { background-color#f0f0f0; }; </style> </head> <a href=»https://urvanov.ru/2016/02/11/css-%D1%81%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/#tagselectors2″>Статья с описанием видов селекторов CSS</a> </body> |
Здесь элемент
<div> будет иметь серый фон. Посмотреть результат.
Комбинаторы в 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 никак не действует.
Селекторы идентификаторов в CSS
Можно указывать правила для элементов с конкретным id. Для этого в качестве селектора используется id элемента с предваряющим его символом решётки:
#myelid. Можно указывать не только id, но и тег перед решёткой:
p#myelid1. Но учитывая, что элементов с одинаковыми id на странице быть не должно, то указание тега вряд ли имеет смысл.
Пример:
XHTML
<!DOCTYPE html>
<html>
<head>
<title>Селектры CSS</title>
<meta http-equiv=»Content-Type» content=»text/html;charset=utf-8″ />
<style media=»screen»>
#myelid1 {
background-color: #f0f0f0;
}
p#myelid2 {
background-color: #0000ff;
}
</style>
</head>
<body>
<p id=»myelid1″>
Это p с id=myelid1.
</p>
<p id=»myelid2″>
Это p с id=myelid2.
</p>
<p id=»myelid3″>
Это p с id=myelid3.
</p>
<a href=»https://urvanov.ru/2016/02/11/css-%D1%81%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/#idselectors1″>Статья с описанием видов селекторов CSS</a>
</body>
</html>
|
1 |
<!DOCTYPE html> <title>Селектры CSS</title> <meta http-equiv=»Content-Type»content=»text/html;charset=utf-8″ /> <style media=»screen»> #myelid1 { background-color#f0f0f0; } p#myelid2 { background-color#0000ff; } </style> </head> <p id=»myelid1″> Это p с id=myelid1. <p id=»myelid2″> Это p с id=myelid2. <p id=»myelid3″> Это p с id=myelid3. <a href=»https://urvanov.ru/2016/02/11/css-%D1%81%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/#idselectors1″>Статья с описанием видов селекторов CSS</a> </body> |