Детали селекторов атрибутов в CSS

Articles

Эта статья объясняет детали селекторов атрибутов в CSS.

Вы можете узнать, как применять начальное совпадение, конечное совпадение и частичное совпадение для селекторов атрибутов.

YouTube Video

HTML для предварительного просмотра

css-attribute-selector.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Pseudo Class/Element</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-attribute-selector.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Attribute Selectors</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header><h2>CSS Attribute Selectors</h2></header>
 19        <article>
 20            <h3>element[attribute]</h3>
 21            <section>
 22                <header><h4>CSS</h4></header>
 23<pre class="sample">
 24a[target] {
 25    font-weight: bold;
 26}
 27</pre>
 28                <header><h4>HTML</h4></header>
 29<pre>
 30&lt;a href="https://example.com" target="_blank"&gt;Example Link (target="_blank")&lt;/a&gt;
 31&lt;a href="https://example.com"&gt;Example Link (no target)&lt;/a&gt;
 32</pre>
 33                <header><h4>HTML+CSS</h4></header>
 34                <section class="sample-view">
 35                    <a href="https://example.com" target="_blank">Example Link (target="_blank")</a>
 36                    <a href="https://example.com">Example Link (no target)</a>
 37                </section>
 38            </section>
 39        </article>
 40        <article>
 41            <h3>element[attribute=value] : =</h3>
 42            <section>
 43                <header><h4>CSS</h4></header>
 44<pre class="sample">
 45input[type="text"] {
 46    border: 2px solid green;
 47}
 48</pre>
 49                <header><h4>HTML</h4></header>
 50<pre>
 51&lt;input type="text" placeholder="Enter text here"&gt;
 52&lt;input type="password" placeholder="Password (no border)"&gt;
 53&lt;input type="text" placeholder="Another text input"&gt;
 54</pre>
 55                <header><h4>HTML+CSS</h4></header>
 56                <section class="sample-view">
 57                    <input type="text" placeholder="Enter text here">
 58                    <input type="password" placeholder="Password (no border)">
 59                    <input type="text" placeholder="Another text input">
 60                </section>
 61            </section>
 62        </article>
 63        <article>
 64            <h3>element[attribute^=value] : ^=</h3>
 65            <section>
 66                <header><h4>CSS</h4></header>
 67<pre class="sample">
 68a[href^="https://"] {
 69    font-weight: bold;
 70}
 71</pre>
 72                <header><h4>HTML</h4></header>
 73<pre>
 74&lt;a href="https://example.com"&gt;Secure Link (https)&lt;/a&gt;
 75&lt;a href="http://example.com"&gt;Non-Secure Link (http)&lt;/a&gt;
 76&lt;a href="https://another-example.com"&gt;Another Secure Link (https)&lt;/a&gt;
 77</pre>
 78                <header><h4>HTML+CSS</h4></header>
 79                <section class="sample-view">
 80                    <a href="https://example.com">Secure Link (https)</a>
 81                    <a href="http://example.com">Non-Secure Link (http)</a>
 82                    <a href="https://another-example.com">Another Secure Link (https)</a>
 83                </section>
 84            </section>
 85        </article>
 86        <article>
 87            <h3>element[attribute$=value] : $=</h3>
 88            <section>
 89                <header><h4>CSS</h4></header>
 90<pre class="sample">
 91img[src$=".jpg"] {
 92    border-radius: 10px;
 93}
 94</pre>
 95                <header><h4>HTML</h4></header>
 96<pre>
 97&lt;img src="image.jpg" alt="JPG Image" width="100"&gt;
 98&lt;img src="pattern.png" alt="PNG Image (no border radius)" width="100"&gt;
 99&lt;img src="example.jpg" alt="Another JPG Image" width="100"&gt;
100</pre>
101                <header><h4>HTML+CSS</h4></header>
102                <section class="sample-view">
103                    <img src="image.jpg" alt="JPG Image" width="100">
104                    <img src="pattern.png" alt="PNG Image (no border radius)" width="100">
105                    <img src="example.jpg" alt="Another JPG Image" width="100">
106                </section>
107            </section>
108        </article>
109        <article>
110            <h3>element[attribute*=value] : *=</h3>
111            <section>
112                <header><h4>CSS</h4></header>
113<pre class="sample">
114p[class*="highlight"] {
115    background-color: yellow;
116}
117</pre>
118                <header><h4>HTML</h4></header>
119<pre>
120&lt;p class="highlight-text"&gt;This paragraph is highlighted.&lt;/p&gt;
121&lt;p class="normal-text"&gt;This paragraph is not highlighted.&lt;/p&gt;
122&lt;p class="text-highlight-important"&gt;This is another highlighted paragraph.&lt;/p&gt;
123</pre>
124                <header><h4>HTML+CSS</h4></header>
125                <section class="sample-view">
126                    <p class="highlight-text">This paragraph is highlighted.</p>
127                    <p class="normal-text">This paragraph is not highlighted.</p>
128                    <p class="text-highlight-important">This is another highlighted paragraph.</p>
129                </section>
130            </section>
131        </article>
132        <article>
133            <h3>element[attribute~=value] : ~=</h3>
134            <section>
135                <header><h4>CSS</h4></header>
136<pre class="sample">
137div[class~="featured"] {
138    border: 1px solid red;
139}
140</pre>
141                <header><h4>HTML</h4></header>
142<pre>
143&lt;div class="featured"&gt;This div is featured.&lt;/div&gt;
144&lt;div class="content featured"&gt;This div is also featured.&lt;/div&gt;
145&lt;div class="content"&gt;This div is not featured.&lt;/div&gt;
146</pre>
147                <header><h4>HTML+CSS</h4></header>
148                <section class="sample-view">
149                    <div class="featured">This div is featured.</div>
150                    <div class="content featured">This div is also featured.</div>
151                    <div class="content">This div is not featured.</div>
152                </section>
153            </section>
154        </article>
155        <article>
156            <h3>element[attribute|=value] : |=</h3>
157            <section>
158                <header><h4>CSS</h4></header>
159<pre class="sample">
160p[lang|="en"] {
161    font-style: italic;
162}
163</pre>
164                <header><h4>HTML</h4></header>
165<pre>
166&lt;p lang="en"&gt;This paragraph is in English.&lt;/p&gt;
167&lt;p lang="en-US"&gt;This paragraph is in American English.&lt;/p&gt;
168&lt;p lang="fr"&gt;Ce paragraphe est en français.&lt;/p&gt;
169</pre>
170                <header><h4>HTML+CSS</h4></header>
171                <section class="sample-view">
172                    <p lang="en">This paragraph is in English.</p>
173                    <p lang="en-US">This paragraph is in American English.</p>
174                    <p lang="fr">Ce paragraphe est en français.</p>
175                </section>
176            </section>
177        </article>
178
179        <article>
180            <h3>CSS Attribute Selector Example : input[required] &amp; input[placeholder]</h3>
181            <section>
182                <header><h4>CSS</h4></header>
183<pre class="sample">
184input[required] {
185    background-color: #ffcccc;
186}
187
188input[placeholder] {
189    font-style: italic;
190    color: #999;
191}
192</pre>
193                <header><h4>HTML</h4></header>
194<pre>
195&lt;input type="text" required placeholder="Enter your name"&gt;
196&lt;input type="email" required placeholder="Enter your email"&gt;
197&lt;input type="text" placeholder="Optional field"&gt;
198</pre>
199                <header><h4>HTML+CSS</h4></header>
200                <section class="sample-view">
201                    <input type="text" required placeholder="Enter your name">
202                    <input type="email" required placeholder="Enter your email">
203                    <input type="text" placeholder="Optional field">
204                </section>
205            </section>
206        </article>
207        <article>
208            <h3>CSS Attribute Selector Example : a[href^="https://"]</h3>
209            <section>
210                <header><h4>CSS</h4></header>
211<pre class="sample">
212a[href^="http://"] {
213    color: orange;
214}
215
216a[href^="https://"] {
217    color: green;
218}
219</pre>
220                <header><h4>HTML</h4></header>
221<pre>
222&lt;a href="http://example.com"&gt;HTTP Link&lt;/a&gt;
223&lt;a href="https://secure.example.com"&gt;HTTPS Link&lt;/a&gt;
224&lt;a href="/relative/path"&gt;Relative Link&lt;/a&gt;
225</pre>
226                <header><h4>HTML+CSS</h4></header>
227                <section class="sample-view">
228                    <a href="http://example.com">HTTP Link</a>
229                    <a href="https://secure.example.com">HTTPS Link</a>
230                    <a href="/relative/path">Relative Link</a>
231                </section>
232            </section>
233        </article>
234        <article>
235            <h3>Attribute Selectors</h3>
236            <section>
237                <header><h4>CSS</h4></header>
238<pre class="sample">
239img[src$=".png"] {
240    border: 2px solid blue;
241}
242
243img[src$=".jpg"] {
244    opacity: 0.5;
245}
246</pre>
247                <header><h4>HTML</h4></header>
248<pre>
249&lt;img src="pattern.png" alt="PNG Image" width="100"&gt;
250&lt;img src="document.jpg" alt="JPEG Image" width="100"&gt;
251</pre>
252                <header><h4>HTML+CSS</h4></header>
253                <section class="sample-view">
254                    <img src="pattern.png" alt="PNG Image" width="100">
255                    <img src="image.jpg" alt="JPEG Image" width="100">
256                </section>
257            </section>
258        </article>
259
260    </main>
261</body>
262</html>

Детали селекторов атрибутов в CSS

Селекторы атрибутов CSS используются для выбора HTML-элементов с определенными атрибутами. Это позволяет стилизовать элементы на основе их значений атрибутов. Теперь мы объясним пошагово, начиная с основ и заканчивая продвинутым применением селекторов атрибутов.

Типы и синтаксис селекторов атрибутов

Существуют различные типы селекторов атрибутов. Здесь мы подробно рассмотрим каждый тип селектора.

Выбор элементов с атрибутом

1a[target] {
2    font-weight: bold;
3}

Указав имя атрибута, вы можете выбрать все элементы, которые имеют указанный атрибут.
В этом примере текст всех элементов <a> с атрибутом target выделен жирным шрифтом.

Выбор элементов с определенным значением атрибута

1input[type="text"] {
2  border: 2px solid green;
3}

Использование = позволяет выбрать элементы, значение атрибута которых точно совпадает с определённым значением.
В этом примере всем элементам <input> с атрибутом type, установленным в значение "text", будет применена зеленая рамка.

Выбор элементов с частичным совпадением значения атрибута

Вы можете указать частичное совпадение значений атрибута с помощью следующих трех селекторов.

Начинается с (^=)

1a[href^="https://"] {
2    font-weight: bold;
3}

Выбирает элементы, у которых значение атрибута начинается с указанной строки.
В этом примере все ссылки с атрибутом href, начинающимся с "https://", будут выделены жирным шрифтом.

Заканчивается на ($=)

1img[src$=".jpg"] {
2    border-radius: 10px;
3}

Выбирает элементы, значение атрибута которых заканчивается указанной строкой.
В этом примере стили с закругленными углами применяются ко всем изображениям с атрибутом src, заканчивающимся на .jpg.

Содержит (*=)

1p[class*="highlight"] {
2    background-color: yellow;
3}

Выбирает элементы, значение атрибута которых содержит указанную строку.
В этом примере к элементам <p> с атрибутом class, содержащим "highlight", применяется фон желтого цвета.

Выбор элементов, в которых значение атрибута содержит разделенное пробелами слово (`~=`)

1div[class~="featured"] {
2  border: 1px solid red;
3}

~= выбирает элементы, если значение атрибута содержит указанное слово среди слов, разделенных пробелами.
В этом примере красная граница применяется ко всем элементам <div>, атрибут class которых содержит слово "featured".

Выбор элементов, чье значение атрибута начинается с разделенного дефисом значения (`|=`)

1p[lang|="en"] {
2  font-style: italic;
3}

|= выбирает элементы, если значение атрибута совпадает с указанной строкой или начинается с нее, после которой идет дефис. Он в основном используется с языковым атрибутом (lang).
В этом примере курсив применяется ко всем элементам <p>, атрибут lang которых начинается с "en", например, "en" или "en-US".

Практические примеры и применения

Далее рассмотрим несколько практических сценариев.

Стилизация полей ввода формы

1input[required] {
2  background-color: #ffcccc;
3}
4
5input[placeholder] {
6  font-style: italic;
7  color: #999;
8}

В этом примере красноватый фон применяется ко всем полям ввода с атрибутом required, а текст заполнителя в полях ввода с атрибутом placeholder оформлен курсивом и бледным цветом.

Стилизация на основе протоколов ссылок

1a[href^="http://"] {
2  color: orange;
3}
4
5a[href^="https://"] {
6  color: green;
7}

Здесь ссылки, начинающиеся с http://, оформлены оранжевым цветом, а ссылки, начинающиеся с https://, оформлены зеленым цветом. Это позволяет визуально различать безопасные и небезопасные ссылки.

Стилизация на основе форматов изображений

1img[src$=".png"] {
2  border: 2px solid blue;
3}
4
5img[src$=".jpg"] {
6  opacity: 0.5;
7}

В этом примере изображения в формате .png получают синюю границу, а прозрачность изображений в формате .jpg устанавливается на 50%.

Резюме

Селекторы атрибутов CSS — это гибкий и мощный способ выбора элементов на основе HTML-атрибутов. Использование этих селекторов позволяет применять более точную стилизацию.

Используйте базовый синтаксис и приведенные в этой статье примеры применения, чтобы легко достичь более сложной стилизации.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

Наследование в CSS Специальные символы и функции в CSS

Детали селекторов атрибутов в CSS

YouTube Video

HTML для предварительного просмотра

Детали селекторов атрибутов в CSS

Типы и синтаксис селекторов атрибутов

Выбор элементов с атрибутом

Выбор элементов с определенным значением атрибута

Выбор элементов с частичным совпадением значения атрибута

Выбор элементов, в которых значение атрибута содержит разделенное пробелами слово (~=)

Выбор элементов, чье значение атрибута начинается с разделенного дефисом значения (|=)

Практические примеры и применения

Стилизация полей ввода формы

Стилизация на основе протоколов ссылок

Стилизация на основе форматов изображений

Резюме

YouTube Video

Выбор элементов, в которых значение атрибута содержит разделенное пробелами слово (`~=`)

Выбор элементов, чье значение атрибута начинается с разделенного дефисом значения (`|=`)