Mempelajari Selector Pada Pemrograman CSS - Part 4


Halo Sobat Lautan, semoga sehat selalu ya. 
Kali ini, kembali membahas tentang koding. 
Bahasa pemrograman yang kita pilih kali ini, adalah CSS. Sebelumnya, pada kategori yang sama, kita telah membahas sekitar, 5 selektor didalam CSS. Nah, saatnya kita untuk lanjut mengetahui jenis-jenis selektor yang lain.

1. Adjacent Selector

Masih berhubungan erat dengan struktur DOM. Bila pada Child Selector, yang dipilih adalah anak pertama, maka yang disinggung dalam Adjancet Selctor adalah hubungan saudara

Contoh Skrip

<style>
h1 + p {
       color : red;
</style>
</head>
<body>
<div>
<h1> Lautan -IT </h1>
<p> Info </p><br>
<p> Tutorial </p><br>
<p> Materi </p><br>
<p> Download </p></br>
<div>
</body>

Perhatikan baik-baik hasilnya

2. General Sibling Selector

Mirip dengan Adjacent Selector. Perbedaan yang paling mencolok, adalah General Sibling akan mengambil seluruh tag yang menjadi sibling-nya.

Contoh Skrip

<style>
h1 ~ p {
       color : red;
</style>
</head>
<body>
<div>
<h1> Lautan -IT </h1>
<p> Info </p><br>
<p> Tutorial </p><br>
<p> Materi </p><br>
<p> Download </p></br>
<div>


</body>

3. Pseudo Class Selector

Pseudo Class Selector, adalah selektor yang digunakan didalam CSS, untuk mencari element HTML yang tidak kelihatan atau tidak ada dalam struktur DOM. 
Selektor yang termasuk didalam jenis kelas ini adalah, Dynamic pseudo class selector, UI element state selector, dan juga Structural pseudo class selector. Pseudo Class sendiri ditandai dengan tanda titik dua.

Dynamic Pseudo Class Selector

Digunakan untuk membuat struktur HTML, berubah karena adanya interaksi dari User. Sering digunakan untuk tag link, ataupun pembuatan menu navigasi. 
Terdapat 4 jenis dalam pseudo class ini, yakni :
  • :link
  • :visited
  • :hover
  • :active
Contoh Skrip 

<style>
:link {
     color : red;
}
:visited {
      color : blue;
}
a:hover {
     color : green;
}
a:active {
     color : black;
}
</style>

</head>
<body>
<div>
<h1> Lautan -IT </h1>
<ul>
<li><a href="http://www.lautan-it.com">Info </a></li>
<li><a href="http://www.lautan-it.com">Tutorial</a></li>
<li><a href="http://www.lautan-it.com">Materi</a></li> 
<li><a href="http://www.lautan-it.com">Download</a></li> 
<div>


</body>

:Link, digunakan untuk memanipulasi tag yang didalamnya terdapat link. 

:visited, digunakan untuk memberikan tanda tersendiri pada struktur HTML yang telah mengalami interaksi (seperti di Klik), dan hanya bisa dilakukan sekali saja

:hover, digunakan untuk memberikan tanda tersendiri, saat kursor berada diatas strukur HTML yang telah di manipulasi

:active, sama halnya seperti hover, hanya saja, efek yang diberikan hanya sementara atau sebentar (sekejap malahan) saja.

Dalam penulisan, dynamic pseudo ini, web designer, sering menggunakan istillah Love Hate. Artinya penulisan tidak boleh menyalahi aturan yang ada, dan jika tidak dilakukan, maka efek yang diinginkan tidak akan muncul. 

Love Hate = L > Link, V > Visited, H > Hover, A > Active.

UI Element State Selector

Umumnya digunakan untuk objek Form HTML. 
Contoh selector dalam jenis adalah :disabled, :enabled, dan :checked. 
Contoh Skrip :

<style>
input:disabled {
    border : solid green 2px;
}
input:enabled {
    border : solid red 2px;
}
input:checked {
    margin-top : 15px;
}
</style>
<body>
<form action="percobaan.php" method="get">
<p> Nama : <input type="text" name="nama" disabled></p>
<p> Umur : <input type="text" name="umur" disabled></p>
<p> <input type="checkbox" name="prodi"> Program Studi</p>
</form>
</body>

Structural Pseudo Class Selectors

Berbeda jauh dari Dynamic Pseudo, Pseudo jenis ini, menggunakan struktural dari DOM. Contoh selektor jenis adalah :

  • :first-child
  • :last-child
  • :first-of-type
  • :nth-child()
  • :nth-last-child()
  • :nth-of-type()
  • :nth-last-of-type()
Untuk dapat memahami lebih lanjut mengenai selektor jenis ini, anda dapat membuka 
Link ini

Selamat Belajar ;D.

Post a Comment

0 Comments