) и дочерний селектор (тег
является дочерним по отношению к
). При этом правила являются равносильными, поскольку все условия для них выполняются и не противоречат друг другу. В подобных случаях применяется стиль, который расположен в коде ниже, поэтому курсивный текст отображается красным цветом. Стоит поменять правила местами и поставить DIV I
ниже, как цвет текста изменится с красного на зеленый.
Заметим, что в большинстве случаев от добавления дочерних селекторов можно
отказаться, заменив их контекстными селекторами. Однако использование дочерних
селекторов расширяет возможности по управлению стилями элементов, что в итоге
позволяет получить нужный результат, а также простой и наглядный код.
Удобнее всего применять указанные селекторы для элементов, которые обладают
иерархической структурой — сюда относятся, например, таблицы и разные списки.
В примере 12.3 показано изменение вида списка с помощью стилей. За счёт
вложения одного списка в другой получаем разновидность меню. Заголовки при этом
располагаются горизонтально, а набор ссылок — вертикально под заголовками
(рис. 12.3).
Рис. 12.3. Список в виде меню
Для размещения текста по горизонтали к селектору LI
добавляется стилевое свойство float
. Чтобы при этом
разделить между собой стиль горизонтального и вертикального списка и применяются
дочерние селекторы (пример 12.3).
Пример 12.3. Использование дочерних селекторов
HTML5
CSS 2.1
IE
Cr
Op
Sa
Fx
Дочерние селекторы
В данном примере дочерние селекторы требуются, чтобы разделить стиль элементов списка верхнего уровня и вложенные списки, которые выполняют разные задачи, поэтому стиль для них не должен пересекаться.
Вопросы для проверки
1. Какой цвет будет у жирного курсивного текста в коде
Нормы освещённости построены на основе классификации зрительных работ по определенным количественным признакам.
При использовании следующего стиля?
P { color: green; }
B {color: blue; }
I {color: orange; }
B > I { color: olive; }
P > I { color: yellow; }
- Зелёный.
- Синий.
- Оранжевый.
- Оливковый.
- Жёлтый.
2. Какой элемент является родительским для тега ?
</b></p>
<ol><li><HEAD></li>
<li><BODY></li>
<li><HTML></li>
<li><META></li>
<li><!DOCTYPE></li>
</ol><p><b>3. Для какого тега элемент <!DOCTYPE> выступает родителем?
</b></p>
<ol><li><HTML></li>
<li><TITLE></li>
<li><BODY></li>
<li><HEAD></li>
<li>Ни для одного тега.</li>
</ol><h2>Ответы</h2>
<p>1. Оливковый.</p>
<p>3. Ни для одного тега.</p>
<p>Вы дошли до третьей части этой главы. Здесь вы узнаете, как использовать селекторы дочерних элементов в CSS, а также познакомитесь с некоторыми дополнительными псевдоклассами для более точной выборки.</p>
<h2>Дочерние селекторы CSS</h2>
<p>В предыдущей статье мы рассказывали о родственных связях между элементами HTML-документа, в том числе и о дочерних элементах. Давайте посмотрим на примере, как эти связи можно использовать в CSS.</p>
<p>Представьте, что вам нужно присвоить стиль только тем тегам <p>Которые являются дочерними по отношению к <body> , не затрагивая остальные <p> (например, <p>Дочерние по отношению к <div>).<br>
Как это сделать? Очень просто: создадим дочерний селектор:</p><p>Body > p {
color: #333;
}
</p><p>Обратите внимание на символ > после body . С помощью него вы указываете, что стиль применяется исключительно для дочерних тегов <p>Родителя <body> . Если символ убрать, то стиль применится абсолютно ко всем тегам <p>Которые находятся внутри тега <body> , хотя они могут и не являться для него дочерними.</p>
<h3>Дополнительные псевдоклассы</h3>
<p>В CSS3 существует ряд псевдоклассов для работы с дочерними элементами. Ниже приведено описание каждого из них, примеры использования, а также отличия между псевдоклассами вида «child» и «of-type».</p>
<ul><li>:first-child – с помощью этого псевдокласса можно применить стиль к <a href="/players/skachat-opisanie-namotki-katushki-md-kvazar-avr-otzyvy-o-metalloiskatele.html">указанному элементу</a> веб-страницы, при условии, что он является <b>первым
</b> </li>
<li>:last-child – стиль применяется к указанному элементу веб-страницы при условии, что он является <b>последним
</b> дочерним элементом своего родителя;</li>
<li>:nth-child – позволяет выбрать четные (even) и нечетные (odd) дочерние элементы; также с помощью данного псевдокласса можно стилизовать чередующиеся дочерние элементы, используя выражения вида an+b и числа;</li>
<li>:only-child – применяется к дочернему элементу при условии, что тот является <b>единственным
</b> ребенком у родителя;</li>
<li>:first-of-type – стиль применяется к <b>первому элементу указанного типа
</b> (даже если этот элемент не является первым дочерним для своего родителя и над ним находятся другие дочерние элементы других типов);</li>
<li>:last-of-type – работает точно так же, как и предыдущий псевдокласс, с той лишь разницей, что стиль применяется к <b>последнему элементу указанного типа
</b>;</li>
<li>:nth-of-type – по принципу работы похож на:nth-child , но ориентируется на <b>тип
</b> элемента;</li>
<li>:only-of-type – применяется к дочернему элементу указанного типа при условии, что тот является у родителя <b>единственным ребенком своего типа
</b>.</li>
</ul><h4>Пример использования:first-child, :last-child и:nth-child</h4>
<!-- HTML -->
<div>
<p>Первый ребенок</p>
<p>Второй ребенок</p>
<p>Третий ребенок</p>
<table>
<tr>
<td>Нечетный номер</td>
</tr>
<tr>
<td>Четный номер</td>
</tr>
<tr>
<td>Нечетный номер</td>
</tr>
<tr>
<td>Четный номер</td>
</tr>
</table>
<p>Последний ребенок</p>
</div>
<p>
/* CSS */
p:first-child {
font-weight: bold;
text-transform: uppercase;
}
p:last-child {
font-style: italic;
font-size: 0.8em;
}
p:nth-child(3) {
color: red;
}
tr:nth-child(odd) {
background-color: #A2DED0;
}
tr:nth-child(even) {
background-color: #C8F7C5;
}
Скриншот: применение:first-child, :last-child и:nth-child
</p><p>Мы написали CSS стиль для дочерних элементов простого HTML-документа, где тег <div> является родителем для тегов <p> , <table> . Разберем CSS по порядку.</p>
<p>Первое правило – p:first-child – касается элемента p: если он является <b>первым дочерним элементом своего родителя
</b>, то к нему применяется стиль (в нашем случае это <a href="/multimedia/kak-sozdat-programmu-microsoft-word-sozdanie-yarlyka-na-rabochem-stole-dlya.html">жирный шрифт</a> и преобразование текста в верхний регистр). Если в данный HTML-код сразу после открывающего тега <div> добавить еще какой-нибудь тег (к примеру, <h2>), то стиль p:first-child уже не будет отображаться, поскольку <p>Перестанет быть первым дочерним тегом. В данном случае первым дочерним элементом будет h2 .</p>
<p>Всё то же самое происходит и с правилом p:last-child – стиль CSS будет применен к тегу <p>Лишь тогда, когда он будет являться <b>последним дочерним элементом своего родителя
</b>. Добавьте после <p>Любой другой тег отличного типа и вы увидите, что правило p:last-child перестанет применяться.</p>
<p>Правило p:nth-child(3) работает для <b>третьего
</b> дочернего тега <p> (об этом свидетельствует число 3 в скобках). Цвет шрифта для этого абзаца становится красным. Вы можете изменить число 3 (например, на 2) и посмотреть результат.</p>
<p>Правила tr:nth-child(odd) и tr:nth-child(even) работают для нечётных и чётных элементов tr соответственно. Вы можете увидеть результат на скриншоте, а также скопировать весь код и поэкспериментировать со стилями самостоятельно.</p>
<h4>Пример использования:first-of-type, :last-of-type, :nth-of-type и:only-of-type</h4>
<!-- HTML -->
<div>
<h2>Первый ребенок</h2>
<p>Второй ребенок</p>
<p>Третий ребенок</p>
<h3>Четвертый ребенок</h3>
<p>Пятый ребенок</p>
<h4>Последний ребенок</h4>
</div>
<p>
/* CSS */
p:first-of-type {
color: violet;
text-transform: uppercase;
}
p:last-of-type {
font-style: italic;
font-size: 0.8em;
}
p:nth-of-type(3) {
color: red;
}
p:nth-of-type(odd) {
background-color: #A2DED0;
}
p:nth-of-type(even) {
background-color: #C8F7C5;
}
h3:only-of-type {
text-decoration: underline;
}
<br><img src='https://i2.wp.com/idg.net.ua/blog/wp-content/uploads/of-type-pseudo-classes.png' width="100%" loading=lazy> Скриншот: применение:first-of-type, :last-of-type, :nth-of-type и:only-of-type
</p><p>Первое правило CSS, которое вы видите – это p:first-of-type . Что оно делает? Оно выбирает дочерний элемент типа p , который <b>первым
</b> встречается у родителя. И не важно, на каком месте среди элементов других типов находится данный тег – на первом, втором или десятом. В этом и заключается отличие между псевдоклассами:first-child и:first-of-type .</p>
<p>Второе правило – p:last-of-type – применяет стиль к <b>последнему
</b> дочернему элементу типа p . Как видно из HTML-кода, после последнего тега <p>Есть еще и тег <h4> , присутствие которого никак не влияет на выполнение CSS-правила (в отличие от варианта с:last-of-child).</p>
<p>Следующее правило – p:nth-of-type(3) – изменяет цвет шрифта на красный. Применяется этот стиль к тегу <p>Который является <b>третьим
</b> по счету элементом своего типа у родителя. На скриншоте вы видите, что красный цвет применяется к тегу <p>Который по факту является пятым ребенком тега <div> . Но если не брать во внимание элементы других типов, то получается, что тег <p>С красным шрифтом находится на третьем месте (среди тегов своего типа). Таким образом работает данное правило.</p>
<p>Правила p:nth-of-type(even) и p:nth-of-type(odd) работают аналогично: поскольку перед двоеточием указано имя p , то выбираются четные и нечетные дочерние элементы типа p и окрашиваются в <a href="/android/kak-zadat-cvet-ramki-tablicy-v-css-ramki-i-granicy.html">заданные цвета</a>. Остальные элементы пропускаются.</p>
<p>Последнее правило – h3:only-of-type – применяется к содержимому тега <h3> , делая текст подчеркнутым. Данный стиль работает лишь потому, что тег <h3> является <b>единственным
</b> дочерним элементом своего типа. Если в HTML-код добавить еще один тег <h3> , стиль не будет применён.</p>
<h3>Выводы</h3>
<p>Дочерний селектор CSS позволяет изменить стиль дочернего элемента HTML-документа, исходя из того, кто является его родителем.</p>
<p>С помощью дополнительных псевдоклассов:first-child, :last-child, :nth-child, :only-child можно стилизовать дочерние элементы HTML-документа, ориентируясь на их местоположение, нумерацию в дереве элементов.</p>
<p>Псевдоклассы:first-of-type, :last-of-type, :nth-of-type, :only-of-type позволяют применять стиль к дочерним элементам HTML-документа, ориентируясь на их тип, а также на нумерацию в дереве элементов.</p>
<p>Приветствую Вас, уважаемые читатели. В предыдущих статьях мы изучали, в основном, атрибуты стилей CSS. Их очень много. Одни задают параметры шрифтов, другие параметры фона, третьи параметры отступов и рамок.</p>
<p>В этой статье мы поговорим о селекторах стилей. В одной из статье мы уже затрагивали . А сегодня рассмотрим еще несколько видов селекторов, которые не явно привязывают правило стиля к элементу веб-страницы. Это так называемые специальные селекторы. Их бывает несколько видов.</p>
<h2>Комбинаторы в CSS (Соседний, дочерний и контекстный селекторы)</h2>
<p><i>Комбинаторы
</i> — это <a href="/internet/gorizontalnaya-prokrutka-na-chistom-css-skroll-effekty-raznovidnosti.html">разновидность css</a> селекторов, привязывающие правило стиля к элементу web-страницы на основании его местоположения относительно других элементов.</p>
<p>Первый комбинатор символ <b>плюс
</b> (+) или <b>соседний селектор
</b>. Плюс устанавливается между двумя селекторами:</p>
<p><селектор 1> + <селектор 2> { <стиль> }</p>
<p>Стиль в этом случае применяется к <i>селектору 2
</i>, но только в том случае если он является соседним для <i>селектора 1
</i> и идет сразу после него. Рассмотрим пример:</p>
<p>strong + i {<br><br>
}<br>
...<br>
<p>Это обычный текст. <strong>Это <a href="/players/html-vydelenie-vydelenie-teksta-zhirnym-kursivom-i-cvetom.html">жирный текст</a></strong>, обычный текст, <i>красный текст</i> </p><br>
<p>Это обычный текст. <strong>Это жирный текст</strong>, обычный текст, <i>и это обычный текст</i>.</p></p>
<p>Результат:</p>
<p>Стиль описанный в примере будет применен только к первому тексту заключенному в тег <i><i>
</i>, т.к. он следует сразу же после тега <i><strong>
</i>.</p>
<p>Комбинатор <b>тильда
</b> (~) также применяется к соседним селекторам, но в этот раз между ними могут быть другие элементы. При этом оба селектора должны быть вложены в один и тот же родительский тег:</p>
<p><селектор 1> ~ <селектор 2> { <стиль> }</p>
<p>Стиль будет применен к <i>селектору 2
</i>, который должен следовать за <i>селектором 1
</i>. Рассмотри пример:</p>
<p>strong ~ i {<br>
color: red; /* Красный цвет текста */<br>
}<br>
...<br>
<p>Это обычный текст. <strong>Это жирный текст</strong>, обычный текст, <i>красный текст</i> к нему применилось правило соседних селекторов.</p><br>
<p>Это обычный текст. <strong>Это жирный текст</strong>, обычный текст, <i>а это красный текст</i>.</p></p>
<p>Результат:</p>
<p><img src='https://i0.wp.com/webcodius.ru/wp-content/uploads/2014/12/selektory2.png' align="center" width="100%" loading=lazy></p>
<p>Как видим, в этот раз правило стиля сработало для обоих текстов заключенных в тег <i><i>
</i>, несмотря на то, что во втором случае между тегом <i><strong>
</i> и <i><i>
</i> стоит тег <i><span>
</i>.</p>
<p>Комбинатор <b>>
</b> относится к <b>дочерним селекторам
</b>. Позволяет привязать стиль CSS к элементу веб-страницы, непосредственно вложенному в другой элемент:</p>
<p><селектор 1> > <селектор 2> { <стиль> }</p>
<p><i>Стиль
</i> будет привязан к <i>селектору 2
</i>, который непосредственно вложен в <i>селектор 1
</i>.</p>
<p>div > strong {<br><br>
}<br>
...<br>
<div>Это обычный текст. <strong>Это жирный курсивный текст </strong>.<br>
<p>Это обычный текст. <strong>А это обычный жирный текст</strong>.</p><br>
</div></p>
<p>И результат:</p>
<p><img src='https://i0.wp.com/webcodius.ru/wp-content/uploads/2014/12/selektory3.png' align="center" width="100%" loading=lazy></p>
<p>Как видно на рисунке, правило стиля подействовало только на первый тег <i><strong>
</i>, который непосредственно вложен в тег <i><div>
</i>. А непосредственным родителем второго тега <i><strong>
</i> является тег <i><p>
</i>, поэтому правило на него не действует.</p>
<p>Следующим рассмотрим <b>контекстный селектор <пробел>
</b>. Он позволяет привязать CSS стиль к элементу вложенному в другой элемент, причем может быть любой уровень вложенности:</p>
<p><селектор 1> <селектор 2> { <стиль> }</p>
<p>Стиль будет применен к <i>селектору 2
</i>, если он так или иначе вложен в <i>селектор 1
</i>.</p>
<p>Рассмотрим предыдущий пример, только при <a href="/graphic-editors/urok-css-poyavlyayushcheesya-opisanie-pri-navedenie-na-izobrazhenie-kak-realizovat-na.html">описании CSS</a> правила применим контекстный селектор:</p>
<p>div strong {<br>
font-style: italic /* Курсив */<br>
}<br>
...<br>
<div>Это обычный текст. <strong>Это жирный курсивный текст </strong>.<br>
<p>Это обычный текст. <strong>А это тоже курсивный жирный текст</strong>.</p><br>
</div><br>
<p>Обычный текст и <strong>просто жирный текст</strong></p></p>
<p>Результат:</p>
<p><img src='https://i1.wp.com/webcodius.ru/wp-content/uploads/2014/12/selektory4.png' align="center" width="100%" loading=lazy></p>
<p>Как видим, на этот раз правило подействовало на оба тега <i><strong>
</i>, даже на тот, который вложен и в контейнер <i><div>
</i> и в абзац <i><p>
</i>. На тег <i><strong>
</i>, который просто вложен в абзац <i><p>
</i> правило css никак не действует.</p>
<h2>Селекторы по атрибутам тега</h2>
<p>Селекторы атрибутов — это специальные селекторы, которые привязывают стиль к элементу на основании, присутствует ли в нем определенный атрибут или имеет ли он определенное значение. Существует несколько вариантов применения таких селекторов.</p>
<h3>1. Простой селектор атрибута</h3>
<p>Имеет вид:</p>
<p><селектор>[<имя атрибута тега>] { <стиль> }</p>
<p>И привязывает стиль к тем элементам, внутри которых добавлен указанный атрибут. Например:</p>
<p>strong{<br>
color:red;<br>
}<br>
...<br>
<p><strong>Автомобиль</strong> это механическое моторное безрельсовое <strong title="<a href="/tools/skachat-chit-panel-dlya-gta-5-chity-na-transportnye-sredstva-mashiny-i.html">транспортное средство</a>">дорожное транспортное средство</strong> минимум с 4 колёсами.</p></p>
<p>Результат:</p>
<p><img src='https://i2.wp.com/webcodius.ru/wp-content/uploads/2014/12/selektory5.png' align="center" width="100%" loading=lazy></p>
<p>На рисунке можно заметить, что правило css (красный цвет текста) применяется к элементу <i>strong
</i>, к которому добавлен атрибут <i>title
</i>.</p>
<h3>2. Селектор атрибута со значением</h3>
<p>Синтаксис этого селектора следующий:</p>
<p><селектор>[<имя атрибута тега>=<значение>] { <стиль> }</p>
<p>Привязывает <i>стиль
</i> к элементам, теги которых имеют атрибут с указанным <i>именем
</i> и <i>значением
</i>. Пример:</p>
<p>a{<br>
color:red;<br>
font-size:150%;<br>
}<br>
...<br>.ru" target="_blank">Ссылка в новом окне</a></p></p>
<p>Результат:</p>
<p><img src='https://i2.wp.com/webcodius.ru/wp-content/uploads/2014/12/selektory6.png' align="center" width="100%" loading=lazy></p>
<p>Как видим, оба элемента типа гиперссылка имеют атрибут <i>target
</i>, но правило css, которое увеличивает текст ссылки в полтора раза и изменяет его цвет в красный, применяется к тегу <i><a>
</i> у которого атрибут <i>target
</i> имеет значение <i>«_blank»
</i>.</p>
<h3>3. Одно из нескольких значений атрибута</h3>
<p>Некоторые значения атрибутов могут перечисляться через пробел, например имена классов. Чтобы задать правило стиля при наличии в списке значений атрибутов требуемого значения применяется следующий селектор:</p>
<p>[<имя атрибута тега>~=<значение>] { <стиль> }<br>
<основной селектор>[<имя атрибута тега>~=<значение>] { <стиль> }</p>
<p>Стиль применяется в том случае, если у атрибута имеется требуемое значение или оно входит в список значений, разделенных пробелами. Например:</p>
<p>{<br>
color:red;<br>
font-size:150%;<br>
}<br>
...<br>
<p>Наш телефон: <span class="tel block">777-77-77</p><br>
<p>Наш адрес: <span class="adress block">Москва ул. Советская 5</p></p>
<p>Получиться следующий результат:</p>
<p><img src='https://i2.wp.com/webcodius.ru/wp-content/uploads/2014/12/selektory7.png' align="center" width="100%" loading=lazy></p>
<p>Правило применяется к элементу, у которого среди значений атрибута <i>class
</i> имеется значение <i>tel
</i>.</p>
<h3>4. Дефис в значении атрибута</h3>
<p>В значениях идентификаторов и классов допускается использовать дефис. Для привязки стиля к элементам, значения атрибутов которых могут содержать дефис можно воспользоваться следующей конструкцией:</p>
<p>[атрибут|="значение"] { стиль }<br>
Селектор[атрибут|="значение"] { стиль }</p>
<p>Стиль применяется к тем элементам, у которых значение атрибута начинается с указанного значения после, которого идет дефис. Например:</p>
<p>{<br>
color:red;<br>
font-size:150%;<br>
}<br>
...<br>
<ul><br>
<li class="menu-item">Пункт 1</li><br>
<li class="item-menu">Пункт 2</li><br>
<li class="menuitem">Пункт 3</li><br>
<li class="menu-item">Пункт 4</li><br>
</ul></p>
<p>Результат:</p>
<p><img src='https://i2.wp.com/webcodius.ru/wp-content/uploads/2014/12/selektory8.png' align="center" width="100%" loading=lazy></p>
<p>В примере правило стиля применяется только к тем элементам списка, у которых имя класса начинается со значения <i>«menu- „
</i>.</p>
<h3>5. Значение атрибута начинается с определенного текста</h3>
<p>Данный селектор устанавливает стиль для элемента, если значение атрибута тега начинается с определенного значения. Может быть два варианта:</p>
<p>[<имя атрибута тега>^=<подстрока>] { <стиль> }<br>
<основной селектор>[<имя атрибута тега>^=<подстрока>] { <стиль> }</p>
<p>В первом случае <i>стиль
</i> применяется ко всем элементам, теги которых имеют атрибут с указанным <i>именем
</i> и значением, начинающимся с указанной <i>подстроки
</i>. Во втором случае тоже самое, только к определенным элементам указанным в <i>основном селекторе
</i>. Пример:</p>
<p>a{<br>
color:green;<br>
font-weight:bold;<br>
}<br>
...<br>
</p>
<p>Результат:</p>
<p><img src='https://i2.wp.com/webcodius.ru/wp-content/uploads/2014/12/selektory9.png' align="center" width="100%" loading=lazy></p>
<p>В примере показано, как по разному отобразить внешние ссылки и внутренние ссылки. Внешние ссылки всегда начинаются со строки «http://». Поэтому в селекторе указываем, что стиль применять только к ссылкам, у которых атрибут <i>href
</i> начинается со значения <i>http://
</i>.</p>
<h3>6. Значение атрибута заканчивается определенным текстом</h3>
<p>Привязывает стиль к элементам, у которых значение атрибута заканчивается указанным текстом. Имеет следующий синтаксис:</p>
<p>[<имя атрибута тега>$=<подстрока>] { <стиль> }<br>
<основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> }</p>
<p>В первом случае <i>стиль
</i> применяется ко всем элементам, у которых имеется <i>атрибут
</i> с указанным <i>именем
</i> и имеет значение оканчивающееся указанной <i>подстрокой
</i>. Во втором случае тоже самое, только к указанным <i>селекторам
</i>. Таким способом, например, можно по разному отображать различные форматы графических изображений. Например:</p>
<p>IMG {<br>
border: 5px solid red;<br>
}<br>
...<br>
<p>Картинка формата gif</p><br>
<img src='https://i1.wp.com/1.gif' loading=lazy><br>
<p>Картинка формата png</p><br>
<img src='https://i2.wp.com/2.jpg' loading=lazy></p>
<p>Результат:</p>
<p><img src='https://i0.wp.com/webcodius.ru/wp-content/uploads/2014/12/selektory10.png' align="center" height="399" width="316" loading=lazy></p>
<p>В примере все картинки с расширением gif будут отображаться с красной рамкой толщиной пять пикселей.</p>
<h3>7. Значение атрибута содержит указанную строку</h3>
<p>Этот селектор привязывает стиль к тегам, значение атрибута которых содержат определенный текст. Синтаксис:</p>
<p>[<имя атрибута тега>*=<подстрока>] { <стиль> }<br>
<основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> }</p>
<p><i>Стиль
</i> привязывается к элементам, у которых имеется <i>атрибут
</i> с указанным именем и его значение содержит указанную <i>подстроку
</i>. Например:</p>
<p>IMG {<br>
border: 5px solid red;<br>
}<br>
...<br>
<p>Картинка из папки gallery</p><br>
<img src='https://i0.wp.com/gallery/1.jpg' loading=lazy><br>
<p>Картинка из другой папки</p><br>
<img src='https://i2.wp.com/2.jpg' loading=lazy></p>
<p>Результат:</p>
<p><img src='https://i1.wp.com/webcodius.ru/wp-content/uploads/2014/12/selektory11.png' align="center" height="399" width="316" loading=lazy></p>
<p>В примере стиль применяется к картинкам, которые загружены из папки <i>«gallery»
</i>.</p>
<p>На этом об селекторах атрибутов все. Все перечисленные методы можно комбинировать между собой:</p>
<p>Селектор[атрибут1="значение1"][атрибут2="значение2"] { стиль }</p>
<p>Кроме того напомню о специальных селекторах CSS:</p>
<ul><li>с помощью символов «+» и «~» формируются ;</li>
<li>символ «>» привязывает css стили к <b>дочерним
</b> тегам;</li>
<li>символ <пробел> формирует контекстные селекторы.</li>
</ul><p>В следующих статьях мы рассмотрим также псевдоэлементы и псевдоклассы, которые предоставляют мощный инструмент управления стилями.</p>
<p>На этом все, до новых встреч.</p>
<p>Дочерние элементы - это элементы, которые располагаются непосредственно внутри родительского элемента. Обратите внимание на слова: непосредственно внутри.</p>
<p>Давайте рассмотрим пример простого html-кода:</p><p>
<!DOCTYPE html>
<html>
<head>
<title>Дочерние элементы.
Абзац и в нём жирный элемент, и вот наклонный элемент.
Тут жирный и подчёркнутый и наклонный элементы.
) и дочерний селектор (тег
является дочерним по отношению к