Articles
Pengenalan kepada CSS
Butiran Pemilih Atribut dalam CSS

Butiran Pemilih Atribut dalam CSS

Artikel ini menerangkan butiran tentang pemilih atribut dalam CSS.

Anda boleh belajar cara untuk menulis padanan hadapan, padanan belakang, dan padanan separa untuk pemilih atribut.

YouTube Video

HTML untuk Pratonton

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&lt;a href="https://example.com" target="_blank"&gt;Example Link (target="_blank")&lt;/a&gt;
 31&lt;a href="https://example.com"&gt;Example Link (no target)&lt;/a&gt;
 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&lt;input type="text" placeholder="Enter text here"&gt;
 52&lt;input type="password" placeholder="Password (no border)"&gt;
 53&lt;input type="text" placeholder="Another text input"&gt;
 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&lt;a href="https://example.com"&gt;Secure Link (https)&lt;/a&gt;
 75&lt;a href="http://example.com"&gt;Non-Secure Link (http)&lt;/a&gt;
 76&lt;a href="https://another-example.com"&gt;Another Secure Link (https)&lt;/a&gt;
 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&lt;img src="image.jpg" alt="JPG Image" width="100"&gt;
 98&lt;img src="pattern.png" alt="PNG Image (no border radius)" width="100"&gt;
 99&lt;img src="example.jpg" alt="Another JPG Image" width="100"&gt;
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&lt;p class="highlight-text"&gt;This paragraph is highlighted.&lt;/p&gt;
121&lt;p class="normal-text"&gt;This paragraph is not highlighted.&lt;/p&gt;
122&lt;p class="text-highlight-important"&gt;This is another highlighted paragraph.&lt;/p&gt;
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&lt;div class="featured"&gt;This div is featured.&lt;/div&gt;
144&lt;div class="content featured"&gt;This div is also featured.&lt;/div&gt;
145&lt;div class="content"&gt;This div is not featured.&lt;/div&gt;
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&lt;p lang="en"&gt;This paragraph is in English.&lt;/p&gt;
167&lt;p lang="en-US"&gt;This paragraph is in American English.&lt;/p&gt;
168&lt;p lang="fr"&gt;Ce paragraphe est en français.&lt;/p&gt;
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] &amp; 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&lt;input type="text" required placeholder="Enter your name"&gt;
196&lt;input type="email" required placeholder="Enter your email"&gt;
197&lt;input type="text" placeholder="Optional field"&gt;
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&lt;a href="http://example.com"&gt;HTTP Link&lt;/a&gt;
223&lt;a href="https://secure.example.com"&gt;HTTPS Link&lt;/a&gt;
224&lt;a href="/relative/path"&gt;Relative Link&lt;/a&gt;
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&lt;img src="pattern.png" alt="PNG Image" width="100"&gt;
250&lt;img src="document.jpg" alt="JPEG Image" width="100"&gt;
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>

Butiran Pemilih Atribut dalam CSS

Pemilih atribut CSS digunakan untuk memilih elemen HTML yang mempunyai atribut tertentu. Ini membolehkan anda menggayakan elemen berdasarkan nilai atribut mereka. Kami akan kini menerangkan langkah demi langkah dari asas kepada penggunaan pemilih atribut yang lebih maju.

Jenis dan Sintaks Pemilih Atribut

Terdapat pelbagai jenis pemilih atribut. Di sini, kami akan melihat secara terperinci pada setiap jenis pemilih.

Memilih Elemen dengan Atribut 

1a[target] {
2    font-weight: bold;
3}
  • Dengan menetapkan nama atribut, anda boleh memilih semua elemen yang mempunyai atribut yang ditentukan.
  • Dalam contoh ini, semua elemen <a> dengan atribut target memiliki teks mereka ditebalkan.

Memilih Elemen dengan Nilai Atribut Khusus 

1input[type="text"] {
2  border: 2px solid green;
3}
  • Menggunakan = membolehkan anda memilih elemen yang nilai atributnya sepadan dengan nilai tertentu dengan tepat.
  • Dalam contoh ini, semua elemen <input> dengan atribut type ditetapkan kepada "text" akan mempunyai sempadan berwarna hijau.

Memilih Elemen dengan Padanan Nilai Atribut Sebahagian

Anda boleh menentukan padanan sebahagian daripada nilai atribut menggunakan tiga pemilih berikut.

  1. Bermula Dengan (^=)
1a[href^="https://"] {
2    font-weight: bold;
3}
  • Memilih elemen di mana nilai atribut bermula dengan rentetan tertentu.
  • Dalam contoh ini, semua pautan dengan atribut href yang bermula dengan "https://" akan ditebalkan.
  1. Berakhir Dengan ($=)
1img[src$=".jpg"] {
2    border-radius: 10px;
3}
  • Memilih elemen yang nilai atributnya berakhir dengan rentetan yang ditentukan.
  • Dalam contoh ini, gaya yang membulatkan sudut diterapkan pada semua imej dengan atribut src yang berakhir dengan .jpg.
  1. Mengandungi (*=)
1p[class*="highlight"] {
2    background-color: yellow;
3}
  • Memilih elemen yang nilai atributnya mengandungi string yang ditentukan.
  • Dalam contoh ini, warna latar belakang kuning diterapkan pada semua elemen <p> yang atribut classnya mengandungi "highlight".

Memilih Elemen Di Mana Nilai Atribut Mengandungi Perkataan yang Dipisahkan dengan Ruang (~=) 

1div[class~="featured"] {
2  border: 1px solid red;
3}
  • ~= memilih elemen jika nilai atribut mengandungi perkataan tertentu dalam perkataan yang dipisahkan dengan ruang kosong.
  • Dalam contoh ini, sempadan merah diterapkan pada semua elemen <div> yang atribut classnya mengandungi perkataan "featured".

Memilih Elemen di Mana Nilai Atribut Bermula dengan Nilai yang Dipisahkan oleh Tanda Hubung (|=) 

1p[lang|="en"] {
2  font-style: italic;
3}
  • |= memilih elemen jika nilai atribut sesuai dengan string yang ditentukan atau bermula dengannya diikuti oleh tanda hubung. Ia digunakan terutamanya dengan atribut bahasa (lang).
  • Dalam contoh ini, huruf condong diterapkan pada semua elemen <p> yang atribut langnya bermula dengan "en", seperti "en" atau "en-US".

Contoh Praktikal dan Aplikasi

Seterusnya, mari kita lihat beberapa senario praktikal.

Menggayakan Medan Input Borang 
1input[required] {
2  background-color: #ffcccc;
3}
4
5input[placeholder] {
6  font-style: italic;
7  color: #999;
8}
  • Dalam contoh ini, warna latar belakang kemerahan diterapkan pada semua medan input dengan atribut required, dan teks pemegang tempat bagi medan input dengan atribut placeholder digayakan dengan huruf condong dan warna pucat.
Menggayakan Berdasarkan Protokol Pautan 
1a[href^="http://"] {
2  color: orange;
3}
4
5a[href^="https://"] {
6  color: green;
7}
  • Di sini, pautan yang bermula dengan http:// ditetapkan kepada oren, dan pautan yang bermula dengan https:// ditetapkan kepada hijau. Ini membolehkan perbezaan visual antara pautan yang selamat dan tidak selamat.
Menggayakan Berdasarkan Format Imej 
1img[src$=".png"] {
2  border: 2px solid blue;
3}
4
5img[src$=".jpg"] {
6  opacity: 0.5;
7}
  • Dalam contoh ini, sempadan biru ditambahkan pada imej dalam format .png, dan legap imej dalam format .jpg ditetapkan kepada 50%.

Ringkasan

Pemilih atribut CSS adalah cara yang fleksibel dan berkuasa untuk memilih elemen berdasarkan atribut HTML. Menggunakan pemilih ini membolehkan penggayaan yang lebih spesifik.

Gunakan sintaks asas dan contoh yang diterangkan dalam artikel ini untuk mencapai gaya lebih maju dengan mudah.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

Pewarisan dalam CSSKarakters Khas dan Fungsi dalam CSS