Sumber : https://www.w3.org/Style/CSS/
Seperti kutipan diatas, inti dari fungsi css yaitu untuk mempermak dokumen HTML agar jadi sedemikian rupa atau istilah sekarangnya supaya tidak kelihatan jadul :). Untuk memilah atau menyeleksi tag HTML disebut selector, terdapat beberapa pattern / teknik yang digunakan dalam selector css, nah disini saya lampirkan beberapa teknik yang ada untuk menyeleksi tag html. Oke langsung saja ke tkp..
1. UNIVERSAL SELECTOR
Yang pertama yaitu universal selector, yaitu cara menyeleksi document tag html secara menyeluruh dari parent induk yang ditentukan dengan tanda bintang *.
Contoh :
div *{
color : #555;
}
Cara membaca dari syntax css contoh diatas yaitu "mencari semua element atau tag div dalam document html dan mengisikan nya dengan property color dengan value #555". Universal selector juga sering digunakan untuk mereset style bawaan dari browser atau yang dikenal CSS Reset, yang dimana setiap masing-masing browser mempunyai style bawaan nya sendiri yang umumnya menambah margin dan padding sebesar beberapa pixel tertentu, dengan CSS Reset ini kita dapat merubah style default / bawaan dari tiap browser.
2. TYPE / ELEMENT SELECTOR
Type / element selector digunakan untuk memberi style pada dokumen html berdasarkan tag / element tertentu misalnya h1, p, em, strong.
Contoh :
h1{
color : #5f5f5f;
font-style: italic;
}
Tidak jauh berbeda dengan yang sebelumnya, cara yang kedua ini lebih sering digunakan dengan menunjuk langsung tag html nya.
3. CLASS SELECTOR
Menyeleksi element tag dalam html dengan menggunakan tanda titik.
Contoh :
CSS
.Menu ul li{
display : inline;
color : #1abc9c;
margin: 10px;
}
HTML
<div class="Menu">
<ul>
<li>Beranda</li>
<li>Profil</li>
<li>Kontak</li>
<li>Tentang</li>
</ul>
</div>
3. ID SELECTOR
Sama dengan sebelum nya hanya saja id selector mencari element tag html dalam sebuah grup yang ditandai dengan hastag # dalam css dan penamaan nya dengan id dalam html document.
Contoh :
CSS
#Menu ul li{
display : inline;
color : #1abc9c;
margin: 10px;
}
HTML
<div id="Menu">
<ul>
<li>Beranda</li>
<li>Profil</li>
<li>Kontak</li>
<li>Tentang</li>
</ul>
</div>
4. CHILD SELECTOR
Child selector yaitu menyeleksi tag html dari turunan langsung parent nya.
Contoh :
CSS
ul.anak > ul li{
color: red;
font-style: italic;
}
HTML
<ul class="anak">
<li>Kopi</li>
<ul>
<li>Dingin</li>
<li>Panas</li>
</ul>
<li>Teh</li>
<li>Susu</li>
</ul>
Pada Syntax CSS cara membacanya yaitu "menyeleksi seluruh tag ul li dari class anak pada tag ul". Contoh diatas akan menghasilkan warna merah dan cetak miring dari list item kopi langsung kepada anak nya yaitu list item panas dan dingin.
5. ATTRIBUTE SELECTOR
Selector yang berikut ini tingkatan nya cukup advance tapi bukan tidak sering dipakai. Selector ini sering digunakan menyeleksi button maupun input form .
Contoh :
CSS
input[type=text]{
background-color: #ccc;
}
HTML
<input type="text" name="name">
Pada Syntax CSS cara membacanya attribute selector diatas yaitu "menyeleksi type text pada inputan".
Demikian mengenai jenis-jenis selector dalam CSS, untuk jenis-jenis selector masih sangat banyak, dan beberapa contoh yang saya jelaskan diatas merupakan yang sering dipakai, untuk referensi lengkap bisa lihat di www.w3schools.com atau www.w3.org. Bila ada hal yang ingin ditanyakan silahkan tinggalkan pesan dikolom komentar dan apabila ada kesalahan dalam penulisan mohon perbaikannya. Sekian dan semoga bermanfaat.
0 komentar:
Post a Comment