Cara Menggunakan Attribute Pada CSS3

Halo teman – teman, selamat datang kembali di website tips dan trik Dumet School. Pada kesempatan kali ini kita akan belajar tentang Cara Menggunakan Attribute Pada CSS3, fungsi attribute pada css ini dapat kita gunakan untuk menyeleksi semua attribute pada tag html. Seperti contoh attribute pada html seperti class, id, href, data, dll.

Dengan adanya fungsi ini dapat memudahkan teman – teman untuk mengatur berbagai attribute, seperti attribute pada javascript dan juga jQuery. Tentu perlu lebih tahu terlebih dahulu tentang attribute pada html dan css sebelum lanjut mempelajari javascript.

Baik langsung saja kita implementasikan

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="https://www.dumetschool.com">Attribute dengan href</a>
<a href="http://www.dumetschool.com" target="_blank">Attribute dengan target</a>
</body>
</html>

Kita memiliki script html tag a yang di dalam nya memiliki attribute href dan target, dapat kita seleksi dengan menggunakan tanda kurung kotak “[]”

a[href] {
  background-color: red;
}

Maka hasilnya seperti gambar di bawah ini

Kemudian bisa kita seleksi attribute target nya

a[href] {
  background-color: red;
}
a[target] {
  background-color: yellow;
}

Maka hasilnya seperti gambar di bawah ini

Kemudian kita bisa juga seleksi attribut class, misalnya kita punya 3 paragraf

<p class="p_1">Paragraf 1</p>
<p class="p_2">Paragraf 2</p>
<p class="p_3">Paragraf 3</p>

Maka cara seleksi nya seperti script di bawah ini

p[class]{
  background-color: orange;
}

Maka hasilnya seperti gambar di bawah ini

Selain itu juga kita bisa seleksi yang mengandung kata tertentu, kita akan seleksi angka 1,2 dan 3 yang terdapat pada class p_1,p_2,p_3 karena kita akan seleksi text yang belakang maka kita akan gunakan simbol $

p[class$="1"]{
  background-color: orange;
}
p[class$="2"]{
  background-color: blue;
}
p[class$="3"]{
  background-color: gray;
}

Maka dengan begitu hasilnya akan seperti gambar di bawah ini

Bagaimana,mudah sekali bukan..??

Nah itulah beberapa cara untuk seleksi attribute di dalam css, khusus untuk teman – teman yang baru belajar html dan css. Artikel tentang Cara Menggunakan Attribute Pada CSS3 bisa menambah pengetahuan untuk teman – teman. Baik, sekian pada artikel kali ini dan tentu kita akan jumpa kembali pada artikel yang akan datang. Terimakasih dan sampai jumpa.