Skip to main content

Selector Lanjutan

Sekarang kita fokus ke cara menggunakan CSS dengan file berbeda yang dimana kita akan pakai selector-selector kemudian mendefinisikan property dan value untuk aturan-aturannya.

Multiple Selector​

Nah sebelumnya kita baru memberikan selector untuk satu hal saja, misal class main-container kita menuliskan:

.main-container {
	color: red;
}

Nah bagaimana misal aku juga ingin ada class lain yang memiliki rules yang sama. Misal aku ingin tag h2 memiliki rules yang sama dengan class main-container, maka aku bisa lakukan seperti ini:

.main-container, h2 {
	color:red;
}

Jadi dengan memberi koma setelah .main-container aku bisa menambah selector lain, seperti pada contoh adalah tag h2 yang dimana hanya aku tulis h2 kenapa? karena dia selector tag.

Oke sekarang coba aku tambahin beberapa selector lagi (misal):

.main-container, h2, #apaya, h3 {
	color:red;
}

Artinya sekarang, class main-container, tag h2, id apaya, dan tag h3 memiliki rules yang sama yaitu color:red. Gampang kan?

Child Selector (Descendant Selector)​

Coba anggap sekarang aku punya struktur seperti ini:

<div class="container">
	<h2 class="subjudul">Our Best Tents</h2>
	<p>
		Hello World
	</p>
	<div>
		<p>Ini paragraf di dalam div lain.</p>
	</div>
</div>

Misal nih aku ingin elemen p yang merupakan child atau turunan dari class container aku beri style, dengan syarat elemen p ini harus di dalam dari class container. Nah itu aku bisa pakai cara ini di CSS:

.container p {
	color: yellow;
}

Dengan begitu setiap tag p yang ada di dalam elemen dengan class container akan memiliki foreground color yellow, termasuk p yang ada di dalam div tambahan itu. Selector spasi ini akan mencari semua turunan, nggak peduli seberapa dalam posisinya.

Direct Child Selector (>)​

Nah, ada lagi nih saudaranya Child Selector, tapi yang ini lebih spesifik. Selector ini pakai tanda >. Bedanya apa? Coba lihat lagi struktur HTML tadi.

Kalau aku cuma mau menargetkan elemen p yang merupakan anak kandung langsung dari .container, aku bisa tulis begini:

.container > p {
	font-weight: bold;
}

Dengan aturan di atas:

  • Paragraf pertama (<p>Hello World</p>) akan menjadi tebal.
  • Paragraf kedua (<p>Ini paragraf di dalam div lain.</p>) tidak akan menjadi tebal. Kenapa? Karena dia bukan anak langsung dari .container, melainkan "cucu" (anak dari div di dalam .container).

Keren kan? Jadi kita bisa lebih presisi mau nargetin elemen yang mana.

Adjacent Sibling Selector (+)​

Gimana kalau kita mau styling elemen yang posisinya persis setelah elemen lain? Misal, kita mau kasih jarak atas untuk setiap paragraf yang muncul tepat setelah judul h2.

Lihat struktur ini:

<div class="artikel">
	<h2>Judul Artikel</h2>
	<p>Ini paragraf pertama, nempel sama judul.</p>
	<p>Ini paragraf kedua.</p>
</div>

Kita bisa pakai selector + (tanda tambah):

h2 + p {
	margin-top: 20px;
}

Artinya: "Cari setiap elemen p yang posisinya persis setelah h2 dan beri dia margin-top". Hasilnya, cuma paragraf pertama yang akan punya jarak atas 20px dari judul. Paragraf kedua nggak akan kena efeknya. Berguna banget buat merapikan layout tulisan!

Aturan Main: Siapa yang Menang? (Cascade & Specificity)​

Pernah bingung nggak, kenapa style CSS-mu kadang nggak jalan atau ketimpa sama style lain? Nah, ini karena CSS punya aturan main yang disebut Cascade dan Specificity. Anggap saja ini adalah sistem ranking untuk menentukan style mana yang paling penting dan harus ditampilkan.

Sederhananya, browser akan menentukan style mana yang "menang" berdasarkan urutan ini:

1. Specificity (Kekhususan)​

Selector mana yang paling spesifik, dialah yang menang. Urutan kekuatannya dari yang paling kuat ke paling lemah:

  • ID Selector (#): Ini paling kuat! Karena ID itu unik, cuma boleh ada satu di satu halaman.
  • Class (.), Attribute ([type="text"]), dan Pseudo-class (:hover): Ini di level menengah.
  • Tag/Element Selector (h1, p, div): Ini yang paling lemah.

Contoh Kasus:

<p id="paragraf-penting" class="teks-biru">Ini sebuah paragraf.</p>
/* Selector Tag (lemah) */
p {
	color: red;
}

/* Selector Class (lebih kuat) */
.teks-biru {
	color: blue;
}

/* Selector ID (paling kuat!) */
#paragraf-penting {
	color: green;
}

Menurutmu, paragrafnya bakal warna apa? Jawabannya hijau! Karena selector ID (#paragraf-penting) punya "pangkat" paling tinggi dan mengalahkan yang lain.

2. Source Order (Urutan Kode)​

Kalau ada dua selector yang punya tingkat specificity yang sama, maka yang ditulis paling bawah di file CSS-mu lah yang akan menang.

Contoh Kasus:

.teks-biru {
	color: blue;
}

/* Ditulis setelahnya, jadi ini yang menang */
.teks-biru {
	color: purple;
}

Hasilnya, teks akan berwarna ungu karena aturan itu datang belakangan.

3. !important (Kartu Truf)​

Ada satu cara untuk "memaksa" sebuah aturan supaya jadi yang paling utama, yaitu dengan menambahkan !important di akhir value.

p {
	color: red !important; /* Ini pasti menang! */
}

.teks-biru {
	color: blue;
}

#paragraf-penting {
	color: green;
}

Meskipun selector p paling lemah, karena ada !important, warna teksnya akan jadi merah.

Tapi hati-hati! Sebisa mungkin hindari penggunaan !important. Kalau terlalu sering dipakai, nanti CSS-mu jadi susah diatur dan di-debug. Pakai ini hanya kalau benar-benar kepepet.

Yak jadi begitu temen-temen ku harap kalian sudah lebih memahami bagaimana penggunaan selector di CSS. Aku harap kalian bisa nih menstruktur gimana aturan CSS kalian bakal diaplikasikan ke desain.

Buat yang masih bingung it's okay, bisa baca lagi materinya atau anya ke aku. Yang penting jangan pernah menyerah. Semangat gesss.