Dettagli dei selettori di attributi in CSS
Questo articolo spiega i dettagli dei selettori di attributi in CSS.
Puoi imparare come scrivere il matching in avanti, il matching all'indietro e il matching parziale per i selettori di attributi.
YouTube Video
HTML per Anteprima
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>Dettagli dei selettori di attributi in CSS
I selettori di attributi CSS vengono utilizzati per selezionare elementi HTML che hanno attributi specifici. Questo ti permette di stilizzare gli elementi in base ai valori dei loro attributi. Ora spiegheremo passo dopo passo dall'uso base all'uso avanzato dei selettori di attributi.
Tipi e sintassi dei selettori di attributi
Esistono vari tipi di selettori di attributi. Qui esamineremo in dettaglio ciascun tipo di selettore.
Selezionare elementi con un attributo
1a[target] {
2 font-weight: bold;
3}- Specificando il nome dell'attributo, puoi selezionare tutti gli elementi che hanno l'attributo specificato.
- In questo esempio, tutti gli elementi
<a>con l'attributotargethanno il loro testo in grassetto.
Selezionare elementi con un valore specifico di attributo
1input[type="text"] {
2 border: 2px solid green;
3}- Utilizzando
=puoi selezionare gli elementi il cui valore dell'attributo corrisponde esattamente a un valore specifico. - In questo esempio, a tutti gli elementi
<input>con l'attributotypeimpostato su"text"verrà applicato un bordo verde.
Selezionare elementi con una corrispondenza parziale del valore dell'attributo
Puoi specificare corrispondenze parziali dei valori degli attributi utilizzando i seguenti tre selettori.
- Inizia con (
^=)
1a[href^="https://"] {
2 font-weight: bold;
3}- Seleziona gli elementi in cui il valore dell'attributo inizia con la stringa specificata.
- In questo esempio, tutti i collegamenti con un attributo
hrefche inizia con"https://"saranno in grassetto.
- Finisce con (
$=)
1img[src$=".jpg"] {
2 border-radius: 10px;
3}- Seleziona elementi il cui valore dell'attributo termina con la stringa specificata.
- In questo esempio, gli stili che arrotondano gli angoli sono applicati a tutte le immagini con un attributo
srcche termina con.jpg.
- Contiene (
*=)
1p[class*="highlight"] {
2 background-color: yellow;
3}- Seleziona elementi il cui valore dell'attributo contiene la stringa specificata.
- In questo esempio, un colore di sfondo giallo è applicato a tutti gli elementi
<p>il cui attributoclasscontiene"highlight".
Selezionare Elementi Dove Il Valore dell'Attributo Contiene una Parola Separata da Spazi (~=)
1div[class~="featured"] {
2 border: 1px solid red;
3}~=seleziona elementi se il valore dell'attributo contiene una parola specifica all'interno di parole separate da spazi.- In questo esempio, un bordo rosso è applicato a tutti gli elementi
<div>il cui attributoclasscontiene la parola"featured".
Selezionare Elementi Dove Il Valore dell'Attributo Inizia con un Valore Separato da Trattino (|=)
1p[lang|="en"] {
2 font-style: italic;
3}|=seleziona elementi se il valore dell'attributo corrisponde alla stringa specificata o inizia con essa seguita da un trattino. È utilizzato principalmente con l'attributo di lingua (lang).- In questo esempio, è applicato il corsivo a tutti gli elementi
<p>il cui attributolanginizia con"en", come"en"o"en-US".
Esempi Pratici e Applicazioni
Ora guardiamo alcuni scenari pratici.
Stilizzare i Campi di Input dei Moduli
1input[required] {
2 background-color: #ffcccc;
3}
4
5input[placeholder] {
6 font-style: italic;
7 color: #999;
8}- In questo esempio, è applicato un colore di sfondo rossastro a tutti i campi di input con l'attributo
required, e il testo di placeholder dei campi di input con l'attributoplaceholderè stilettato in corsivo e con un colore pallido.
Stilizzazione Basata sui Protocolli dei Link
1a[href^="http://"] {
2 color: orange;
3}
4
5a[href^="https://"] {
6 color: green;
7}- Qui, i link che iniziano con
http://sono impostati in arancione e i link che iniziano conhttps://sono impostati in verde. Questo consente una differenziazione visiva tra link sicuri e non sicuri.
Stilizzazione Basata sui Formati delle Immagini
1img[src$=".png"] {
2 border: 2px solid blue;
3}
4
5img[src$=".jpg"] {
6 opacity: 0.5;
7}- In questo esempio, un bordo blu è aggiunto alle immagini in formato
.png, e l'opacità delle immagini in formato.jpgè impostata al 50%.
Riepilogo
I selettori di attributi CSS sono un modo flessibile e potente per selezionare elementi basati sugli attributi HTML. Usare questi selettori permette uno stile più specifico.
Utilizza la sintassi di base e gli esempi applicati spiegati in questo articolo per ottenere facilmente uno stile più avanzato.
Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.