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
* {}
Jenis pemilih sederhana apa yang digunakan dalam cuplikan di atas?
div {}
Jenis pemilih sederhana apa yang digunakan dalam cuplikan di atas?
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?
p:hover { background: white; color: black; }
Jenis pemilih pseudo apa yang digunakan dalam cuplikan di atas?
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
Manakah dari simbol berikut yang bukan kombinator pemilih?
section.awesome { border: 1px solid hotpink; }
Pemilih di atas adalah contoh...