Pada kesempatan kali ini saya akan membahas tentang Attribute Selector pada CSS. Attribute Selector dalam CSS dipakai untuk mencari element yang menggunakan nilai attribut dari tag HTML. Dan biasanya dalam penggunaan Attirbute Selector dengan menuliskan tanda baca dalam kurung siku [ ].

Baiklah dilanjutkan sahabat harus mengetahui terlebih dahulu jika Attribute Selector memiliki beberapa fungsi atau fitur yang berbeda, seperti atribut berisi diawali nilai tertentu, diakhiri nilai tertentu atau berisi nilai tertentu lainnya, Bagaimana cara menggunakannya atau cara penulisan yuk simak contoh-contoh dibawah ini:

1. [attr] => a[target] {color: green}

Jadi pada penulisan ini kita akan membuat warna background text menjadi hijau pada seluruh tag HTML <a> yang memiliki atribute target.

<style>
a[target] {
  background-color: green;
}
</style>
</head>
<body>

<p>The links with a target attribute gets a yellow background:</p>

<a href="https://www.testimonial.com">testimonial.com</a>
<a href="http://www.mywebsite.com" target="_blank">mywebsite.com</a>

2. [attr=value]

Jadi dalam penulisan ini mengikut sertakan nilai atribut tersebut ke dalam selector. contoh penulisan adalah seperti berikut:

<style>
a[target=_blank] {
  background-color: green;
}
</style>
</head>
<body>

<p>The links with a target attribute gets a yellow background:</p>

<a href="https://www.testimonial.com">testimonial.com</a>
<a href="http://www.mywebsite.com" target="_blank">mywebsite.com</a>

yang artinya jika tag <a> yang memiliki atribut target=_blank akan berubah backgroundnya menjadi hijau.

3. [attr^=value]

Jadi dalam penulisan ini attribute yang mengandung nilai tertentu sesuai valuenya maka penulisan seperti:

<style>
[class^="box"] {
  background: red;
}
</style>
</head>
<body>

<h2 class="box-title">Welcome</h2>
<p class="boxcontent">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

Pada penulisan diatas berarti selector tersebut mencari nilai atribut yang diawali nilai dari value=box seperti tanda lancip arah keatas setelah karakter attr(class).

4. [attr$=value]

Jadi pada penulisan ini adalah kebalikan dari sebelumnya, yang bedakan adalah sekarang menggunakan untuk mencari seleruh tag HTML yang mengandung nilai akhir sesuai value.

<style> 
[class$="text"] {
  background: red;
}
</style>
</head>
<body>

<div class="first_text">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-text">The third div element.</div>
<p class="mytext">This is some text in a paragraph.</p>

5. [attr*=value]

Jadi pada penulisan ini akan mencari seluruh tag HTML yang mengandung sesuai value ,walaupun nilainya terpisah dengan tanda spasi maupun tanda penghubung:

<style1> 
[class*="test"] {
  background: yellow;
}
</style1>
</head>
<body>

<div class="first_test">The first div element.</div>
<div class="test second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>

6. [attr~=value]

Jadi pada penulisan ini akan mencari seluruh tag HTML yang mengandung sesuai value, nilainya harus terpisah dengan tanda spasi.

<style> 
[class*="clone"] {
  background: red;
}
</style>
</head>
<body>

<div class="first clone">The first div element.</div>
<div class="second-clone">The second div element.</div>
<p class="myclone">This is some text in a paragraph.</p>

7. [attr|=value]

Jadi pada penulisan ini akan mencari seluruh tag HTML yang mengandung sesuai value, nilainya harus terpisah dengan tanda penghubung (-).

<style>
[class|=letter] {
  background: yellow;
}
</style>
</head>
<body>

<h1 class="letter-header">Welcome</h1>
<p class="letter_text">Hello world!</p>
<p class="lettercontent">Are you learning CSS?</p>

Saya kira cukup dalam pembahasan artikel ini tentang Cara Penggunaan Attribute Selector Pada CSS. Semoga bermanfaat serta dapat menambah referensi belajar sahabat semua.

Terima kasih