Untuk memahami apa itu selector sebaiknya anda memahami terlebih dahulu apa itu Struktur CSS, agar anda tidak bingung untuk membaca artikel yang satu ini, saya sudah siapkan linknya anda tinggal klik saja di bawah ini maka anda akan di alihkan ke halaman sebelumnya.
Baca juga : Keuuntungan Menggunakan CSS Dan Struktur CSS
Sekarang di artikel ini ingin menjelaskan seperti apa itu selector di dalam CSS, mungkin untuk pemula tidak tahu apa itu selector, dan apa tujuannya, baiklah mari kita lihat di bawah ini semoga dapat memuaskan anda untuk yang membacanya.
Selector Dalam CSS
Jika dalam HTML kita mengenal adanya tag-tag yang menyusun sebuah dokumen HTML, maka dalam CSS kita juga mengenal dengan sebutan selector.
Selector adalah nama-nama yang di berikan untuk style-style yang berbeda baik itu style internal maupun eksternal. Dalam style tujuan, anda harus menentukan bagaimana selector seharusnya bekerja yang dinamakan properties di dalam tanda { } atau curly bracket yang dapat memiliki nilai berupa font, warna dan lain-lain.
Selanjutnya dalam body di halaman web anda, arahkan ke selector-selector ini untuk mengaktifkan style tersebut.
Karena CSS memiliki atruan tersendiri dalam penulisan sintaksnya, penulisan sintaks tersebut terbagi ke dalam tiga bagian, yaitu selector, property, dan value. Untuk lebih jelasnya lihat kode script di bawah ini :
- selector {property: value;}
Selector dalam CSS adalah elemen adalah elemen yang akan di definisikan dalam style CSS, sedangkan elemen ini berupa tag HTML ataupun class. Sementara property dalam CSS adalah atribut yang berfungsi untuk mendifinisikan selector, sedangkan value adalah nilai atau harga dari sebuah property.
Contoh:
- <html>
- <head>
- <style type="text/css">
- B.besar {color:read; font-size:15px; font-family:arial;}
- </style>
- </head>
- <body>
- <b> ini adalah huruf besar dengan HTML</b><br>
- <b class="besar"> ini adalah huruf besar dengan CSS</b>
- </body>
- </html>
Dalam kasus ini, B.besar adalah selector, Contoh di atas akan menghasilkan tampilan seperti:
Class Selector
Class selector di gunakan untuk menentukan style yang dapat di gunakan tanpa menentukan lagi tag HTML sederhana. Penulisan class adalah dengan menggunakan tanda titik atau sering di sebut dot (.). Selain aturan penulisan di atas, CSS mengenal Class selector di mana dalam elemen yang sama, anda dapat menerapkan lebih dari satu style.
Contoh:
- <html>
- <head>
- <title> Class Selector </title>
- <style type="text/css">
- <!--
- f.times {font-family:times;}
- f.verdana {font-family:verdana;}
- .courier {font-family: "courier";}
- -->
- </style>
- </head>
- <body>
- <f class="times"> Ini adalah contoh pengunaan class sebagai selector, setiap huruf memiliki huruf times new roman </f><br>
- <f class="verdana"> Ini adalah contoh pengunaan class sebagai selector, setiap huruf memiliki huruf verdana </f><br>
- <f class="courier"> Ini adalah contoh pengunaan class sebagai selector, setiap huruf memiliki huruf courier </f><br>
- </body>
- </html>
Tampilan kode sript di atas akan seperti gambar di bawah ini :
Pada contoh di atas, tag f memiliki 2 class berbeda untuk memformat paragraf, yaitu. times dan .verdana di karenakan tag clas .times dan .verdana adalah class yang memiliki oleh tag f maka ia hanya dapat di kenakan pada elemen f saja.
Lain halnya dengan class .courier, ia dapat di pergunakan oleh semua elemen tanpa harus menggunakan tag f di awal dan akhir elemen yang akan di format.
Nama untuk setiap class dapat berbeda-beda. Anda di bebaskan menentukan nama class sendiri, tetapi ada baiknya memilih nama dari tiap class yang mengacu kepada fungsi dari clas tersebut. Hal ini bertujuan agar anda tidak bingung menggunakan class pada saat menggabungkannya ke dalam tag HTML.
Contoh :
- <p class="blog"> ini teks untuk paragraf pada blog </p>
- <p class="menukiri"> ini teks untuk paragraf pada menu kiri </p>
ID Selector
ID selector di gunakan untuk menentukan style yang berhubungan dengan objek-objek dengan sebuah ID yang unik. Berbeda dengan class selector yang dapat kita pergunakan pada berbagai tag, ID selector ini memiliki sifat-sifat yang berbeda.
ID selector hanya dapat di pergunakan pada satu elemen saja pada setiap halaman yang kita buat. ID selector mneggunakan tag kres (#) sebelum menggunakan nama selector. Di bawah ini adalah contoh ID Selector :
- #helvitica {font-family: Helvetica;}
Dalam penerapan pada tag html, anda dapat menggunakan atribut atau span atau pun div, seperti conotoh di bawah ini:
- <span id="helvetica"> Ini adalah huruf helvetica</span> atau
- <div id="helvetica"> Ini adalah huruf helvetica </div>
Contoh penulisan dokumen dapat di tuliskan pada contoh kode script di bawah ini:
- <html>
- <head>
- <title> ID Selector </title>
- <style type="text/css">
- <!--
- #times {font-family: times;}
- #verdana {font-family: verdana;}
- #courier {font-family: "courier";}
- -->
- </style>
- </head>
- </html>
- <body>
- <div id="times"> Ini adalah contoh penggunaan id sebagai selector, setiap huruf memiliki huruf times new rowman </div><br>
- <div id="verdana"> Ini adalah contoh penggunaan id sebagai selector, setiap huruf memiliki huruf verdana </div><br>
- <div id="courier"> Ini adalah contoh penggunaan id sebagai selector, setiap huruf memiliki huruf courier </div><br>
- </body>
- </html>
Tampilan kode sript di atas akan seperti gambar di bawah ini:
Selain yang di jelaskan di atas, dalam css kita juga akan mengenal atau berhadapan dengan adanya pewarisan (Inheritance), Pseudo Classes, Pseudo-element, dan Selectors-Kontekstual (Contextual Selector), Tapi nanti di artikel selanjutnya. hihi :p
Baca juga : Inheritance,Pseudo Classes, Pseudo-element, dan Selector-KontekstualSaya rasa cukup untuk penjelasan mengenai selector di dalam css (class, dan id), terimakasih telah membaca artikel ini semoga bermanfaat, saya pamit, sampai jumpa. Salam Sukai Penulis
0 Komentar