Pemilih

Podcast CSS - 002: Pemilih

Jika Anda memiliki teks yang ukuran lebih besar dan berwarna merah jika itu adalah paragraf pertama artikel, bagaimana cara melakukannya?

<article>
  <p>I want to be red and larger than the other text.</p>
  <p>I want to be normal sized and the default color.</p>
</article>

Anda menggunakan pemilih CSS untuk menemukan elemen tertentu dan menerapkan aturan CSS, seperti ini.

article p:first-of-type {
  color: red;
  font-size: 1.5em;
}

CSS memberi Anda banyak opsi untuk memilih elemen dan menerapkan aturan ke elemen tersebut, mulai dari yang sangat sederhana hingga yang sangat kompleks, untuk membantu memecahkan situasi seperti ini.

Bagian dari aturan CSS

Untuk memahami cara kerja pemilih dan perannya dalam CSS, penting untuk mengetahui bagian-bagian dari aturan CSS. Aturan CSS adalah blok kode, yang berisi satu atau beberapa pemilih dan satu atau beberapa deklarasi.

Dalam aturan CSS ini, selektor adalah .my-css-rule yang menemukan semua elemen dengan class my-css-rule di halaman. Ada tiga deklarasi dalam tanda kurung kurawal. Deklarasi adalah pasangan properti dan nilai yang menerapkan gaya ke elemen yang cocok dengan pemilih. Aturan CSS dapat memiliki deklarasi dan pemilih sebanyak yang Anda inginkan.

Pemilih sederhana

Grup pemilih yang paling mudah menargetkan elemen HTML serta class, ID, dan atribut lain yang dapat ditambahkan ke tag HTML.

Pemilih universal

Pemilih universal—juga dikenal sebagai karakter pengganti—cocok dengan elemen apa pun.

* {
  color: hotpink;
}

Aturan ini menyebabkan setiap elemen HTML di halaman memiliki teks hotpink.

Pemilih jenis

Pemilih jenis cocok dengan elemen HTML secara langsung.

section {
  padding: 2em;
}

Aturan ini menyebabkan setiap elemen <section> memiliki 2em padding di semua sisi.

Pemilih class

Elemen HTML dapat memiliki satu atau beberapa item yang ditentukan dalam atribut class. Pemilih class cocok dengan elemen apa pun yang menerapkan class tersebut.

<div class="my-class"></div>
<button class="my-class"></button>
<p class="my-class"></p>

Setiap elemen yang menerapkan class tersebut akan berwarna merah:

.my-class {
  color: red;
}

Perhatikan bahwa . hanya ada di CSS, bukan HTML. Hal ini karena karakter . menginstruksikan bahasa CSS untuk mencocokkan anggota atribut class. Ini adalah pola umum dalam CSS, dengan karakter khusus, atau serangkaian karakter, digunakan untuk menentukan jenis pemilih.

Elemen HTML yang memiliki class .my-class akan tetap dicocokkan dengan aturan CSS di atas, meskipun memiliki beberapa class lain, seperti ini:

<div class="my-class another-class some-other-class"></div>

Hal ini karena CSS mencari atribut class yang berisi class yang ditentukan, bukan mencocokkan class tersebut secara persis.

Pemilih ID

Elemen HTML dengan atribut id harus menjadi satu-satunya elemen di halaman dengan nilai ID tersebut. Anda memilih elemen dengan pemilih ID seperti ini:

#rad {
  border: 1px solid blue;
}

CSS ini akan menerapkan batas biru ke elemen HTML yang memiliki id rad, seperti ini:

<div id="rad"></div>

Demikian pula dengan pemilih class ., gunakan karakter # untuk memerintahkan CSS mencari elemen yang cocok dengan id yang mengikutinya.

Pemilih atribut

Anda dapat mencari elemen yang memiliki atribut HTML tertentu, atau memiliki nilai tertentu untuk atribut HTML, menggunakan pemilih atribut. Instruksikan CSS untuk mencari atribut dengan menggabungkan pemilih menggunakan tanda kurung siku ([ ]).

[data-type='primary'] {
  color: red;
}

CSS ini mencari semua elemen yang memiliki atribut data-type dengan nilai primary, seperti ini:

<div data-type="primary"></div>

Selain mencari nilai tertentu dari data-type, Anda juga dapat mencari elemen dengan atribut yang ada, terlepas dari nilainya.

[data-type] {
  color: red;
}

<div data-type="primary"></div>
<div data-type="secondary"></div>

Kedua elemen <div> ini akan memiliki teks merah.

Anda dapat menggunakan pemilih atribut yang peka huruf besar/kecil dengan menambahkan operator s ke pemilih atribut.

[data-type='primary' s] {
  color: red;
}

Artinya, jika elemen HTML memiliki data-type dari Primary, bukan primary, elemen tersebut tidak akan mendapatkan teks merah. Anda dapat melakukan hal sebaliknya—tidak peka huruf besar/kecil—dengan menggunakan operator i.

Bersama dengan operator kasus, Anda memiliki akses ke operator yang mencocokkan bagian string di dalam nilai atribut.

/* A href that contains "example.com" */
[href*='example.com'] {
  color: red;
}

/* A href that starts with https */
[href^='https'] {
  color: green;
}

/* A href that ends with .com */
[href$='.com'] {
  color: blue;
}

Mengelompokkan pemilih

Pemilih tidak harus mencocokkan hanya satu elemen. Anda dapat mengelompokkan beberapa pemilih dengan memisahkannya menggunakan koma:

strong,
em,
.my-class,
[lang] {
  color: red;
}

Contoh ini memperluas perubahan warna untuk elemen <strong> dan elemen <em>. Kode ini juga diperluas ke class bernama .my-class dan elemen yang memiliki atribut lang.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang pemilih sederhana

* {}

div {}

Class Pseudo dan elemen pseudo

CSS menyediakan jenis pemilih berguna yang berfokus pada status platform tertentu, seperti saat elemen diarahkan, struktur di dalam elemen, atau bagian elemen.

Class Pseudo

Elemen HTML berada dalam berbagai status, baik karena berinteraksi dengannya, atau salah satu elemen turunannya berada dalam status tertentu.

Misalnya, kursor pada elemen HTML dapat diarahkan oleh pengguna atau elemen turunan juga dapat diarahkan oleh pengguna. Untuk situasi tersebut, gunakan class pseudo :hover.

/* Our link is hovered */
a:hover {
  outline: 1px dotted green;
}

/* Sets all even paragraphs to have a different background */
p:nth-child(even) {
  background: floralwhite;
}

Cari tahu selengkapnya di modul pseudo-class.

Elemen semu

Elemen pseudo berbeda dengan class pseudo karena tidak merespons status platform, bertindak seolah-olah menyisipkan elemen baru dengan CSS. Elemen pseudo juga secara sintaksis berbeda dengan class pseudo, karena kita menggunakan titik dua ganda (::), bukan menggunakan titik dua tunggal (:).

.my-element::before {
  content: 'Prefix - ';
}

Seperti dalam demo di atas, saat Anda memberi awalan pada label link dengan jenis file tersebut, Anda dapat menggunakan elemen semu ::before untuk menyisipkan konten di awal elemen, atau elemen pseudo ::after untuk menyisipkan konten di akhir elemen.

Namun, elemen semu tidak terbatas pada penyisipan konten. Anda juga dapat menggunakannya untuk menargetkan bagian tertentu dari elemen. Misalnya, Anda memiliki daftar. Gunakan ::marker untuk menentukan gaya setiap poin (atau angka) dalam daftar

/* Your list will now either have red dots, or red numbers */
li::marker {
  color: red;
}

Anda juga dapat menggunakan ::selection untuk menyesuaikan gaya konten yang telah ditandai oleh pengguna.

::selection {
  background: black;
  color: white;
}

Pelajari lebih lanjut dalam modul tentang elemen pseudo.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang pemilih pseudo

p:hover {
  background: white;
  color: black;
}

Pemilih yang kompleks

Anda telah melihat array pemilih yang sangat luas, tetapi terkadang, Anda memerlukan kontrol yang lebih mendetail dengan CSS. Di sinilah pemilih yang kompleks berperan untuk membantu.

Perlu diingat pada tahap ini, meskipun pemilih berikut memberi kita lebih banyak kekuatan, kita hanya dapat turun ke bawah, yang memilih elemen turunan. Kami tidak dapat menargetkan ke atas dan memilih elemen induk. Kita akan membahas apa itu cascade dan cara kerjanya di pelajaran selanjutnya.

Kombinasi

Penggabungan adalah apa yang berada di antara dua pemilih. Misalnya, jika pemilih adalah p > strong, kombinatornya adalah karakter >. Pemilih yang menggunakan kombinator ini membantu Anda memilih item berdasarkan posisinya dalam dokumen.

Pengombinator turunan

Untuk memahami kombinator turunan, Anda harus terlebih dahulu memahami elemen induk dan turunan.

<p>A paragraph of text with some <strong>bold text for emphasis</strong>.</p>

Elemen induk adalah <p> yang berisi teks. Di dalam elemen <p> tersebut terdapat elemen <strong>, yang menebalkan kontennya. Karena berada di dalam <p>, elemen ini adalah elemen turunan.

Kombinator turunan memungkinkan kita menargetkan elemen turunan. Tindakan ini menggunakan spasi () untuk memerintahkan browser mencari elemen turunan:

p strong {
  color: blue;
}

Cuplikan ini memilih semua elemen <strong> yang hanya merupakan elemen turunan dari elemen <p>, sehingga menjadikannya biru secara berulang.

Efek ini divisualisasikan dengan lebih baik dalam contoh di atas, menggunakan pemilih kombinator, .top div. Aturan CSS tersebut menambahkan padding kiri ke elemen <div> tersebut. Karena kombinator bersifat rekursif, semua elemen <div> yang ada di .top akan memiliki padding yang sama yang diterapkan padanya.

Lihat panel HTML dalam demo ini untuk melihat bagaimana elemen .top memiliki beberapa elemen turunan <div> yang dengan sendirinya memiliki elemen turunan <div>.

Penggabungan saudara berikutnya

Anda dapat mencari elemen yang segera mengikuti elemen lain menggunakan karakter + dalam pemilih.

Untuk menambahkan ruang antarelemen yang ditumpuk, gunakan kombinator seinduk berikutnya untuk menambahkan ruang hanya jika elemen merupakan saudara berikutnya dari elemen turunan .top.

Anda dapat menambahkan margin ke semua elemen turunan .top, menggunakan pemilih berikut:

.top * {
  margin-top: 1em;
}

Masalah pada hal ini adalah karena Anda memilih setiap elemen turunan dari .top, aturan ini berpotensi menciptakan ruang tambahan yang tidak perlu. Kobinator seinduk berikutnya, yang dikombinasikan dengan pemilih universal, tidak hanya memungkinkan Anda mengontrol elemen yang mendapatkan ruang, tetapi juga menerapkan ruang ke elemen apa pun. Hal ini memberi Anda fleksibilitas jangka panjang, terlepas dari elemen HTML yang muncul di .top.

Penggabungan seinduk berikutnya

Kombinator berikutnya sangat mirip dengan pemilih seinduk berikutnya. Namun, gunakan karakter ~, bukan karakter +. Perbedaannya adalah bahwa suatu elemen hanya harus mengikuti elemen lain dengan induk yang sama, bukan menjadi elemen berikutnya dengan induk yang sama.

Kombinator berikutnya memberikan tingkat kekakuan yang sedikit lebih rendah, yang berguna dalam konteks seperti contoh di atas, yang memungkinkan kita mengubah warna tombol kustom saat kotak centang terkait memiliki status :checked.

Pengombinator turunan

Kombinator turunan (juga dikenal sebagai turunan langsung) memungkinkan Anda lebih banyak kontrol atas rekursi yang disertakan dengan pemilih kombinator. Dengan menggunakan karakter >, Anda membatasi pemilih kombinator untuk menerapkan hanya ke turunan langsung.

Pertimbangkan contoh pemilih seinduk sebelumnya dan berikutnya. Ruang akan ditambahkan ke setiap seinduk berikutnya, tetapi jika salah satu elemen tersebut juga memiliki elemen yang setara berikutnya sebagai turunan, hal ini dapat mengakibatkan spasi tambahan yang tidak diinginkan.

Untuk mengatasi masalah ini, ubah pemilih yang setara untuk menggabungkan kombinator turunan: > * + *. Aturan sekarang hanya akan berlaku untuk turunan langsung .top.

Pemilih gabungan

Anda dapat menggabungkan pemilih untuk meningkatkan kekhususan dan keterbacaan. Misalnya, untuk menargetkan elemen <a>, yang juga memiliki class .my-class, tulis perintah berikut:

a.my-class {
  color: red;
}

Ini tidak akan menerapkan warna merah ke semua link dan juga hanya akan menerapkan warna merah ke .my-class if berada di elemen <a>. Untuk mengetahui informasi selengkapnya, lihat modul kekhususan.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang pemilih yang kompleks

section.awesome {
  border: 1px solid hotpink;
}

Referensi

• Referensi pemilih CSS
• Game pemilih interaktif
• Referensi class pseudo dan elemen pseudo
• Alat yang menerjemahkan pemilih CSS menjadi penjelasan dalam bahasa Inggris sederhana