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.

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

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

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

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

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

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;
}

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

* {}

div {}

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

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

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.

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.

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

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

Resource

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