Detaljer om attributselektorer i CSS
Den här artikeln förklarar detaljerna om attributselektorer i CSS.
Du kan lära dig att skriva framåtmatchning, bakåtmatchning och delvis matchning för attributselektorer.
YouTube Video
HTML för förhandsgranskning
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 attributselektorer i CSS
CSS-attributselektorer används för att välja HTML-element som har specifika attribut. Detta gör att du kan styla element baserat på deras attributvärden. Vi kommer nu att förklara steg för steg från grunderna till avancerad användning av attributselektorer.
Typer och syntax för attributselektorer
Det finns olika typer av attributselektorer. Här kommer vi att ta en detaljerad titt på varje typ av selektor.
Välja element med ett attribut
1a[target] {
2 font-weight: bold;
3}- Genom att ange attributnamnet kan du välja alla element som har det angivna attributet.
- I det här exemplet har alla
<a>-element med attributettargetsin text fetstilad.
Välja element med ett specifikt attributvärde
1input[type="text"] {
2 border: 2px solid green;
3}- Genom att använda
=kan du välja element vars attributvärde exakt matchar ett specifikt värde. - I det här exemplet kommer alla
<input>-element medtype-attribut inställt på"text"att få en grön kantlinje.
Välja element med delvis matchning av attributvärden
Du kan specificera delvisa matchningar av attributvärden med hjälp av följande tre selektorer.
- Börjar med (
^=)
1a[href^="https://"] {
2 font-weight: bold;
3}- Väljer element där attributvärdet börjar med den specificerade strängen.
- I det här exemplet kommer alla länkar med ett
href-attribut som börjar med"https://"att bli fetstilta.
- Slutar med (
$=)
1img[src$=".jpg"] {
2 border-radius: 10px;
3}- Väljer element vars attributvärde slutar med den angivna strängen.
- I detta exempel tillämpas stilar som rundar hörnen på alla bilder med ett
src-attribut som slutar med.jpg.
- Innehåller (
*=)
1p[class*="highlight"] {
2 background-color: yellow;
3}- Väljer element vars attributvärde innehåller den angivna strängen.
- I detta exempel tillämpas en gul bakgrundsfärg på alla
<p>-element varsclass-attribut innehåller"highlight".
Välja element där attributvärdet innehåller ett mellanslagsseparerat ord (~=)
1div[class~="featured"] {
2 border: 1px solid red;
3}~=väljer element om attributvärdet innehåller ett specifikt ord bland mellanslagsseparerade ord.- I detta exempel tillämpas en röd kantlinje på alla
<div>-element varsclass-attribut innehåller ordet"featured".
Välja element där attributvärdet börjar med ett bindestrecksseparerat värde (|=)
1p[lang|="en"] {
2 font-style: italic;
3}|=väljer element om attributvärdet matchar den angivna strängen eller börjar med den följt av ett bindestreck. Det används främst med språkattributet (lang).- I detta exempel tillämpas kursiv stil på alla
<p>-element varslang-attribut börjar med"en", såsom"en"eller"en-US".
Praktiska exempel och tillämpningar
Låt oss därefter titta på några praktiska scenarion.
Styla formulärinmatningsfält
1input[required] {
2 background-color: #ffcccc;
3}
4
5input[placeholder] {
6 font-style: italic;
7 color: #999;
8}- I detta exempel tillämpas en rödaktig bakgrundsfärg på alla inmatningsfält med attributet
required, och platshållartexten i inmatningsfält med attributetplaceholderstylas med kursiv stil och en blek färg.
Styla baserat på länkprotokoll
1a[href^="http://"] {
2 color: orange;
3}
4
5a[href^="https://"] {
6 color: green;
7}- Här sätts länkar som börjar med
http://till orange, och länkar som börjar medhttps://till gröna. Detta möjliggör en visuell skillnad mellan säkra och osäkra länkar.
Styla baserat på bildformat
1img[src$=".png"] {
2 border: 2px solid blue;
3}
4
5img[src$=".jpg"] {
6 opacity: 0.5;
7}- I detta exempel läggs en blå kantlinje till på bilder i
.png-format, och opaciteten på bilder i.jpg-format sätts till 50%.
Sammanfattning
CSS-attributväljare är ett flexibelt och kraftfullt sätt att välja element baserat på HTML-attribut. Att använda dessa väljare gör det möjligt med mer specifik styling.
Använd den grundläggande syntaxen och de tillämpade exemplen som förklaras i denna artikel för att enkelt uppnå mer avancerad styling.
Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.