CSS Dasar - 7 - Selector

Pengenalan CSS Selector

Ikhtisar Bagian: Pada bagian ini, kita akan membahas tentang apa yang disebut dengan CSS selector dan bagaimana penggunaannya dalam mengubah tampilan elemen HTML.

Apa itu CSS Selector?

• CSS selector digunakan oleh CSS untuk mengidentifikasi elemen HTML yang akan diberi gaya.

• Ada beberapa jenis selector yang dapat digunakan, termasuk selector elemen HTML, ID, dan kelas.

Penggunaan Selector Elemen HTML

• Menggunakan tag HTML sebagai selector memungkinkan kita untuk mengubah gaya semua elemen dengan tag tersebut.

• Contoh: body color: red; akan mengubah warna teks di dalam body menjadi merah.

Penggunaan Selector ID dan Kelas

• Kita juga dapat menggunakan ID atau kelas sebagai selector.

• ID adalah selektor unik yang diberikan kepada satu elemen tertentu.

• Kelas adalah selektor yang dapat diberikan kepada beberapa elemen.

• Contoh: #header font-size: 24px; akan mengubah ukuran font pada elemen dengan ID "header".

Kompleksitas Selector

• Terdapat juga kompleksitas dalam penggunaan selector, di mana kita dapat membuat selektor panjang dan kompleks.

• Hal ini berguna ketika ingin menargetkan elemen secara spesifik.

Menggunakan Selecttor dalam Kode

Ikhtisar Bagian: Dalam bagian ini, kita akan melihat contoh penggunaan sejumlah selector dalam kode menggunakan CodePen.

Contoh Kode

<h1>Hello World</h1>

<ul>

<li><a href="#">Link 1</a></li>

<li><a href="#">Link 2</a></li>

</ul>

<ol>

<li><a href="#">Link 3</a></li>

<li><a href="#">Link 4</a></li>

</ol>

<h2>Heading 2</h2>

<p>Paragraph 1</p>

<p>Paragraph 2</p>

Penggunaan Selector Elemen HTML

• Menggunakan selector elemen HTML untuk mengubah gaya elemen.

• Contoh: body font-family: Arial; akan mengubah jenis font di dalam body menjadi Arial.

Penggunaan Selector ID dan Kelas

• Menggunakan selector ID atau kelas untuk mengubah gaya elemen dengan ID atau kelas tertentu.

• Contoh: #header color: green; akan mengubah warna teks pada elemen dengan ID "header" menjadi hijau.

Grouping Selector

• Kita dapat menggunakan operator koma (,) untuk memberikan style yang sama kepada beberapa elemen.

• Contoh: h1, h2 color: green; akan memberikan warna hijau pada semua elemen h1 dan h2.

Penggunaan Selector Spasi

• Jika ingin memberikan style pada elemen yang berada di dalam suatu elemen lain, kita dapat menggunakan spasi sebagai pemisah.

• Contoh: ul li a color: orange; akan memberikan warna oranye pada semua tautan (elemen a) yang berada di dalam elemen li yang berada di dalam ul.

Penggunaan Selector Khusus

• Jika ingin memberikan style pada elemen yang tidak terkait dengan suatu kelompok tertentu, kita dapat menggunakan selector khusus seperti ID atau kelas.

• Contoh: #p1 color: orange; akan memberikan warna oranye pada elemen dengan ID "p1".

• Contoh: .p2 color: red; akan memberikan warna merah pada semua elemen dengan kelas "p2".

Menggabungkan Selector

Ikhtisar Bagian: Dalam bagian ini, kita akan belajar cara menggabungkan selector untuk memberikan style yang berbeda pada beberapa elemen.

Penggunaan Koma

• Menggunakan operator koma (,) untuk memberikan style yang sama kepada beberapa elemen.

• Contoh: h1, h2 color: green; akan memberikan warna hijau pada semua elemen h1 dan h2.

Penggunaan Spasi

• Menggunakan spasi sebagai pemisah untuk memilih elemen yang berada di dalam suatu elemen lain.

• Contoh: ul li a color: orange; akan memberikan warna oranye pada semua tautan (elemen a) yang berada di dalam elemen li yang berada di dalam ul.

Penggunaan ID dan Kelas

• Menggunakan ID atau kelas sebagai selector untuk memilih elemen secara spesifik.

• Contoh: #p1 color: orange; akan memberikan warna oranye pada elemen dengan ID "p1".

• Contoh: .p2 color: red; akan memberikan warna merah pada semua elemen dengan kelas "p2".

Memberi Gaya Pada Paragraf

Ikhtisar Bagian: Dalam bagian ini, kita akan belajar cara memberikan gaya yang berbeda pada dua paragraf.

Penggunaan Selector Khusus

• Menggunakan selector khusus seperti ID atau kelas untuk memilih elemen secara spesifik.

• Contoh: #p1 color: orange; akan memberikan warna oranye pada paragraf pertama.

• Contoh: .p2 color: red; akan memberikan warna merah pada paragraf kedua.

Perbedaan antara ID dan Kelas

Ikhtisar Bagian: Pada bagian ini, dijelaskan perbedaan antara selektor ID dan selektor kelas dalam CSS.

Selektor ID

• Elemen HTML hanya boleh memiliki satu ID.

• Satu halaman web hanya boleh memiliki satu elemen dengan ID tersebut.

• ID dapat digunakan sebagai penanda halaman untuk link atau hyperlink.

• Digunakan juga untuk JavaScript.

• Tidak disarankan digunakan untuk CSS karena memiliki beban yang lebih berat dibandingkan dengan selektor kelas.

Selektor Kelas

• Elemen HTML dapat memiliki banyak kelas.

• Beban penggunaan selektor kelas lebih ringan dibandingkan dengan selektor ID.

• Disarankan menggunakan elemen HTML terlebih dahulu jika memungkinkan, jika tidak baru menggunakan selektor kelas.

Menggunakan Kelas pada CSS

Ikhtisar Bagian: Pada bagian ini, dijelaskan penggunaan kelas pada CSS untuk mengubah tampilan elemen HTML tertentu.

• Dapat menggunakan properti CSS seperti font-size atau cetak tebal (bold) pada elemen dengan kelas tertentu.

• Contoh: Mengubah paragraf menjadi cetak tebal dengan menambahkan kelas "cetak-tebal".

• Hanya elemen yang memiliki kelas tersebut yang akan terpengaruh oleh perubahan gaya (styling).

Kesimpulan dan Saran

Ikhtisar Bagian: Pada bagian ini, diberikan kesimpulan mengenai penggunaan selektor dasar dalam CSS.

• Disarankan untuk menggunakan elemen HTML jika memungkinkan.

• Jika tidak memungkinkan, gunakan selektor kelas.

• Tidak disarankan menggunakan selektor ID karena memiliki beban yang lebih berat.

• Saran untuk melanjutkan pembelajaran mengenai pseudo class pada video berikutnya.

Terima kasih dan sampai jumpa lagi!