Detaljer om attributtvelgere i CSS
Denne artikkelen forklarer detaljene om attributtvelgere i CSS.
Du kan lære hvordan du skriver fremovermatching, bakovermatching og delvis matching for attributtvelgere.
YouTube Video
HTML for Forhåndsvisning
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>Detaljer om attributtvelgere i CSS
CSS-attributtvelgere brukes til å velge HTML-elementer som har spesifikke attributter. Dette gjør det mulig å style elementer basert på deres attributtverdier. Vi vil nå forklare trinn for trinn fra det grunnleggende til avansert bruk av attributtvelgere.
Typer og syntaks for attributtvelgere
Det finnes ulike typer attributtvelgere. Her vil vi se nærmere på hver type velger.
Velge elementer med et attributt
1a[target] {
2 font-weight: bold;
3}- Ved å spesifisere attributtnavnet, kan du velge alle elementer som har det angitte attributtet.
- I dette eksemplet blir all tekst i
<a>-elementer medtarget-attributtet gjort fet.
Velge elementer med en spesifikk attributtverdi
1input[type="text"] {
2 border: 2px solid green;
3}- Ved å bruke
=kan du velge elementer der attributtverdien nøyaktig samsvarer med en spesifikk verdi. - I dette eksemplet vil alle
<input>-elementer medtype-attributtet satt til"text"få en grønn kantlinje.
Velge elementer med delvis matching av attributtverdi
Du kan spesifisere delvise matchinger av attributtverdier ved å bruke følgende tre velgere.
- Starter med (
^=)
1a[href^="https://"] {
2 font-weight: bold;
3}- Velger elementer der attributtverdien starter med den spesifiserte streng.
- I dette eksemplet vil alle lenker med et
href-attributt som starter med"https://"bli uthevet.
- Slutter med (
$=)
1img[src$=".jpg"] {
2 border-radius: 10px;
3}- Velger elementer der attributtverdien slutter med den angitte strengen.
- I dette eksemplet brukes stiler som avrunder hjørnene på alle bilder med et
src-attributt som slutter på.jpg.
- Inneholder (
*=)
1p[class*="highlight"] {
2 background-color: yellow;
3}- Velger elementer der attributtverdien inneholder den angitte strengen.
- I dette eksemplet brukes en gul bakgrunnsfarge på alle
<p>-elementer derclass-attributtet inneholder"highlight".
Velge elementer der attributtverdien inneholder et mellomrom-separert ord (~=)
1div[class~="featured"] {
2 border: 1px solid red;
3}~=velger elementer hvis attributtverdien inneholder et spesifikt ord innenfor mellomromsseparerte ord.- I dette eksemplet brukes en rød kantlinje på alle
<div>-elementer derclass-attributtet inneholder ordet"featured".
Velge elementer der attributtverdien begynner med en bindestrek-separert verdi (|=)
1p[lang|="en"] {
2 font-style: italic;
3}|=velger elementer hvis attributtverdien samsvarer med den angitte strengen eller begynner med den etterfulgt av en bindestrek. Det brukes hovedsakelig med språk-attributtet (lang).- I dette eksemplet brukes kursiv på alle
<p>-elementer derlang-attributtet begynner med"en", som for eksempel"en"eller"en-US".
Praktiske eksempler og anvendelser
La oss deretter se på noen praktiske scenarier.
Stilsetting av skjemainndatafelt
1input[required] {
2 background-color: #ffcccc;
3}
4
5input[placeholder] {
6 font-style: italic;
7 color: #999;
8}- I dette eksemplet brukes en rødlig bakgrunnsfarge på alle inndatafelt med
required-attributtet, og plassholderteksten til inndatafelt medplaceholder-attributtet er stilisert med kursiv og en blek farge.
Stilsetting basert på lenkeprotokoller
1a[href^="http://"] {
2 color: orange;
3}
4
5a[href^="https://"] {
6 color: green;
7}- Her er lenker som begynner med
http://satt til oransje, og lenker som begynner medhttps://satt til grønn. Dette gjør det mulig å skille visuelt mellom sikre og usikre lenker.
Stilsetting basert på bildeformater
1img[src$=".png"] {
2 border: 2px solid blue;
3}
4
5img[src$=".jpg"] {
6 opacity: 0.5;
7}- I dette eksemplet er en blå kantlinje lagt til bilder i
.png-format, og opasiteten til bilder i.jpg-format er satt til 50%.
Sammendrag
CSS-attributtvelgere er en fleksibel og kraftig måte å velge elementer basert på HTML-attributter. Bruken av disse velgerne muliggjør mer spesifikk stilsetting.
Bruk den grunnleggende syntaksen og anvendte eksempler forklart i denne artikkelen for enkelt å oppnå mer avansert stilsetting.
Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.