Pemilih

Podcast CSS - 002: Pemilih

Jika ada beberapa teks yang ingin Anda perbesar dan merah jika itu adalah paragraf pertama dalam sebuah artikel, Bagaimana Anda 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 menyediakan banyak pilihan untuk memilih elemen dan menerapkan aturan pada elemen tersebut, dari yang sangat sederhana hingga 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.

Gambar aturan CSS dengan pemilih .my-css-rule.

Dalam aturan CSS ini, selector-nya 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 sederhana menargetkan elemen HTML plus class, ID, dan atribut lain yang dapat ditambahkan ke tag HTML.

Pemilih universal

Dukungan Browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Sumber

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

* {
  color: hotpink;
}

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

Pemilih jenis

Dukungan Browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Sumber

Pemilih jenis mencocokkan dengan elemen HTML secara langsung.

section {
  padding: 2em;
}

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

Pemilih class

Dukungan Browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Sumber

Elemen HTML dapat memiliki satu atau beberapa item yang ditentukan di atribut class. Tujuan pemilih class cocok dengan elemen apa pun yang memiliki kelas tersebut diterapkan padanya.

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

Setiap elemen yang menerapkan class padanya akan berwarna merah:

.my-class {
  color: red;
}

Perhatikan bagaimana . hanya ada di CSS, bukan HTML. Hal ini karena karakter . menginstruksikan bahasa CSS untuk mencocokkan anggota atribut class. Ini adalah pola umum dalam CSS, di mana karakter khusus, atau satu set karakter, digunakan untuk menentukan tipe pemilih.

Elemen HTML yang memiliki class .my-class akan tetap dicocokkan dengan aturan CSS di atas, meskipun kode tersebut 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, dan bukan mencocokkan class tersebut secara persis.

Pemilih ID

Dukungan Browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Sumber

Elemen HTML dengan atribut id harus menjadi satu-satunya elemen di halaman yang memiliki nilai ID tersebut. Anda memilih elemen dengan ID selector 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>

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

Pemilih atribut

Dukungan Browser

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.

Sumber

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 mengapit pemilih dengan 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>

Daripada mencari nilai tertentu data-type, Anda juga dapat mencari elemen yang memiliki atribut, apa pun 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 Anda.

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

Artinya, jika elemen HTML memiliki data-type dari Primary, bukannya primary, teks tidak akan berwarna merah. Anda dapat melakukan sebaliknya—ketidakpekaan huruf besar/kecil—dengan menggunakan operator i.

Bersama dengan operator kasus, Anda memiliki akses ke operator yang mencocokkan bagian {i>string<i} 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;
}
Dalam demo ini, operator `$` di pemilih atribut kami mendapatkan jenis file dari atribut `href`. Hal ini memungkinkan Anda untuk memberi awalan pada label—berdasarkan jenis file tersebut—menggunakan elemen pseudo.

Pemilih pengelompokan

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

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

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

Menguji pemahaman Anda

Uji pengetahuan Anda tentang pemilih sederhana

* {}

Jenis pemilih sederhana apa yang digunakan dalam cuplikan di atas?

atribut
[] digunakan untuk pemilih sederhana atribut.
ID
# digunakan untuk pemilih sederhana ID.
universal
* adalah pemilih sederhana universal.
class
. digunakan untuk pemilih sederhana class.
 
div {}

Jenis pemilih sederhana apa yang digunakan dalam cuplikan di atas?

class
. digunakan untuk pemilih sederhana class.
jenis
Nama element digunakan untuk pemilih sederhana jenis.
atribut
Tanda kurung siku [] digunakan untuk pemilih sederhana atribut.
ID
# digunakan untuk pemilih sederhana ID.

Class Pseudo dan elemen pseudo

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

Class Pseudo

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

Misalnya, elemen HTML dapat diarahkan ke atas dengan kursor mouse oleh pengguna atau elemen turunan juga dapat diarahkan oleh pengguna. Untuk situasi tersebut, gunakan class semu :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 class pseudo.

Elemen semu

Elemen semu berbeda dari kelas semu karena alih-alih merespons status platform, mereka bertindak seolah-olah mereka menyisipkan elemen baru dengan CSS. Elemen semu juga secara sintaksis berbeda dari kelas semu, karena alih-alih menggunakan satu titik dua (:), kami menggunakan titik dua (::).

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

Seperti dalam demo di atas, di mana Anda memberi awalan label tautan dengan jenis file itu, Anda dapat menggunakan elemen semu ::before untuk menyisipkan konten di awal elemen, atau elemen semu ::after untuk menyisipkan konten di akhir elemen.

Namun, elemen semu tidak terbatas pada menyisipkan konten. Anda juga dapat menggunakannya untuk menargetkan bagian tertentu dari elemen. Misalnya, Anda memiliki sebuah daftar. Gunakan ::marker untuk menata 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 menata gaya konten yang telah ditandai oleh pengguna.

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

Pelajari lebih lanjut di modul tentang elemen pseudo.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang pemilih pseudo

Berapa banyak titik dua menggunakan pemilih elemen semu?

:
Satu : digunakan untuk menargetkan class semu.
::
Dua :: digunakan untuk menargetkan elemen pseudo.
:::
Hal ini tidak valid dan tidak menargetkan apa pun.
 
p:hover {
  background: white;
  color: black;
}

Jenis pemilih pseudo apa yang digunakan dalam cuplikan di atas?

Class Pseudo
Satu : digunakan untuk menargetkan class semu.
Elemen semu
Dua :: digunakan untuk menargetkan elemen pseudo.

Pemilih kompleks

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

Perlu diingat bahwa meskipun pemilih berikut memberi kita lebih banyak kekuatan, kita hanya bisa mengalir ke bawah, dengan memilih elemen turunan. Kami tidak dapat menargetkan ke atas dan memilih elemen induk. Kami membahas tentang air terjun dan cara kerjanya dalam pelajaran selanjutnya.

Kombinator

Kombinator 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.

Kombinasi 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 membuat kontennya tebal. Karena berada di dalam <p>, ini adalah elemen turunan.

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

p strong {
  color: blue;
}

Cuplikan ini memilih kesemua elemen <strong> yang merupakan elemen turunan dari elemen <p> saja, membuatnya berwarna biru secara rekursif.

Karena kombinator turunan bersifat rekursif, padding yang ditambahkan ke setiap elemen turunan diterapkan, sehingga menghasilkan efek bergilir.

Efek ini lebih terlihat 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 <div> elemen turunan.

Kombinasi saudara berikutnya

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

Untuk menambahkan ruang di antara elemen yang ditumpuk, menggunakan kombinator saudara berikutnya untuk menambahkan spasi hanya jika suatu elemen adalah saudara berikutnya dari elemen turunan .top.

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

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

Masalahnya adalah karena Anda memilih setiap elemen turunan .top, aturan ini berpotensi menciptakan ruang tambahan yang tidak diperlukan. Kombinasi saudara berikutnya, digabungkan dengan pemilih universal yang memungkinkan Anda tidak hanya mengontrol elemen apa yang mendapatkan ruang, tetapi juga menerapkan spasi ke elemen apa pun. Hal ini memberi Anda fleksibilitas jangka panjang, terlepas dari elemen HTML yang muncul di .top.

Berikutnya - kombinator seinduk

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

Gunakan pemilih berikutnya beserta class pseudo `:check` untuk membuat elemen tombol CSS murni.

Kombinasi berikutnya ini memberikan sedikit kekakuan, yang berguna dalam konteks seperti contoh di atas, tempat kita mengubah warna tombol kustom jika kotak centang terkaitnya memiliki status :checked.

Kombinasi turunan

Kombinasi 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 agar hanya diterapkan ke turunan langsung.

Pertimbangkan contoh pemilih saudara sebelumnya, yang berikutnya. Ruang ditambahkan ke setiap saudara berikutnya, tetapi jika salah satu elemen tersebut juga memiliki elemen yang seinduk berikutnya sebagai turunan, hal itu dapat mengakibatkan ruang ekstra yang tidak diinginkan.

Untuk mengatasi masalah ini, ubah pemilih saudara berikutnya untuk menggabungkan kombinator turunan: > * + *. Aturan tersebut sekarang hanya akan berlaku untuk turunan langsung dari .top.

Pemilih gabungan

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

a.my-class {
  color: red;
}

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

Menguji pemahaman Anda

Uji pengetahuan Anda tentang pemilih yang kompleks

Manakah dari simbol berikut yang bukan kombinator pemilih?

>
Kombinasi turunan langsung.
÷
Tidak valid, bukan simbol CSS.
+
Kombinasi saudara kandung berikutnya.
*
Pemilih sederhana yang universal ini.
.
Pemilih sederhana class.
 
section.awesome {
  border: 1px solid hotpink;
}

Pemilih di atas adalah contoh...

Kombinator
Simbol yang digunakan untuk menggabungkan pemilih menjadi simbol yang lebih spesifik.
Pemilih gabungan
Saat 2 atau lebih pemilih digunakan bersama, tanpa kombinator, untuk membuat pemilih yang lebih spesifik.
Terminator
Bukan tipe pemilih, tapi sepertinya bukan? 🤖

Resource