Belajar CSS: Mengenal Jenis Selector Pada CSS

Terdapat banyak tipe CSS selector yang memungkinkan anda untuk mengatur elemen tertentu dalam dokumen HTML. Pada contoh kode HTML berikut ini merupakan contoh selector yang sering dipakai pada CSS.

<!DOCTYPE html>
<html>
<head>
<title>CSS Selectors</title>
</head>
<body>
<h1 id="top">Beberapa Teknologi Web</h1>
<p id="introduction">Beberapa teknologi web yang berkembang.</p>
<h2>Web</h2>
<ul>
<li>
<a href="html5.html">Teknologi HTML5</a></li>
<li>
<a href="css3.html">Teknologi CSS3</a></li>
<li><a href="javascript.html">Teknologi Javascript</a></li>
</ul>
<p class="note">
halaman ini ditulis oleh
<a href="mailto:tanto@kangtanto.com">
tanto@kangtanto.com</a>untuk
<a href="http://www.example.org">kangtanto.com</a>.
</p>
<p>
<a href="#top">Halaman Awal</a>
</p>
</body>
</html>

Penulisan CSS selector perlu diperhatikan karena case sensitive yang berarti besar kecil huruf juga berpengaruh. Terdapat beberapa selector tingkat lanjut yang bisa anda gunakan untuk memilih elemen berdasarkan atribut dan value yang digunakan.

Pada informasi di bawah ini, anda akan melihat beberapa jenis selector yang bisa anda gunakan pada halaman website anda dan tentunya sesuai dengan kebutuhan web anda. Mulai dari selector yang universal, berdasarkan class, berdasarkan id, atau bahkan selector yang berada dalam elemen lain.

Jenis Selector Pada CSS

Selector Kegunaan Contoh
 Universal Selector  Diaplikasikan pada semua elemen dalam dokumen HTML  *{}
akan menarget semua elemen dalam halaman
Type Selector Sesuai dengan nama elemen h1, h2, h3 {}
Targetnya adalah elemen <h1>,<h2>,dan <h3>
Class Selector Sesuai dengan elemen yang memiliki atribut class dimana nama atributnya dituliskan setelah tanda . note{}
menarget semua elemen dengan atribut class yang value-nya berisi “note”
ID Selector Mengatur style pada elemen yang memiliki atribut id dimana value nya sesuai dengan yang dituliskan setelah tanda “#” #isi{}
menarget elemen yang memiliki atribut id yang valuenya berisi “isi”. Misal <div id=”isi”>
Child Selector Mengatur style elemen yang merupakan “anak” atau sub elemen yang lain li>a {}
menarget setiap elemen <a> yang merupakan anak dari element <li>. Akan tetapi tidak untuk semua elemen <a> yang berada dalam satu halaman
Descendant Selector Mengatur style pada sebuah elemen yang merupakan turunan dari elemen lain yang dispesifikasikan p a {}
menarget elemen <a> yang berada dalam elemen <p>, meskipun ada elemen lain yang berada didalamnya.
Adjacent Sibling Selector Mengatur elemen yang merupakan elemen yang muncul pertama kali setelah elemen yang ditentukan h1+p {}
menarget elemen <p> yang muncul pertama kali setelah elemen <h1> dan tidak berlaku bagi elemen <p> yang lain
General Sibling Selector Mengatur elemen yang merupakan “saudara kandung” atau muncul setelah elemen yang dimaksud h1~p {}
apabila ada dua elemen <p> yang muncul setelah elemen <h1>, maka keduanya akan terkena efek pengaturan style ini.

Incoming search terms:

Be Sociable, Share!

Related Posts:

Add a Comment

Your email address will not be published. Required fields are marked *