1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
|
---
title: Селекторы атрибута
slug: Learn/CSS/Building_blocks/Selectors/Attribute_selectors
tags:
- CSS
- Атрибут
- Начинающий
- Обучение
- Селекторы
translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors
original_slug: Learn/CSS/Building_blocks/Селекторы/Attribute_selectors
---
<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p>
<p><span class="tlid-translation translation" lang="ru"><span title="">Как вы знаете из курса о HTML, элементы могут иметь атрибуты, которые дают дополнительную информацию о размечаемом элементе.</span></span> <span class="tlid-translation translation" lang="ru"><span title="">В CSS вы можете использовать селекторы атрибута</span></span> <span class="tlid-translation translation" lang="ru"><span title="">для стилизации элементов с определёнными атрибутами</span></span>. <span class="tlid-translation translation" lang="ru"><span title="">Этот урок покажет вам, как использовать эти очень полезные селекторы.</span></span></p>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">Необходимые условия:</th>
<td>Базовая компьютерная грамотность, <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">установка базового ПО</a>, базовые знания о <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">работе с файлами</a>, основы HTML (изучите <a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML">Введение в HTML</a>) и понимание работы CSS (изучите <a href="/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>.)</td>
</tr>
<tr>
<th scope="row">Задача:</th>
<td>Узнать, что такое селекторы атрибута и как их использовать.</td>
</tr>
</tbody>
</table>
<h2 id="Селекторы_наличия_и_значения"><span class="tlid-translation translation" lang="ru"><span title="">Селекторы наличия и значения</span></span></h2>
<p><span class="tlid-translation translation" lang="ru"><span title="">Эти селекторы делают возможным выбор элемента, основанный только на наличии атрибута (например,</span></span> <code>href</code>) <span class="tlid-translation translation" lang="ru"><span title="">или на всевозможных разного рода сочетаниях со значением атрибута</span></span>.</p>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Селектор</th>
<th scope="col">Пример</th>
<th scope="col">Описание</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>[<em>attr</em>]</code></td>
<td><code>a[title]</code></td>
<td><span class="tlid-translation translation" lang="ru"><span title="">Выбирает элементы с атрибутом <em>attr</em> (имя которого </span></span> — <span class="tlid-translation translation" lang="ru"><span title=""> это значение в квадратных скобках).</span></span></td>
</tr>
<tr>
<td><code>[<em>attr</em>=<em>value</em>]</code></td>
<td><code>a[href="https://example.com"]</code></td>
<td><span class="tlid-translation translation" lang="ru"><span title="">Выбирает элементы с атрибутом <em>attr</em>, значение которого в точности равно <em>value</em> </span></span> — <span class="tlid-translation translation" lang="ru"><span title="">строке внутри кавычек.</span></span></td>
</tr>
<tr>
<td><code>[<em>attr</em>~=<em>value</em>]</code></td>
<td><code>p[class~="special"]</code></td>
<td>
<p><span class="tlid-translation translation" lang="ru"><span title="">Выбирает</span></span> элементы с атрибутом <em>attr,</em> значение которого в точности равно <em>value</em> или содержит <em>value</em> в своём (разделённом пробелами) списке значений.</p>
</td>
</tr>
<tr>
<td><code>[<em>attr</em>|=<em>value</em>]</code></td>
<td><code>div[lang|="zh"]</code></td>
<td><span class="tlid-translation translation" lang="ru"><span title="">Выбирает</span></span> элементы с атрибутом <em>attr</em>, значение которого в точности равно <em>value </em>или начинается с <em>value</em>, за которым сразу следует дефис.</td>
</tr>
</tbody>
</table>
<p><span class="tlid-translation translation" lang="ru"><span title="">В приведённом ниже примере вы можете увидеть использование этих селекторов.</span></span></p>
<ul>
<li>Используя <code>li[class],</code> мы можем выбрать каждый селектор с атрибутом класса. Это соответствует всем пунктам списка, за исключением первого.</li>
<li><code>li[class="a"]</code> выбирает селектор с классом <code>a</code>, но не селектор с классом <code>a</code> в сочетании с другим, отделённым запятой, классом как частью значения. Он выбирает второй пункт списка.</li>
<li><code>li[class~="a"]</code> выберет класс <code>a</code>, а также значение, которое содержит класс <code>a</code> как часть разделённого пробелом списка. Он выберет второй и третий пункты списка.</li>
</ul>
<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}</p>
<h2 id="Селекторы_вхождения_подстроки"><span class="tlid-translation translation" lang="ru"><span title="">Селекторы вхождения подстроки</span></span></h2>
<p><span class="tlid-translation translation" lang="ru"><span title="">Эти селекторы предоставляют более широкие возможности для выявления вхождения подстроки в значение атрибута</span></span>. Например, если у вас есть классы <code>box-warning</code> и <code>box-error</code> и вы хотите выбрать всё, что начинается со строки "box-", вы можете использовать <code>[class^="box-"]</code>, чтобы выбрать оба класса (или <code>[class|="box"]</code> как описано в предыдущем разделе).</p>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Селектор</th>
<th scope="col">Пример</th>
<th scope="col">Описание</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>[<em>attr</em>^=<em>value</em>]</code></td>
<td><code>li[class^="box-"]</code></td>
<td>Выбирает элементы с атрибутом <em>attr</em> (<span class="tlid-translation translation" lang="ru"><span title="">его имя </span></span> — <span class="tlid-translation translation" lang="ru"><span title=""> это значение в квадратных скобках</span></span>), значение которого начинается с <em>value</em>.</td>
</tr>
<tr>
<td><code>[<em>attr</em>$=<em>value</em>]</code></td>
<td><code>li[class$="-box"]</code></td>
<td>Выбирает элементы с атрибутом <em>attr</em>, значение которого заканчивается на <em>value</em>.</td>
</tr>
<tr>
<td><code>[<em>attr</em>*=<em> </em>]</code></td>
<td><code>li[class*="box"]</code></td>
<td>Выбирает элементы с атрибутом <em>attr</em>, значение которого содержит <em>value</em>, независимо от его положения внутри строки.</td>
</tr>
</tbody>
</table>
<p>(Отступление: возможно, будет полезным заметить, что <code>^</code> и <code>$</code> давно используются как <em>якоря </em>в так называемых <em>регулярных выражениях</em> и обозначают <em>начинается с </em>и <em>заканчивается на</em>.)</p>
<p>Следующий пример показывает, как используются эти селекторы:</p>
<ul>
<li><code>li[class^="a"]</code> выбирает все значения атрибута, которые начинаются с <code>a</code>, что соответствует первым двум элементам списка.</li>
<li><code>li[class$="a"]</code> выбирает все значения атрибута, которые заканчиваются на <code>a</code>, что соответствует первому и третьему элементу списка.</li>
<li><code>li[class*="a"]</code> выбирает все значения атрибута, где появляется <code>a</code>, независимо от положения в строке, что соответствует всем элементам нашего списка.</li>
</ul>
<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}</p>
<h2 id="Чувствительность_к_регистру">Чувствительность к регистру</h2>
<p><span class="tlid-translation translation" lang="ru"><span title="">Если вы хотите выбрать значения атрибута без учёта регистра</span></span><span class="tlid-translation translation" lang="ru"><span title="">, вы можете использовать значение</span></span> <code>i</code> перед закрывающей скобкой. Этот признак говорит браузеру, что символы ASCII должны сопоставляться без учёта регистра. <span class="tlid-translation translation" lang="ru"><span title="">Без этого признака значения будут сопоставлены в соответствии с чувствительностью к регистру языка документа</span></span> — <span class="tlid-translation translation" lang="ru"><span title="">в случае HTML такая чувствительность присутствует</span></span>.</p>
<p>В примере ниже первый селектор выберет значение, начинающееся с <code>a</code> — <span class="tlid-translation translation" lang="ru"><span title="">это соответствует только первому элементу списка</span></span><span class="tlid-translation translation" lang="ru"><span title="">, потому что два других элемента списка начинаются с заглавной буквы A</span></span>. Второй селектор использует признак нечувствительности к регистру и поэтому выберет все элементы списка.</p>
<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}</p>
<div class="blockIndicator note">
<p><strong>Примечание</strong>: Существует также более новое значение <code>s</code>, <span class="tlid-translation translation" lang="ru"><span title="">которое вызывает сопоставление с учётом регистра в контекстах, где сопоставление обычно не учитывает регистр, однако это не так хорошо поддерживается в браузерах и не очень полезно в контексте HTML.</span></span></p>
</div>
<h2 id="Следующие_шаги">Следующие шаги</h2>
<p>Итак, мы рассмотрели селекторы атрибута, и вы можете перейти к следующей статье, в которой рассказывается о <a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements">псевдоклассах и псевдоэлементах</a>.</p>
<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p>
<h2 id="В_этом_модуле">В этом модуле</h2>
<ol>
<li><a href="/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование</a></li>
<li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B">Селекторы CSS</a>
<ul>
<li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Type_Class_and_ID_Selectors">Селекторы типа, класса и ID</a></li>
<li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Attribute_selectors">Селекторы атрибута</a></li>
<li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements">Псевдоклассы и псевдоэлементы</a></li>
<li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Combinators">Комбинаторы</a></li>
</ul>
</li>
<li><a href="/ru/docs/Learn/CSS/Building_blocks/The_box_model">Модель коробки (The box model)</a></li>
<li><a href="/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Фон и границы</a></li>
<li><a href="/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Обработка разных направлений текста</a></li>
<li><a href="/ru/docs/Learn/CSS/Building_blocks/Overflowing_content">Переполнение содержимого</a></li>
<li><a href="/ru/docs/Learn/CSS/Building_blocks/Values_and_units">Значения и единицы измерения</a></li>
<li><a href="/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Изменение размеров в CSS</a></li>
<li><a href="/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Элементы изображений, форм и медиа-элементы</a></li>
<li><a href="/ru/docs/Learn/CSS/Building_blocks/Styling_tables">Стилизация таблиц</a></li>
<li><a href="/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS">Отладка CSS</a></li>
<li><a href="/ru/docs/Learn/CSS/Building_blocks/Organizing">Организация вашей CSS</a></li>
</ol>
|
