Cara Penggunaan Attribute Selector Pada CSS
Di kesempatan kali ini saya akan membahas mengenai Attribute Selector di CSS. Attribute Selector pada CSS digunakan bagi mencari element yang menggunakan nilai attribut dari tag HTML. Dan biasanya pada pemakaian Attirbute Selector dengan menuliskan tanda baca pada kurung siku [ ].
Baiklah dilanjutkan sobat mesti mengetahui terlebih dahulu bila Attribute Selector mempunyai beberapa manfaat 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 di penulisan ini kita akan membangun warna background text menjadi hijau di seluruh tag HTML <a> yang mempunyai 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 pada penulisan ini mengikut sertakan nilai atribut tersebut ke pada selector. contoh penulisan ialah 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 bila tag <a> yang mempunyai atribut target=_blank akan berubah backgroundnya menjadi hijau.
3. [attr^=value]
Jadi pada penulisan ini attribute yang mengandung nilai tertentu sesuai valuenya karenanya 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>
Di 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 di penulisan ini ialah kebalikan dari sebelumnya, yang bedakan ialah sekarang ini menggunakan $ bagi mencari seleruh tag HTML yang mengandung nilai ahir 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 di 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 di penulisan ini akan mencari seluruh tag HTML yang mengandung sesuai value, nilainya mesti 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 di penulisan ini akan mencari seluruh tag HTML yang mengandung sesuai value, nilainya mesti 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 lumayan pada pembahasan artikel ini mengenai Cara Pemakaian Attribute Selector Di CSS. Semoga bermanfaat serta dapat menambah referensi belajar sobat segala.
Terima kasih
Sumber https://kursuswebsite.org
