CSS Dasar Part 7 - Penggunaan Dan Pemilihan Selector Pada CSS
CSS Dasar Part 7 - Penggunaan Dan Pemilihan Selector Pada CSS - Pembahasan mengenai selector pernah saya singgung di artikel saya yang berjudul Anatomi CSS. Melanjutkan pembahasan tersebut, dalam artikel ini, saya masih akan membahas cara penggunanan dan pemilihan selector dasar secara lebih detil dan dalam. Karena artikel saya yang berjudul Anatomi CSS, lebih menekankan pada Struktur CSS-nya bukan Selectornya.Untuk pengertian selector sendiri, berdasarkan link http://www.w3schools.com/cssref/css_selectors.asp adalah sebagai berikut :
Selector adalah sesuatu yang digunakan pada css untuk mengenali sebuah elemen HTML Yang akan diberi style.
 |
| Penggunaan Dan Pemilihan Selector Pada CSS |
Dari pengertian diatas, pertanyaan selanjutnya adalah apa saja yang bisa digunakan untuk mengenali elemen HTML. untuk mengenali elemen HTML kita bisa menggunakan beberapa jenis selector, yaitu sebagai berikut :
1. elemen HTML
selector dengan menggunakan elemen HTML langsung, seperti h1-h6,p, a, ul, li, dll. Untuk lebih jelasnya silakan lihat HTML berikut, yang akan kita berikan style CSSnya berdasarkan elemen HTMLnya.
<!DOCTYPE html>
<html>
<head>
<title>Selector</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World</h1>
<h2>Belajar Selector</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut voluptatum odit provident delectus ipsa perspiciatis ea quo excepturi praesentium vitae, sit nihil saepe totam ipsam similique laborum unde quam recusandae!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In molestiae porro deleniti incidunt temporibus cum minus vitae libero neque obcaecati! Hic at distinctio officiis explicabo rem dolore aliquam, quasi incidunt!</p>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis similique, voluptas modi, magnam fuga aspernatur! Labore harum autem dignissimos porro aliquam non veniam et nobis facere error, nemo asperiores. Laborum.</p>
<ol>
<li><a href="">Link 5</a></li>
<li><a href="">Link 6</a></li>
<li><a href="">Link 7</a></li>
<li><a href="">Link 8</a></li>
</ol>
</body>
</html>
Noted :
untuk elemen HTML yang berbeda, namun mau diberikan style yang sama, kita bisa menggunakan operator koma ( , ) untuk menggabungkan 2 atau lebih elemen tersebut. Tanda ( , ) ini bisa diartikan sebagai "dan".
/*operator koma digunakan untuk menggabungan elemen yang berbeda. Cara memebaca contoh berikut : CSS carikan elemen h1 dan h3 kemudian berikan warna yang sama yaitu merah*/
h1, h3 {
color: red;
}
Untuk pemilihan sebuah elemen HTML yang lebih spesifik, kita bisa membuat selector lebih dari 2 elemen HTML yang digabungkan dengan menggunakan operator spasi. Operator spasi bisa berarti juga "didalam".
ul li a {
color: right: royalblue;;
}
/*arti dari selector diatas : CSS carikan elemen a yang ada didalam elemen li yang ada dalam elemen ul*/
 |
| Pemilihan Selector Dengan Menggunakan Elemen HTML |
2. id ( selector khusus )
elemen HTML dengan jenis yang sama bisa kita berikan style yang berbeda juga. caranya kita bisa membuat selector sendiri, dengan menggunakan id atau class.
id adalah sebuah kata unique untuk menandai elemen HTML tertentu dengan menggunakan huruf atau angka, ataupun kombinasinya. Untuk memanggil id kita membutuhkan tanda kress ( # ) diikuti dengan nama id.
3. class ( selector khusus )
seperti yang sudah dijelaskan pada point no. 2 bahwa kita bisa membuat selector sendiri, apabila kita ingin memberi style berbeda pada elemen HTML yang sama.Class adalah nama umum untuk menandakan elemen HTML tertentu. Untuk memanggil class kita membutuhkan tanda ( . ) diikuti dengan nama class.
Lalu setelah kita tahu apa itu id dan class. Kita juga harus mengetahui perbedaannya, sehingga kita bisa menggunakan keduanya secara tepat.
| Id | Class |
| Sebuah elemen HTML hanya boleh memiliki satu id saja. Apabila dipaksakan menggunakan lebih dari satu id, maka fungsi CSSnya tidak akan jalan. | Sebuah elemen HTML bisa memiliki lebih dari satu class |
| satu halaman HTML hanya boleh memilki satu elemen dengan id tersebut. | Satu halaman HTML diperbolehkan memiliki lebih dari satu class yang sama. |
| Id dapat digunakan sebagai penanda halaman untuk elemen HTML berupa link atau <a> | class tidak dapat digunakan sebagai penanda halaman untuk elemen HTML berupa link atau <a> |
| Id dapat digunakan di Javascript | Class dapat digunakan di Javascript |
| Sebaiknya tidak digunakan pada halaman CSS, karena menggunakan id bebannya lebih berat dibanding menggunakan elemen HTML atau menggunakan class | Sebaiknya menggunakan class untuk CSS |
| Operator pemanggilnya adalah tanda kress ( # ) | Operator pemanggilnya adalah tanda titik ( . ) |
 |
| Kombinasi Pemilihan Selector Dengan Menggunakan Elemen HTML, Id, dan Class |
a = paragraph berwarna kuning terjadi karena semua elemen <p> diberi style warna kuning.
b = paragraph berwarna hijau karena paragrap tersebut diberi id = “p1”, dimana .p1 diberi style warna hijau. Kemudian text bercetak miring karena diberi class=”italic” sama dengan judul h3 di point d yang diberi font-style italic. Dari contoh point b ini, kita bisa melihat bahwa satu elemen HTML bisa memiliki lebih dari satu class.
Text-spacing diberikan khusus hanya untuk paragraph 2 saja, sehingga untuk memberikan style ini, kita memerlukan selector yang lebih specifik, agar pemberian style ini, tidak berpengaruh untuk h3 yang sama-sama memiliki kelas “italic”
c = paragraph berwarna orange, karena paragraph tersebut diberi class=”p2”.
d= h3 bercetak miring karena diberi class=”italic”, sama dengan paragraph 2. Dari contoh ini kita bisa melihat bahwa satu class bisa diberikan pada lebih dari satu elemen HTML.
 |
| Pemilihan Selector Yang Salah |
Contoh gambar diatas adalah contoh penggunaan id yang salah. Satu element tidak bisa diberikan lebih dari satu id. Begitu juga dengan satu halaman HTML yang sama tidak bisa diberikan lebih dari satu id yang sama. Hal ini akan mengakibatkan fungsi dari CSSnya tidak berjalan. Contoh diatas semua element <p> diberi warna kuning. Namun khusus paragraph 1 diberikan id=”p1” yang diberi style warna orange, warna orange tidak muncul karena, element ini diberikan id=”italic”juga, fungsi cetak miringnya juga tidak berjalan. Dari contoh ini kita bisa mulai paham, penggunaan id lebih berat dibanding dengan penggunaan selector menggunakan elemen HTML atau class, jadi sebaiknya hindarkan penggunaan selector dengan menggunakan id.
4. Complex selector
Selector bisa sangat sederhana, bisa juga sangat complex. Selector menjadi complex karena biasanya elemen HTML yang mau dijadikan selector menjadi sangat spesifik.
Contoh sebagain berikut :
p #p1 .italic { color: pink; }
Sekian artikel mengenai penjelasan bagaimana menggunakan dan memilih selector pada CSS, semoga artikel yang saya tulis bisa bermanfaat buat teman-teman yang baru belajar CSS, terutama bagi para pemula. Apabila ada pertanyaan, saran, dan kritik. Silakan sampaikan dikolom komentar dibawah ini. tetap semangat. See you on my next articles. Bye-bye.
https://www.w3schools.com
https://www.w3schools.com/css
http://www.w3.org/style/CSS
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
http://www.w3schools.com/cssref/css_selectors.asp
- kalau ada pertanyaan, silakan tulis saja dikotak komentar dibawah, asal bukan spam dan sesuai dengan topik pembahasan.
- the language in this article uses indonesian, if you didn't understand with my language, you can use google translate or any others translator.
Post a Comment for "CSS Dasar Part 7 - Penggunaan Dan Pemilihan Selector Pada CSS"
Silakan berkomentar secara bijak dan sesuai dengan topik pembahasan