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 merupakan sesuatu yg dipakai dalam css buat mengenali sebuah elemen HTML Yang akan diberi style.
 |
| Penggunaan Dan Pemilihan Selector Pada CSS |
Dari pengertian diatas, pertanyaan selanjutnya adalah apa saja yg sanggup digunakan buat mengenali elemen HTML. Buat mengenali elemen HTML kita bisa menggunakan beberapa jenis selector, yaitu menjadi berikut :
1. Elemen HTML
selector dengan menggunakan elemen HTML eksklusif, misalnya h1-h6,p, a, ul, li, dll. Untuk detail silakan lihat HTML berikut, yg akan kita berikan style CSSnya dari 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 dipakai buat menggabungan elemen yang tidak sinkron. Cara memebaca model berikut : CSS carikan elemen h1 & h3 lalu 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 berdasarkan selector diatas : CSS carikan elemen a yang terdapat didalam elemen li yang terdapat dalam elemen ul*/
 |
| Pemilihan Selector Dengan Menggunakan Elemen HTML |
dua. Id ( selector khusus )
elemen HTML menggunakan jenis yg sama sanggup kita berikan style yg tidak selaras jua. Caranya kita sanggup membuat selector sendiri, menggunakan memakai id atau group.
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.
Tiga. Group ( selector spesifik )
seperti yg sudah dijelaskan dalam point no. Dua bahwa kita mampu membuat selector sendiri, bila kita ingin memberi style tidak sinkron pada elemen HTML yg sama.Class adalah nama umum buat menandakan elemen HTML eksklusif. Untuk memanggil class kita membutuhkan indikasi ( . ) diikuti menggunakan nama class.
Lalu selesainya kita tahu apa itu id & group. Kita juga harus mengetahui perbedaannya, sebagai akibatnya kita sanggup memakai 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 tadi diberi id = ?P1?, dimana .P1 diberi style warna hijau. Kemudian text bercetak miring lantaran diberi class=?Italic? Sama dengan judul h3 pada point d yg diberi font-style italic. Dari contoh point b ini, kita bisa melihat bahwa satu elemen HTML mampu mempunyai lebih berdasarkan satu group.
Text-spacing diberikan khusus hanya buat paragraph 2 saja, sebagai akibatnya untuk menaruh style ini, kita memerlukan selector yg lebih specifik, supaya hadiah style ini, tidak berpengaruh buat h3 yang sama-sama mempunyai kelas ?Italic?
C = paragraph berwarna orange, lantaran paragraph tadi diberi class=?P2?.
D= h3 bercetak miring karena diberi class=?Italic?, sama dengan paragraph dua. Dari contoh ini kita bisa melihat bahwa satu class sanggup 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, sanggup juga sangat complex. Selector sebagai complex karena umumnya elemen HTML yang mau dijadikan selector sebagai sangat khusus.
Contoh sebagain berikut :
p #p1 .Italic color: pink;
Sekian artikel mengenai penjelasan bagaimana menggunakan & memilih selector pada CSS, semoga artikel yang saya tulis bisa bermanfaat buat sahabat-sahabat yg baru belajar CSS, terutama bagi para pemula. Apabila ada pertanyaan, saran, dan kritik. Silakan sampaikan dikolom komentar dibawah ini. Permanen semangat. See you on my next articles. Bye-bye.
Referensi:
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.
Belum ada Komentar untuk "CSS Dasar Part 7 - Penggunaan Dan Pemilihan Selector Pada CSS"
Posting Komentar