Tutorial CSS #3 — Mengenal CSS Selector dan Cara Menggunakannya

Pada tutorial CSS sebelumnya, kita sudah membahas tiga cara memasang CSS ke HTML, yaitu Inline CSS, Internal CSS, dan External CSS. Setelah mengetahui cara menghubungkan CSS dengan HTML, sekarang kita akan membahas salah satu konsep paling penting dalam CSS, yaitu CSS Selector.

CSS Selector digunakan untuk menentukan elemen HTML mana yang ingin kita beri style. Dengan selector, kita dapat memilih elemen berdasarkan nama tag, class, ID, atribut, hubungan antar-elemen, dan beberapa kondisi tertentu.

Jika Anda baru belajar CSS, memahami selector akan sangat membantu karena hampir semua aturan CSS yang dibuat membutuhkan selector untuk menentukan targetnya.

Apa Itu CSS Selector?

CSS Selector adalah pola atau aturan yang digunakan CSS untuk memilih elemen HTML yang akan diberikan style.

Sebagai contoh, kita memiliki HTML berikut:

<p>Halo, dunia!</p>
<p>Saya sedang belajar CSS.</p>

Kemudian kita ingin mengubah warna seluruh elemen <p> menjadi biru. Kita dapat menggunakan nama tag sebagai selector:

p {
  color: blue;
}

Pada contoh tersebut, p merupakan selector, sedangkan color: blue; merupakan deklarasi CSS yang menentukan style untuk elemen tersebut.

Struktur Dasar CSS

Secara umum, aturan CSS memiliki bentuk seperti berikut:

selector {
  property: value;
}

Contohnya:

p {
  color: blue;
  font-size: 18px;
}

Penjelasannya:

• p → selector
• color → property
• blue → value
• font-size → property
• 18px → value

Dengan konsep tersebut, kita dapat menentukan elemen HTML tertentu dan mengatur tampilannya menggunakan CSS.

1. Element Selector

Selector paling sederhana adalah Element Selector. Selector ini menggunakan nama tag HTML sebagai target.

Contoh:

h1 {
  color: darkblue;
}

p {
  color: gray;
}

CSS tersebut akan diterapkan pada seluruh elemen <h1> dan <p> yang terdapat pada halaman.

Contoh HTML:

<h1>Belajar CSS</h1>
<p>CSS digunakan untuk mengatur tampilan halaman web.</p>
<p>Selector menentukan elemen yang akan diberi style.</p>

Semua paragraf pada contoh tersebut akan mendapatkan warna yang sama karena selector yang digunakan adalah p.

2. Class Selector

Class Selector digunakan ketika kita ingin memberikan style kepada satu atau beberapa elemen yang memiliki class tertentu.

Pada CSS, class selector diawali dengan tanda titik (.).

.judul {
  color: blue;
  font-size: 24px;
}

Kemudian class tersebut dapat digunakan pada HTML:

<h1 class="judul">Belajar CSS</h1>
<p class="judul">Tutorial CSS untuk pemula.</p>

Kedua elemen tersebut akan mendapatkan style yang sama karena menggunakan class judul.

Class sangat sering digunakan dalam pengembangan website karena satu class dapat digunakan pada banyak elemen.

3. ID Selector

Selain class, CSS juga dapat memilih elemen berdasarkan atribut id. Selector ini disebut ID Selector.

ID selector diawali dengan tanda pagar (#).

#header {
  background-color: black;
  color: white;
}

Contoh HTML:

<div id="header">
  <h1>Website Saya</h1>
</div>

Pada praktiknya, sebuah ID sebaiknya digunakan untuk mengidentifikasi satu elemen tertentu dalam satu halaman. Untuk style yang digunakan berulang kali, class biasanya lebih sesuai.

4. Universal Selector

Universal Selector digunakan untuk memilih seluruh elemen pada halaman. Selector ini menggunakan tanda bintang (*).

* {
  box-sizing: border-box;
}

Selector universal dapat berguna untuk memberikan aturan dasar kepada berbagai elemen, tetapi penggunaannya tetap perlu diperhatikan agar tidak memberikan style yang tidak diperlukan ke seluruh halaman.

5. Grouping Selector

Jika beberapa elemen membutuhkan style yang sama, kita dapat menggabungkan beberapa selector menggunakan tanda koma.

h1, h2, h3 {
  font-family: Arial, sans-serif;
  color: darkblue;
}

Dengan cara tersebut, selector h1, h2, dan h3 akan mendapatkan deklarasi CSS yang sama.

Grouping selector membantu mengurangi penulisan CSS yang berulang.

6. Descendant Selector

CSS juga dapat memilih elemen berdasarkan hubungan atau posisinya di dalam elemen lain.

Contohnya:

.artikel p {
  line-height: 1.7;
}

Selector tersebut menargetkan elemen <p> yang berada di dalam elemen dengan class artikel.

Contoh HTML:

<div class="artikel">
  <p>Paragraf pertama.</p>
  <p>Paragraf kedua.</p>
</div>

<p>Paragraf di luar artikel.</p>

Pada contoh tersebut, kedua paragraf yang berada di dalam .artikel akan mendapatkan style. Paragraf yang berada di luar elemen tersebut tidak akan terkena aturan tersebut.

7. Child Selector

Child Selector digunakan untuk memilih elemen yang merupakan child langsung dari elemen tertentu. Simbol yang digunakan adalah tanda lebih besar (>).

.menu > li {
  list-style: none;
}

Berbeda dengan descendant selector, child selector hanya menargetkan elemen yang menjadi anak langsung dari elemen yang dipilih.

8. Attribute Selector

CSS juga dapat memilih elemen berdasarkan atribut HTML tertentu. Selector ini disebut Attribute Selector.

Contohnya, kita ingin memberikan style kepada input yang memiliki atribut type="text":

input[type="text"] {
  border: 1px solid gray;
}

Contoh HTML:

<input type="text" placeholder="Nama">
<input type="email" placeholder="Email">

Aturan tersebut hanya menargetkan input dengan atribut type="text".

9. Menggabungkan Beberapa Selector

Dalam proyek nyata, selector sering digunakan secara bersamaan untuk membuat target style yang lebih spesifik.

Contohnya:

.artikel h2 {
  color: darkblue;
}

.artikel .highlight {
  background-color: yellow;
}

Aturan pertama memilih elemen <h2> yang berada di dalam elemen dengan class artikel.

Aturan kedua memilih elemen yang memiliki class highlight dan berada di dalam elemen dengan class artikel.

Studi Kasus Sederhana

Sekarang kita coba membuat halaman sederhana yang menggunakan beberapa jenis selector sekaligus.

HTML:

<div class="artikel">
  <h1 id="judul">Belajar CSS Selector</h1>

  <p>CSS digunakan untuk mengatur tampilan halaman web.</p>

  <p class="penting">
    Selector digunakan untuk memilih elemen HTML.
  </p>
</div>

CSS:

#judul {
  color: darkblue;
}

.artikel p {
  font-size: 18px;
}

.penting {
  background-color: yellow;
  padding: 10px;
}

Pada contoh tersebut:

• #judul memilih elemen dengan ID judul.
• .artikel p memilih elemen paragraf yang berada di dalam .artikel.
• .penting memilih elemen yang memiliki class penting.

Dengan memahami cara kerja selector, kita sudah dapat mengatur bagian halaman web secara lebih terarah tanpa harus memberikan style secara langsung pada setiap elemen HTML.

Perbedaan Element, Class, dan ID Selector

Selector	Contoh	Fungsi
Element	p	Memilih elemen berdasarkan nama tag.
Class	.judul	Memilih elemen berdasarkan class.
ID	#header	Memilih elemen berdasarkan ID.
Universal	*	Memilih seluruh elemen.
Attribute	input[type="text"]	Memilih elemen berdasarkan atribut.

Tips Saat Menggunakan CSS Selector

• Gunakan class untuk style yang perlu digunakan pada beberapa elemen.
• Gunakan ID untuk mengidentifikasi elemen tertentu.
• Gunakan nama tag jika memang seluruh elemen dengan tag tersebut perlu mendapatkan style yang sama.
• Hindari selector yang terlalu rumit jika selector yang lebih sederhana sudah cukup.
• Gunakan nama class yang jelas dan menggambarkan fungsi elemen.

Kesimpulan

CSS Selector merupakan dasar penting dalam mempelajari CSS karena selector menentukan elemen HTML mana yang akan menerima sebuah aturan style.

Beberapa selector dasar yang perlu dipahami adalah Element Selector, Class Selector, ID Selector, Universal Selector, Grouping Selector, Descendant Selector, Child Selector, dan Attribute Selector.

Setelah memahami selector, kita akan lebih mudah mempelajari berbagai property CSS untuk mengatur warna, ukuran teks, background, jarak, border, dan tampilan elemen lainnya.

Pada tutorial CSS berikutnya, kita akan membahas CSS Property dan Value, termasuk cara mengatur warna, ukuran teks, dan berbagai tampilan dasar elemen HTML.

Berbagi :