Mempelajari Selector Pada Pemrograman CSS - Part 2


Halo Sobat Lautan, semoga sehat selalu ya. 
Kali ini, kita akan membahas tentang CSS. Pada artikel yang pertama, kita telah belajar tentang 4 selector, yakni Universal Selector, Tag Selector, Class dan ID Selector. 
Artikel kali ini, kita akan membahas 1 selector saja, yakni Atribut Selector. 

Atribut Selector

Selector CSS yang digunakan untuk mencari tag HTML berdasarkan ada atau tidaknya sebuah atribut didalam tag. Atribut ini bersifat global. 
Jadi, apabila atribut yang telah dipasang sebagai selector dalam CSS terdapat pada suatu tag, maka tag tersebut akan mengikuti deskripsi pengaturan yang ada pada bagian atribut yang dipilih tersebut.

Bingung ?

Mari, lakukan percobaan...Tuliskan Script dibawah ini ;

<style>
[href] {
     color : brown;
}
<body>
<a href="https://www.lautan-it.com">Lautan-IT</a>
<a href="https://www.lautan-it.com">Lautan-IT</a>
<a href="https://www.lautan-it.com">Lautan-IT</a>
</body>
</html>

Warna, daripada link Lautan IT, akan berganti dari yang default biru, menjadi warna coklat.

Penulisan, daripada Atribut Tag, sendiri harus menyerupai penulisan yang ada pada script diatas. Jadi atribut ditulisakan didalam tanda [...]

Mari coba studi kasus yang lainnya..


<html>
<title>Belajar CSS</title>
<style>
.......
</style>
</html></div>
</div>
</div>
<body>
<ul>
<li>Kota Pekanbaru</li>
<li title="Kota Bandung"> Kota Bandung </li>
<li title="Surabaya"> Kota Surabaya </li>
<li title="Kota Medan"> Kota Medan </a></li>
<li title="http://en.wikipedia.org/wiki/Jakarta"> Kota Jakarta </a> </li>
<li><a title="Kota Makassar"> Kota Makassar </a></li>
</ul>
</body>
</html>

Perhatikan dengan baik Script yang ada diatas. Apabila anda menginginkan semua kota yang bertandakan dalam tag List yang memilliki atribut title berwarna hijau, maka script didalam tag Style yang digunakan adalah

<style>
LI[title] {
     color : green;
}
</style>

Apabila anda hanya menginginkan tag dengan nilai kota bandung menjadi coklat, maka script yang digunakan adalah 

<style>
[title="kota bandung"] {
    color : brown;
}

Apabila anda hanya menginginkan tag dengan nilai atribut yang mengandung kata kota, untuk berubah warna menjadi  maka script yang digunakan 

<style>
[title ~="kota"] {
     color : green;
}
</style>

Apabila anda menginginkan semua tag dengan nilai atribut mengandung kata ba dipisah dengan spasi, menjadi warna hijau, maka script yang digunakan adalah 

<style>
[ title* = "ba"] {
      color : green;
}
</style>

Mencari nilai atribut Berdasarkan Posisi

Mencari nilai atribut berdasarkan posisinya, dapat dimenggunakan karakter pangkat = " ^ " dan karakter dollar = "$". Berikut adalah perbedaan diantara keduanya

<style>
[href ^ = "http"] {
      color : green;
}
</style>

Script diatas, digunakan untuk kata dengan awalan http.

<style>
[href $ = ".pdf"] {
        color : green;
}
</style>

Script diatas, digunakan untuk kata akhiran pdf.

Selamat Mencoba :D

Post a Comment

0 Comments