Details van attribuutselectors in CSS
Dit artikel legt de details van attribuutselectors in CSS uit.
Je kunt leren hoe je voorwaartse, achterwaartse en gedeeltelijke overeenkomsten schrijft voor attribuutselectors.
YouTube Video
HTML voor Voorbeeldweergave
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<a href="https://example.com" target="_blank">Example Link (target="_blank")</a>
31<a href="https://example.com">Example Link (no target)</a>
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<input type="text" placeholder="Enter text here">
52<input type="password" placeholder="Password (no border)">
53<input type="text" placeholder="Another text input">
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<a href="https://example.com">Secure Link (https)</a>
75<a href="http://example.com">Non-Secure Link (http)</a>
76<a href="https://another-example.com">Another Secure Link (https)</a>
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<img src="image.jpg" alt="JPG Image" width="100">
98<img src="pattern.png" alt="PNG Image (no border radius)" width="100">
99<img src="example.jpg" alt="Another JPG Image" width="100">
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<p class="highlight-text">This paragraph is highlighted.</p>
121<p class="normal-text">This paragraph is not highlighted.</p>
122<p class="text-highlight-important">This is another highlighted paragraph.</p>
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<div class="featured">This div is featured.</div>
144<div class="content featured">This div is also featured.</div>
145<div class="content">This div is not featured.</div>
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<p lang="en">This paragraph is in English.</p>
167<p lang="en-US">This paragraph is in American English.</p>
168<p lang="fr">Ce paragraphe est en français.</p>
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] & 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<input type="text" required placeholder="Enter your name">
196<input type="email" required placeholder="Enter your email">
197<input type="text" placeholder="Optional field">
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<a href="http://example.com">HTTP Link</a>
223<a href="https://secure.example.com">HTTPS Link</a>
224<a href="/relative/path">Relative Link</a>
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<img src="pattern.png" alt="PNG Image" width="100">
250<img src="document.jpg" alt="JPEG Image" width="100">
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>Details van attribuutselectors in CSS
CSS-attribuutselectors worden gebruikt om HTML-elementen te selecteren die specifieke attributen hebben. Hiermee kun je elementen stijlen op basis van hun attribuutwaarden. We zullen nu stap voor stap uitleggen, van de basis tot geavanceerd gebruik van attribuutselectors.
Typen en syntaxis van attribuutselectors
Er zijn verschillende typen attribuutselectors. Hier bekijken we elk type selector in detail.
Selecteren van elementen met een attribuut
1a[target] {
2 font-weight: bold;
3}- Door de attribuutnaam op te geven, kunt u alle elementen selecteren die het opgegeven attribuut hebben.
- In dit voorbeeld wordt de tekst van alle
<a>-elementen met het attribuuttargetvetgedrukt gemaakt.
Elementen selecteren met een specifieke attribuutwaarde
1input[type="text"] {
2 border: 2px solid green;
3}- Met behulp van
=kunt u elementen selecteren waarvan de attribuutwaarde exact overeenkomt met een specifieke waarde. - In dit voorbeeld krijgen alle
<input>-elementen met hettype-attribuut ingesteld op"text"een groene rand.
Elementen selecteren met gedeeltelijke overeenkomsten in attribuutwaarden
Je kunt gedeeltelijke overeenkomsten in attribuutwaarden specificeren met de volgende drie selectors.
- Begint met (
^=)
1a[href^="https://"] {
2 font-weight: bold;
3}- Selecteert elementen waarvan de attribuutwaarde begint met de opgegeven tekenreeks.
- In dit voorbeeld worden alle links met een
href-attribuut dat begint met"https://"vetgedrukt.
- Eindigt met (
$=)
1img[src$=".jpg"] {
2 border-radius: 10px;
3}- Selecteert elementen waarvan de attribuutwaarde eindigt op de gespecificeerde string.
- In dit voorbeeld worden stijlen die de hoeken afronden toegepast op alle afbeeldingen met een
src-attribuut dat eindigt op.jpg.
- Bevat (
*=)
1p[class*="highlight"] {
2 background-color: yellow;
3}- Selecteert elementen waarvan de attribuutwaarde de gespecificeerde string bevat.
- In dit voorbeeld wordt een gele achtergrondkleur toegepast op alle
<p>-elementen waarvan hetclass-attribuut"highlight"bevat.
Elementen selecteren waarvan de attribuutwaarde een spatiegescheiden woord bevat (~=)
1div[class~="featured"] {
2 border: 1px solid red;
3}~=selecteert elementen als de attribuutwaarde een specifiek woord bevat binnen spatie-gescheiden woorden.- In dit voorbeeld wordt een rode rand toegepast op alle
<div>-elementen waarvan hetclass-attribuut het woord"featured"bevat.
Elementen selecteren waarvan de attribuutwaarde begint met een door een streepje gescheiden waarde (|=)
1p[lang|="en"] {
2 font-style: italic;
3}|=selecteert elementen als de attribuutwaarde overeenkomt met de opgegeven string of ermee begint, gevolgd door een streepje. Het wordt voornamelijk gebruikt met het taalattribuut (lang).- In dit voorbeeld wordt cursief toegepast op alle
<p>-elementen waarvan hetlang-attribuut begint met"en", zoals"en"of"en-US".
Praktische voorbeelden en toepassingen
Laten we vervolgens enkele praktische scenario's bekijken.
Stijlen van formulierinvoervelden
1input[required] {
2 background-color: #ffcccc;
3}
4
5input[placeholder] {
6 font-style: italic;
7 color: #999;
8}- In dit voorbeeld wordt een roodachtige achtergrondkleur toegepast op alle invoervelden met het
required-attribuut, en de placeholdertekst van invoervelden met hetplaceholder-attribuut wordt in cursief en een bleke kleur gestileerd.
Stylen op basis van linkprotocollen
1a[href^="http://"] {
2 color: orange;
3}
4
5a[href^="https://"] {
6 color: green;
7}- Hier worden links die beginnen met
http://oranje gemaakt, en links die beginnen methttps://groen. Dit maakt een visueel onderscheid tussen veilige en niet-veilige links mogelijk.
Stylen op basis van afbeeldingsformaten
1img[src$=".png"] {
2 border: 2px solid blue;
3}
4
5img[src$=".jpg"] {
6 opacity: 0.5;
7}- In dit voorbeeld wordt een blauwe rand toegevoegd aan afbeeldingen in
.png-formaat, en de transparantie van afbeeldingen in.jpg-formaat wordt ingesteld op 50%.
Samenvatting
CSS-attribuutselectoren zijn een flexibele en krachtige manier om elementen te selecteren op basis van HTML-attributen. Het gebruik van deze selectoren maakt meer specifieke styling mogelijk.
Gebruik de basis syntaxis en toegepaste voorbeelden die in dit artikel worden uitgelegd om eenvoudig meer geavanceerde styling te bereiken.
Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.