Selector CSS memilih elemen HTML yang ingin diberi style.
Selector CSS
Selector CSS digunakan untuk menemukan (atau memilih) elemen HTML yang ingin diberi style.
Selector CSS dapat dibagi menjadi lima kategori:
- Simple selectors (memilih elemen berdasarkan nama, id, class)
- Combinator selectors (memilih elemen berdasarkan hubungan tertentu dengan elemen lain)
- Pseudo-class selectors (memilih elemen berdasarkan kondisi tertentu)
- Pseudo-elements selectors (memilih dan memberi style pada bagian elemen)
- Attribute selectors (memilih elemen berdasarkan atribut atau nilai atribut)
Pada bagian ini akan dijelaskan selector CSS paling dasar.
Selector Elemen CSS
Elemen selector memilih elemen HTML berdasarkan nama elemen (nama tag).
Contoh
Semua elemen <p> (tag p) pada halaman tersebut akan diubah menjadi rata tengah, dengan warna teks merah:
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Setiap paragraf dalam halaman ini akan diberikan style yang sama.</p>
<p id="para1">Paragraf ini juga!</p>
<p>Dan paragraf ini juga!</p>
</body></html>Selector Id CSS
Selector Id menggunakan atribut id dari elemen HTML untuk memilih elemen tertentu.
Id suatu elemen bersifat unik di dalam suatu halaman, jadi selector id digunakan untuk memilih satu elemen.
Untuk memilih elemen dengan id tertentu, tulis karakter hash (#), diikuti dengan id elemen.
Contoh
Style CSS di bawah akan diterapkan ke elemen HTML dengan id=”para1″:
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Halo Dunia!</p>
<p>Paragraf ini tidak diberikan style karena tidak mempunyai atribut id dengan nilai "para".</p>
</body></html>Selector Class CSS
Selector class memilih elemen HTML dengan atribut class tertentu.
Untuk memilih elemen dengan class tertentu, tulis karakter titik (.), diikuti dengan nama class .
Contoh
Dalam contoh ini semua elemen HTML dengan class=”center” akan berwarna merah dan rata tengah:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Judul berwarna merah dan rata tengah</h1>
<p class="center">Paragraf merah dan rata tengah.</p>
</body></html>Selain itu juga dapat memilih kombinasi nama elemen (nama tag) dan atribut class.
Contoh
Dalam contoh ini hanya elemen <p> dengan class=”center” akan berwarna merah dan rata tengah:
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Judul ini tidak diberikan style</h1>
<p class="center">Paragraf ini akan berwarna merah dan rata tengah.</p>
</body></html>Elemen HTML juga bisa mempunyai lebih dari satu class.
Contoh
Dalam contoh ini, elemen <p> ketiga mempunyai dua class (center dan large) dan akan memakai style untuk selector p.center dan p.large:
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class="center">Judul ini tidak diberikan style</h1>
<p class="center">Paragraf ini akan berwarna merah dan rata tengah.</p>
<p class="center large">Paragraf ini akan berwarna merah, rata tengah dan ukuran font besar.</p>
</body></html>Selector Universal CSS
Selector universal (*) memilih semua elemen HTML pada halaman.
Contoh
Aturan CSS di bawah ini akan mempengaruhi setiap elemen HTML pada halaman:
<!DOCTYPE html>
<html>
<head>
<style>
* {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Halo dunia!</h1>
<p>Setiap elemen pada halaman akan diberikan style yang sama.</p>
<p id="para1">Paragraf ini juga!</p>
<p>Dan paragraf ini juga!</p>
</body></html>Pengelompokan Selector CSS
Pengelompokan atau grup selector akan memilih semua elemen HTML dengan definisi style yang sama.
Pada style CSS berikut diperlihatkan elemen h1, h2, dan p memiliki definisi style yang sama.
Sebaiknya gunakan pengelompokan selector, untuk meminimalkan kode.
Untuk mengelompokkan selector, pisahkan setiap selector dengan koma.
Contoh
Dalam contoh ini, selector untuk elemen h1, h2 dan p dikelompokkan menjadi satu:
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Halo Dunia!</h1>
<h2>Judul lebih kecil!</h2>
<p>Ini adalah sebuah paragraf.</p>
</body></html>Referensi Semua Selector CSS
Selector id (#)
Contoh
Style elemen dengan id=”firstname”:
<!DOCTYPE html>
<html>
<head>
<style>
#firstname {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Demo selector id (#) </h1>
<div class="intro">
<p id="firstname">Nama saya Donald.</p>
<p id="kota asal">Saya tinggal di Duckburg.</p>
</div>
<p>Sahabatku adalah Miki.</p>
</body></html>Definisi dan Penggunaan
selector #id memberi style pada elemen dengan id yang telah ditentukan.
Selector class (.)
Contoh
Pilih dan ubah style pada semua elemen dengan class=”intro”:
<!DOCTYPE html>
<html>
<head>
<style>
.intro {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Demo selector class (.)</h1>
<div class="intro">
<p>Nama saya Donald.</p>
<p>Saya tinggal di Duckburg.</p>
</div>
<p>Sahabatku adalah Miki.</p>
<p class="intro">Sahabatku adalah Miki.</p>
</body></html>Definisi dan Penggunaan
Selector class (.) memilih elemen dengan atribut class tertentu.
Untuk memilih elemen dengan class tertentu, tulis karakter titik (.), diikuti dengan nama class.
Perhatikan beberapa contoh di bawah ini.
Contoh 1
Style semua elemen <p> dengan class=”hometown”:
<!DOCTYPE html>
<html>
<head>
<style>
p.hometown {
background: yellow;
}
</style>
</head>
<body>
<h1>Demo selector class (.)</h1>
<p>Nama saya Donald.</p>
<p class="hometown">Saya tinggal di Ducksburg.</p>
<p>Nama saya Dolly.</p>
<p class="hometown">Saya juga tinggal di Ducksburg.</p>
</body></html>Contoh 2
Elemen <p> ini akan diberikan style sesuai dengan selector class=”center” dan class=”large”:
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1>Demo selector class (.)</h1>
<h1 class="center">Judul ini tidak diberikan style</h1>
<p class="center">Paragraf ini akan berwarna merah dan rata tengah.</p>
<p class="center large">Paragraf ini akan berwarna merah, rata tengah dan ukuran font besar.</p>
</body></html>Kombinasi Nama Elemen dan Atribut class
Contoh
Pilih dan style setiap elemen <p> dengan class “intro”:
<!DOCTYPE html>
<html>
<head>
<style>
p.intro {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Demo selector class (.)</h1>
<div class="intro">
<p>Nama saya Donald.</p>
<p>Saya tinggal di Duckburg.</p>
</div>
<p>Sahabatku adalah Miki.</p>
<p class="intro">Sahabatku adalah Miki.</p>
</body></html>Definisi dan Penggunaan
Selector kombinasi nama elemen dan atribut class digunakan untuk memilih elemen tertentu dengan atribut class tertentu.
CSS * Selector
Contoh
Pilih semua elemen, dan atur warna latar belakang menjadi kuning:
<!DOCTYPE html>
<html>
<head>
<style>
* {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Demo selector *</h1>
<div class="intro">
<p id="firstname">Nama saya Donald.</p>
<p id="kota asal">Saya tinggal di Duckburg.</p>
</div>
<p>Sahabatku adalah Miki.</p>
</body></html>Definisi dan Penggunaan
Selector * memilih semua elemen.
Selector * juga dapat memilih semua elemen di dalam elemen lain.
Contoh
Pilih semua elemen di dalam elemen <div> dan atur warna latar belakang menjadi kuning:
<!DOCTYPE html>
<html>
<head>
<style>
div * {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Demo selector *</h1>
<div class="intro">
<p id="firstname">Nama saya Donald.</p>
<p id="kota asal">Saya tinggal di Duckburg.</p>
</div>
<p>Sahabatku adalah Miki.</p>
</body></html>Selector Elemen CSS
Contoh
Pilih dan ubah semua style elemen <p>:
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Demo selector elemen </h1>
<div>
<p id="firstname">Nama saya Donald.</p>
<p id="kota asal">Saya tinggal di Duckburg.</p>
</div>
<p>Sahabatku adalah Miki.</p>
</body></html>Definisi dan Penggunaan
Selector elemen memilih semua elemen dengan nama elemen yang ditentukan.
Pengelompokan Selector
Contoh
Selector untuk elemen h2 dan p dikelompokkan menjadi satu :
<!DOCTYPE html>
<html>
<head>
<style>
h2, p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Demo pengelompokan selector</h1>
<h2>Selamat Datang di Beranda Saya</h2>
<div>
<p>Nama saya Donald.</p>
<p>Saya tinggal di Duckburg.</p>
</div>
<p>Sahabatku adalah Miki.</p>
</body></html>Definisi dan Penggunaan
Untuk mengelompokkan beberapa selector dengan style yang sama, pisahkan setiap selector nama elemen dengan koma.
Tutorial sebelumnya : Cara Menambahkan CSS di HTML
Tutorial setelahnya : Komentar CSS
Semua Tutorial CSS : Tutorial CSS