CSS - Combinator

Halo teman-teman pengembang web yang sedang belajar! Hari ini, kita akan mendalami dunia yang menarik dari CSS combinators. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk memandu Anda dalam perjalanan ini. Percayalah, pada akhir pelajaran ini, Anda akan dapat menggabungkan pemilih CSS seperti seorang ahli!

Apa Itu CSS Combinators?

Sebelum kita masuk ke dalamnya, mari kita pahami apa itu combinators. Dalam CSS, combinators adalah simbol khusus yang memungkinkan kita untuk membuat hubungan antara pemilih. Mereka membantu kita menargetkan elemen tertentu berdasarkan posisinya dalam pohon dokumen. Bayangkan mereka sebagai saus rahasia yang memberikan kekuatan super CSS Anda!

Sekarang, mari kita jelajahi setiap combinator secara detil.

CSS Combinators - Descendant Combinator (spasi)

Combinator turunan adalah yang paling sederhana dan paling banyak digunakan. Itu ditunjukkan oleh spasi antara dua pemilih. Itu memilih semua elemen yang menurun dari elemen yang ditentukan.

mari kita lihat contoh:

<div class="container">
<pIni adalah paragraf di dalam kontainer.</p>
<section>
<pIni adalah paragraf di dalam seksi di dalam kontainer.</p>
</section>
</div>

.container p {
color: biru;
}

Dalam contoh ini, semua elemen <p> di dalam .container akan berwarna biru, tanpa menghiraukan seberapa dalam mereka disembunyikan. Itu seperti mengatakan, "Hai CSS, temukan semua paragraf yang adalah anak, cucu, atau setiap tingkat menurun dari kelas kontainer!"

CSS Combinators - Menggunakan List

Sekarang, apa bila kita ingin menerapkan gaya yang sama ke beberapa pemilih? Itu adalah di mana combinator list berguna. Itu bukan benar-benar combinator dalam arti tradisional, tetapi teknik ini sangat berguna untuk diketahui.

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

Pemilih ini akan menerapkan font Arial ke semua elemen <h1>, <h2>, dan <h3>. Itu seperti mengatakan ke CSS, "Hai, buat semua jenis heading ini menggunakan font Arial!"

CSS Combinators - Child Combinator (>)

Combinator anak lebih spesifik daripada combinator turunan. Itu memilih hanya anak langsung dari elemen.

<ul class="menu">
<li>Beranda</li>
<li>Tentang
<ul>
<li>Tim Kami</li>
<li>Riwayat Kami</li>
</ul>
</li>
<li>Kontak</li>
</ul>

.menu > li {
font-weight: tebal;
}

Dalam contoh ini, hanya elemen <li> tingkat atas (Beranda, Tentang, Kontak) yang akan tebal. Item yang disembunyikan (Tim Kami, Riwayat Kami) tidak akan terpengaruh. Itu seperti mengatakan, "CSS, buat hanya anak langsung dari .menu tebal!"

CSS Combinators - Adjacent Sibling Combinator (+)

Combinator saudara sebelah memilih elemen yang secara langsung mendekati elemen khusus lainnya.

<h1>Selamat Datang di Website Kami</h1>
<pIni adalah paragraf pertama.</p>
<pIni adalah paragraf kedua.</p>

h1 + p {
font-style: miring;
}

Di sini, hanya paragraf pertama setelah <h1> yang akan dimiringkan. Itu seperti mengatakan ke CSS, "Temukan paragraf yang tepat di sebelah h1 dan buatnya miring!"

CSS Combinators - General Sibling Combinator (~)

Combinator saudara umum mirip dengan combinator saudara sebelah, tetapi lebih lunak. Itu memilih semua elemen yang adalah saudara dari elemen yang ditentukan.

<h1>Produk Kami</h1>
<pParagraf pengenalan</p>
<div class="product">Produk 1</div>
<pDeskripsi 1</p>
<div class="product">Produk 2</div>
<pDeskripsi 2</p>

.product ~ p {
font-size: 0.9em;
}

Dalam kasus ini, semua elemen <p> yang muncul setelah div .product akan memiliki ukuran font yang lebih kecil. Itu seperti mengatakan, "CSS, temukan semua paragraf yang adalah saudara dari elemen .product dan buat mereka agak lebih kecil!"

CSS Combinators - Penyusunan Combinators

Sekarang, mari kita lihat hal yang benar-benar menarik. Kita dapat menyusun combinator untuk membuat pemilih yang lebih kompleks!

<div class="container">
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Subitem 2.1</li>
<li>Subitem 2.2</li>
</ul>
</li>
<li>Item 3</li>
</ul>
</div>

.container > ul > li ul > li {
color: merah;
}

Pemilih ini mengatakan: "Temukan <li> elemen yang adalah anak langsung dari <ul>, yang adalah anak langsung dari <li>, yang adalah anak langsung dari <ul>, yang adalah anak langsung dari .container." Waw! Itu cukup banyak, tapi itu memungkinkan targeting yang sangat tepat.

Dalam contoh kita, hanya "Subitem 2.1" dan "Subitem 2.2" yang akan merah.

Daftar Pintar Combinator

Berikut ini adalah tabel praktis yang menggabungkan semua combinator yang kita pelajari:

Combinator	Simbol	Contoh	Deskripsi
Descendant	(spasi)	div p	Memilih semua <p> di dalam <div>
Child	>	div > p	Memilih semua <p> yang adalah anak langsung dari <div>
Adjacent Sibling	+	h1 + p	Memilih <p> yang secara langsung mendekati <h1>
General Sibling	~	h1 ~ p	Memilih semua <p> yang adalah saudara dari <h1>

Ingat, latihan membuat sempurna! Cobalah untuk mencoba combinator ini dalam proyek Anda sendiri. Secepatnya Anda akan bisa menggunaan CSS seperti seorang ahli web wizard!

Saya harap tutorial ini telah membantu. CSS combinators mungkin terlihat sulit pada awalnya, tetapi mereka adalah alat yang sangat kuat sekali Anda mengenalinya. Terus coding, terus belajar, dan terutama, bersenang-senang dengan itu!

Credits: Image by storyset