Details zu Attributselektoren in CSS
Dieser Artikel erklärt die Details von Attributselektoren in CSS.
Sie können lernen, wie man Vorwärtsabgleich, Rückwärtsabgleich und Teilabgleich für Attributselektoren schreibt.
YouTube Video
HTML zur Vorschau
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 zu Attributselektoren in CSS
CSS-Attributselektoren werden verwendet, um HTML-Elemente auszuwählen, die bestimmte Attribute haben. Dies ermöglicht es Ihnen, Elemente basierend auf ihren Attributwerten zu stylen. Wir werden nun Schritt für Schritt von den Grundlagen bis zur fortgeschrittenen Nutzung von Attributselektoren erklären.
Typen und Syntax von Attributselektoren
Es gibt verschiedene Arten von Attributselektoren. Hier werfen wir einen detaillierten Blick auf jede Art von Selektor.
Auswahl von Elementen mit einem Attribut
1a[target] {
2 font-weight: bold;
3}- Durch die Angabe des Attributnamens können Sie alle Elemente auswählen, die das angegebene Attribut besitzen.
- In diesem Beispiel werden alle
<a>-Elemente mit demtarget-Attribut fett dargestellt.
Auswahl von Elementen mit einem spezifischen Attributwert
1input[type="text"] {
2 border: 2px solid green;
3}- Mit
=können Sie Elemente auswählen, deren Attributwert genau einem bestimmten Wert entspricht. - In diesem Beispiel erhalten alle
<input>-Elemente mit demtype-Attribut, das auf"text"gesetzt ist, einen grünen Rahmen.
Auswahl von Elementen mit partieller Übereinstimmung des Attributwerts
Sie können partielle Übereinstimmungen von Attributwerten mit den folgenden drei Selektoren angeben.
- Beginnt mit (
^=)
1a[href^="https://"] {
2 font-weight: bold;
3}- Wählt Elemente aus, bei denen der Attributwert mit der angegebenen Zeichenfolge beginnt.
- In diesem Beispiel werden alle Links mit einem
href-Attribut, das mit"https://"beginnt, fett formatiert.
- Endet mit (
$=)
1img[src$=".jpg"] {
2 border-radius: 10px;
3}- Wählt Elemente aus, deren Attributwert mit der angegebenen Zeichenfolge endet.
- In diesem Beispiel werden Stile, die die Ecken abrunden, auf alle Bilder mit einem
src-Attribut angewendet, das auf.jpgendet.
- Enthält (
*=)
1p[class*="highlight"] {
2 background-color: yellow;
3}- Wählt Elemente aus, deren Attributwert die angegebene Zeichenfolge enthält.
- In diesem Beispiel wird allen
<p>-Elementen, derenclass-Attribut"highlight"enthält, eine gelbe Hintergrundfarbe zugewiesen.
Auswahl von Elementen, bei denen der Attributwert ein durch Leerzeichen getrenntes Wort enthält (~=)
1div[class~="featured"] {
2 border: 1px solid red;
3}~=wählt Elemente aus, wenn der Attributwert ein bestimmtes Wort innerhalb von durch Leerzeichen getrennten Wörtern enthält.- In diesem Beispiel wird allen
<div>-Elementen, derenclass-Attribut das Wort"featured"enthält, ein roter Rand zugewiesen.
Auswahl von Elementen, bei denen der Attributwert mit einem durch Bindestrich getrennten Wert beginnt (|=)
1p[lang|="en"] {
2 font-style: italic;
3}|=wählt Elemente aus, wenn der Attributwert mit der angegebenen Zeichenfolge übereinstimmt oder mit ihr beginnt, gefolgt von einem Bindestrich. Es wird hauptsächlich mit dem Sprachattribut (lang) verwendet.- In diesem Beispiel wird allen
<p>-Elementen, derenlang-Attribut mit"en"beginnt, wie"en"oder"en-US", eine kursive Schriftart zugewiesen.
Praktische Beispiele und Anwendungen
Schauen wir uns als Nächstes einige praktische Szenarien an.
Gestaltung von Formulareingabefeldern
1input[required] {
2 background-color: #ffcccc;
3}
4
5input[placeholder] {
6 font-style: italic;
7 color: #999;
8}- In diesem Beispiel wird allen Eingabefeldern mit dem
required-Attribut eine rötliche Hintergrundfarbe zugewiesen, und der Platzhaltertext der Eingabefelder mit demplaceholder-Attribut wird kursiv und in blasser Farbe gestaltet.
Gestaltung basierend auf Linkprotokollen
1a[href^="http://"] {
2 color: orange;
3}
4
5a[href^="https://"] {
6 color: green;
7}- Hier werden Links, die mit
http://beginnen, auf orange gesetzt, und Links, die mithttps://beginnen, werden auf grün gesetzt. Dies ermöglicht eine visuelle Unterscheidung zwischen sicheren und unsicheren Links.
Gestaltung basierend auf Bildformaten
1img[src$=".png"] {
2 border: 2px solid blue;
3}
4
5img[src$=".jpg"] {
6 opacity: 0.5;
7}- In diesem Beispiel wird Bildern im
.png-Format ein blauer Rand hinzugefügt, und die Deckkraft von Bildern im.jpg-Format wird auf 50% gesetzt.
Zusammenfassung
CSS-Attributselektoren sind eine flexible und leistungsstarke Möglichkeit, Elemente basierend auf HTML-Attributen auszuwählen. Die Verwendung dieser Selektoren ermöglicht eine spezifischere Gestaltung.
Nutzen Sie die grundlegende Syntax und die angewandten Beispiele, die in diesem Artikel erläutert werden, um problemlos fortgeschrittene Stile zu erreichen.
Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.