Articles
Wprowadzenie do CSS
Szczegóły selektorów atrybutów w CSS

Szczegóły selektorów atrybutów w CSS

Ten artykuł wyjaśnia szczegóły selektorów atrybutów w CSS.

Możesz nauczyć się pisać dopasowanie początkowe, końcowe oraz częściowe dla selektorów atrybutów.

YouTube Video

HTML do podglądu

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>

Szczegóły selektorów atrybutów w CSS

Selektory atrybutów CSS są używane do wybierania elementów HTML, które mają określone atrybuty. Pozwala to stylizować elementy w oparciu o ich wartości atrybutów. Wyjaśnimy teraz krok po kroku od podstaw po zaawansowane zastosowanie selektorów atrybutów.

Typy i składnia selektorów atrybutów

Istnieje wiele rodzajów selektorów atrybutów. Tutaj szczegółowo przyjrzymy się każdemu rodzajowi selektora.

Wybieranie elementów z atrybutem 

1a[target] {
2    font-weight: bold;
3}
  • Określając nazwę atrybutu, możesz wybrać wszystkie elementy, które mają określony atrybut.
  • W tym przykładzie wszystkie elementy <a> z atrybutem target mają pogrubiony tekst.

Wybieranie elementów z określoną wartością atrybutu 

1input[type="text"] {
2  border: 2px solid green;
3}
  • Użycie = pozwala na wybór elementów, których wartość atrybutu dokładnie odpowiada określonej wartości.
  • W tym przykładzie wszystkie elementy <input> z atrybutem type ustawionym na "text" będą miały zastosowaną zieloną ramkę.

Wybieranie elementów z częściowym dopasowaniem wartości atrybutu

Możesz określić częściowe dopasowania wartości atrybutów, używając następujących trzech selektorów.

  1. Zaczyna się od (^=)
1a[href^="https://"] {
2    font-weight: bold;
3}
  • Wybiera elementy, gdzie wartość atrybutu zaczyna się od określonego ciągu znaków.
  • W tym przykładzie wszystkie linki z atrybutem href zaczynającym się od "https://" będą pogrubione.
  1. Kończy się ($=)
1img[src$=".jpg"] {
2    border-radius: 10px;
3}
  • Wybiera elementy, których wartość atrybutu kończy się określonym ciągiem znaków.
  • W tym przykładzie style zaokrąglające narożniki są stosowane do wszystkich obrazów z atrybutem src kończącym się na .jpg.
  1. Zawiera (*=)
1p[class*="highlight"] {
2    background-color: yellow;
3}
  • Wybiera elementy, których wartość atrybutu zawiera określony ciąg znaków.
  • W tym przykładzie żółte tło jest stosowane do wszystkich elementów <p>, których atrybut class zawiera "highlight".

Wybieranie elementów, których wartość atrybutu zawiera słowo oddzielone spacjami (~=) 

1div[class~="featured"] {
2  border: 1px solid red;
3}
  • ~= wybiera elementy, jeśli wartość atrybutu zawiera określone słowo wśród słów oddzielonych spacjami.
  • W tym przykładzie czerwona ramka jest stosowana do wszystkich elementów <div>, których atrybut class zawiera słowo "featured".

Wybieranie elementów, których wartość atrybutu zaczyna się od wartości oddzielonej myślnikiem (|=) 

1p[lang|="en"] {
2  font-style: italic;
3}
  • |= wybiera elementy, jeśli wartość atrybutu odpowiada określonemu ciągowi znaków lub zaczyna się od niego, a następnie występuje myślnik. Jest to głównie stosowane z atrybutem języka (lang).
  • W tym przykładzie kursywa jest stosowana do wszystkich elementów <p>, których atrybut lang zaczyna się od "en", na przykład "en" lub "en-US".

Przykłady praktyczne i zastosowania

Przyjrzyjmy się teraz kilku praktycznym scenariuszom.

Stylizowanie pól formularza 
1input[required] {
2  background-color: #ffcccc;
3}
4
5input[placeholder] {
6  font-style: italic;
7  color: #999;
8}
  • W tym przykładzie czerwonawe tło jest stosowane do wszystkich pól wejściowych z atrybutem required, a tekst zastępczy pól z atrybutem placeholder jest stylizowany kursywą i jasnym kolorem.
Stylizowanie na podstawie protokołów odnośników 
1a[href^="http://"] {
2  color: orange;
3}
4
5a[href^="https://"] {
6  color: green;
7}
  • Tutaj odnośniki zaczynające się od http:// są ustawione na pomarańczowo, a odnośniki zaczynające się od https:// na zielono. Umożliwia to wizualne rozróżnienie między bezpiecznymi a niebezpiecznymi odnośnikami.
Stylizowanie na podstawie formatów obrazów 
1img[src$=".png"] {
2  border: 2px solid blue;
3}
4
5img[src$=".jpg"] {
6  opacity: 0.5;
7}
  • W tym przykładzie niebieska ramka jest dodawana do obrazów w formacie .png, a przezroczystość obrazów w formacie .jpg jest ustawiona na 50%.

Podsumowanie

Selektory atrybutów CSS są elastycznym i potężnym sposobem wybierania elementów na podstawie atrybutów HTML. Używanie tych selektorów pozwala na bardziej szczegółowe stylizowanie.

Wykorzystaj podstawową składnię i podane przykłady w tym artykule, aby z łatwością osiągnąć bardziej zaawansowane stylizowanie.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video

Dziedziczenie w CSSZnaki specjalne i funkcje w CSS