Articles
Pengenalan ke CSS
Rincian Selektor Atribut dalam CSS

Rincian Selektor Atribut dalam CSS

Artikel ini menjelaskan detail tentang pemilih atribut dalam CSS.

Anda dapat belajar cara menulis pencocokan maju, pencocokan mundur, dan pencocokan parsial untuk selektor atribut.

YouTube Video

HTML untuk Pratinjau

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>

Rincian Selektor Atribut dalam CSS

Pemilih atribut CSS digunakan untuk memilih elemen HTML yang memiliki atribut tertentu. Ini memungkinkan Anda untuk menata elemen berdasarkan nilai atributnya. Kami sekarang akan menjelaskan langkah demi langkah dari dasar hingga penggunaan lanjutan pemilih atribut.

Tipe dan Sintaks Selektor Atribut

Ada berbagai jenis pemilih atribut. Di sini, kami akan melihat secara rinci setiap jenis pemilih.

Memilih Elemen dengan Atribut 

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

Memilih Elemen dengan Nilai Atribut Tertentu 

1input[type="text"] {
2  border: 2px solid green;
3}
  • Dengan menggunakan =, Anda dapat memilih elemen yang nilai atributnya cocok persis dengan nilai tertentu.
  • Dalam contoh ini, semua elemen <input> dengan atribut type yang diatur ke "text" akan memiliki border berwarna hijau.

Memilih Elemen dengan Kesesuaian Nilai Atribut Sebagian

Anda dapat menentukan kecocokan sebagian dari nilai atribut menggunakan tiga pemilih berikut.

  1. Dimulai Dengan (^=)
1a[href^="https://"] {
2    font-weight: bold;
3}
  • Memilih elemen di mana nilai atribut dimulai dengan string tertentu.
  • Dalam contoh ini, semua link dengan atribut href yang dimulai dengan "https://" akan dicetak tebal.
  1. Berakhir Dengan ($=)
1img[src$=".jpg"] {
2    border-radius: 10px;
3}
  • Memilih elemen yang nilai atributnya berakhir dengan string yang ditentukan.
  • Dalam contoh ini, gaya yang membuat sudut melingkar diterapkan ke semua gambar dengan atribut src yang berakhiran .jpg.
  1. Mengandung (*=)
1p[class*="highlight"] {
2    background-color: yellow;
3}
  • Memilih elemen yang nilai atributnya mengandung string yang ditentukan.
  • Dalam contoh ini, warna latar belakang kuning diterapkan ke semua elemen <p> yang atribut class-nya mengandung "highlight".

Memilih Elemen di Mana Nilai Atribut Mengandung Kata yang Dipisahkan Spasi (~=) 

1div[class~="featured"] {
2  border: 1px solid red;
3}
  • ~= memilih elemen jika nilai atributnya mengandung kata tertentu di antara kata-kata yang dipisahkan oleh spasi.
  • Dalam contoh ini, border merah diterapkan ke semua elemen <div> yang atribut class-nya mengandung kata "featured".

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

1p[lang|="en"] {
2  font-style: italic;
3}
  • |= memilih elemen jika nilai atributnya cocok dengan string yang ditentukan atau dimulai dengan string tersebut diikuti dengan tanda hubung. Ini terutama digunakan dengan atribut bahasa (lang).
  • Dalam contoh ini, huruf miring diterapkan ke semua elemen <p> yang atribut lang-nya dimulai dengan "en", seperti "en" atau "en-US".

Contoh dan Aplikasi Praktis

Berikutnya, mari kita lihat beberapa skenario praktis.

Menata Bidang Input Formulir 
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 field input dengan atribut required, dan teks placeholder dari field input dengan atribut placeholder diberikan gaya huruf miring dan warna pucat.
Menata Berdasarkan Protokol Tautan 
1a[href^="http://"] {
2  color: orange;
3}
4
5a[href^="https://"] {
6  color: green;
7}
  • Di sini, tautan yang dimulai dengan http:// diatur menjadi oranye, dan tautan yang dimulai dengan https:// diatur menjadi hijau. Ini memungkinkan perbedaan visual antara tautan yang aman dan tidak aman.
Menata Berdasarkan Format Gambar 
1img[src$=".png"] {
2  border: 2px solid blue;
3}
4
5img[src$=".jpg"] {
6  opacity: 0.5;
7}
  • Dalam contoh ini, border biru ditambahkan ke gambar dalam format .png, dan opasitas gambar dalam format .jpg diatur menjadi 50%.

Ringkasan

Selektor atribut CSS adalah cara yang fleksibel dan kuat untuk memilih elemen berdasarkan atribut HTML. Menggunakan selektor ini memungkinkan penataan yang lebih spesifik.

Gunakan sintaks dasar dan contoh yang diterapkan seperti yang dijelaskan dalam artikel ini untuk dengan mudah mencapai penataan yang lebih lanjut.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video

Pewarisan dalam CSSKarakter Khusus dan Fungsi dalam CSS