Pemilih

Jika Anda memiliki beberapa teks yang hanya ingin Anda buat 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 tersebut 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 sangat kompleks, untuk membantu menyelesaikan situasi seperti ini.

Bagian-bagian aturan CSS

Untuk memahami cara kerja pemilih dan perannya dalam CSS, Anda harus mengetahui bagian-bagian 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, pemilih 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 dicocokkan oleh pemilih. Aturan CSS dapat memiliki deklarasi dan pemilih sebanyak yang Anda inginkan.

Pemilih sederhana

Grup pemilih yang paling sederhana menargetkan elemen HTML beserta class, ID, dan atribut lainnya yang dapat ditambahkan ke tag HTML.

Pemilih universal

Browser Support

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

Source

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

Browser Support

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

Source

Pemilih jenis cocok dengan elemen HTML secara langsung.

section {
  padding: 2em;
}

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

Pemilih class

Browser Support

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

Source

Elemen HTML dapat memiliki satu atau beberapa item yang ditentukan dalam atribut class-nya. 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 akan berwarna merah:

.my-class {
  color: red;
}

Perhatikan bahwa . hanya ada di CSS dan bukan HTML. Hal ini karena karakter . menginstruksikan bahasa CSS untuk mencocokkan anggota atribut class. Ini adalah pola umum di CSS, dengan karakter khusus, atau kumpulan karakter, yang 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

Browser Support

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

Source

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>

Serupa dengan pemilih class ., gunakan karakter # untuk menginstruksikan CSS agar mencari elemen yang cocok dengan id yang mengikutinya.

Pemilih atribut

Browser Support

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

Source

Anda dapat mencari elemen yang memiliki atribut HTML tertentu, atau memiliki nilai tertentu untuk atribut HTML, menggunakan pemilih atribut. Beri tahu CSS untuk mencari atribut dengan menggabungkan 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 data-type tertentu, 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 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 cocok dengan 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;
}
Dalam demo ini, operator `$` di pemilih atribut kita mendapatkan jenis file dari atribut `href`. Hal ini memungkinkan awalan label—berdasarkan jenis file tersebut—menggunakan elemen pseudo.

Pemilih pengelompokan

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

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

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

Memeriksa pemahaman Anda

Uji pengetahuan Anda tentang pemilih sederhana

* {}

Jenis pemilih sederhana apa yang digunakan dalam cuplikan di atas?

ID
class
atribut
universal
div {}

Jenis pemilih sederhana apa yang digunakan dalam cuplikan di atas?

atribut
class
ID
jenis

Pseudo-class dan pseudo-elemen

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

Pseudo-class

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

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

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

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

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

Namun, elemen pseudo tidak terbatas pada penyisipan konten. Anda juga dapat menggunakannya untuk menargetkan bagian tertentu dari elemen. Misalnya, Anda memiliki daftar. Gunakan ::marker untuk menata gaya setiap poin butir (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 pseudo-elemen.

Memeriksa pemahaman Anda

Uji pengetahuan Anda tentang pemilih pseudo

Berapa banyak titik dua yang digunakan pemilih elemen pseudo?

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

Jenis pemilih pseudo apa yang digunakan dalam cuplikan di atas?

Elemen semu
Pseudo-class

Pemilih kompleks

Anda telah melihat berbagai pemilih, tetapi terkadang, Anda memerlukan lebih banyak kontrol terperinci dengan CSS. Di sinilah pemilih kompleks akan membantu.

Pada tahap ini, perlu diingat bahwa meskipun pemilih berikut memberi kita lebih banyak kemampuan, kita hanya dapat melakukan cascading ke bawah, memilih elemen turunan. Kita tidak dapat menargetkan ke atas dan memilih elemen induk. Kita akan membahas definisi dan cara kerja cascade di pelajaran berikutnya.

Kombinator

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

Kombinator turunan

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

<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>, elemen ini merupakan elemen turunan.

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

p strong {
  color: blue;
}

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

Karena pengombinasi turunan bersifat rekursif, padding yang ditambahkan ke setiap elemen turunan akan diterapkan, sehingga menghasilkan efek yang berurutan.

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

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

Kombinator saudara berikutnya

Anda dapat mencari elemen yang langsung mengikuti elemen lain dengan menggunakan karakter + di pemilih.

Untuk menambahkan spasi di antara elemen yang ditumpuk, gunakan kombinator saudara berikutnya untuk menambahkan spasi hanya jika 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 membuat ruang tambahan yang tidak perlu. Kombinator saudara berikutnya, yang dicampur dengan pemilih universal, memungkinkan Anda tidak hanya mengontrol elemen mana yang mendapatkan ruang, tetapi juga menerapkan ruang ke elemen apa pun. Hal ini memberi Anda beberapa fleksibilitas jangka panjang, terlepas dari elemen HTML yang muncul di .top.

Kombinator saudara berikutnya

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

Gunakan pemilih berikutnya bersama dengan class semu `:checked` untuk membuat elemen tombol CSS murni.

Kombinator berikutnya ini memberikan sedikit fleksibilitas, yang berguna dalam konteks seperti contoh di atas, tempat kita mengubah warna tombol kustom saat kotak centang terkait memiliki status :checked.

Kombinator turunan

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

Pertimbangkan contoh pemilih saudara sebelumnya. Spasi ditambahkan ke setiap sibling berikutnya, tetapi jika salah satu elemen tersebut juga memiliki elemen sibling berikutnya sebagai turunan, hal ini dapat menyebabkan spasi tambahan yang tidak diinginkan.

Untuk mengatasi masalah ini, ubah pemilih saudara berikutnya untuk menyertakan pengombinator turunan: > * + *. Aturan ini sekarang hanya 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 kode berikut:

a.my-class {
  color: red;
}

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

Memeriksa pemahaman Anda

Uji pengetahuan Anda tentang pemilih kompleks

Manakah dari simbol berikut yang bukan merupakan pengombinator pemilih?

>
*
÷
+
.
section.awesome {
  border: 1px solid hotpink;
}

Pemilih di atas adalah contoh dari...

Kombinator
Terminator
Pemilih gabungan

Resource