Pada tutorial sebelumnya, kita sudah membahas Tutorial Belajar CSS Bagian 1 : Apa Itu CSS ?, pada tutorial kali ini kita akan mempelajari beberapa jeis selector CSS.
CSS terdiri dari kode aturan gaya yang diinterpretasikan oleh browser dan kemudian diterapkan ke elemen terkait dalam dokumen Anda.
Aturan style dibuat dari 3 bagian :
- Selector – Selector adalah tag HTML tempat style akan diterapkan. Ini bisa berupa tag apa saja seperti <h1> atau <table> dll.
- Properti – Properti adalah jenis atribut dari tag HTML. Sederhananya, semua atribut HTML diubah menjadi properti CSS. Bisa berupa color, border, font, dll.
- Value – Value adalah nilai dari properti. Misalnya, properti color dapat memiliki value red atau # F1F1F1 dll.
Anda dapat Menyusun kode CSS sebagai berikut :
selector { property: value }
Contoh – Anda bisa menentukan border dari tabel dengan kode CSS sebagai berikut :
table{ border :1px solid #C00; }
Berdasarkan kode ini, maka :
- tag table berfungsi sebagai selector
- border berdungsi sebagai property
- 1px solid # C00 adalah value dari property border.
Anda dapat menentukan selector mana yang ingin Anda berikan style. Jenis selector sendiri dapat dibagi menjadi beberapa bagian, mari ita bahas satu per satu.
Type Selectors
Ini adalah jenis selector seperti pada contoh di atas. Mari kita lihat 1 contoh lagi, kali ini kita akan memberi style untuk tag h1 (heading 1) :
h1 {
color: #36CFFF;
}
Pada kode di atas, artinya kita memberikan perintah agar dokumen yang memiliki tag h1 diberikan warna dengan kode warna #36CFFF.
Universal Selector
Ini adalah selector yang paling kuat di CSS, namun jarang dipergunakan. Selector ini menggunakan kode * yang artinya semua tag HTML akan terpengaruh oleh kode CSS.
* {
color: #000000;
}
Pada kode di atas, artinya kita memberikan perintah agar dokumen apapun tag HTML nya diberi warna dengan kode warna #000000 (hitam).
Descendant Selector
Misalkan Anda ingin menerapkan aturan style ke elemen tertentu, yang hanya terletak di dalam elemen tertentu.
Seperti contoh berikut, aturan style akan diterapkan ke elemen <em>, hanya jika tag <em> berada di dalam tag <ul>.
ul em {
color: #000000;
}
Pada kode di atas, artinya kita memberikan perintah agar dokumen yang menggunakan tag <em> yang diapit oleh tag <ul> diberi wana hitam.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
div h2 {
color: red;
}
p em {
color: blue;
}
body h1 {
color: green;
}
</style>
</head>
<body>
<h1>Ini adalah Judul Belajar CSS</h1>
<p>Ini adalah materi belajar CSS.</p>
<div>
<h2>Ini adalah sub-judul belajar CSS</h2>
<p><em>Ini adalah konten </em>di dalam tag div</p>
<h2>Ini adalah sub-judul di dalam tag div</h2>
</div>
<h2>Header h2 di luar tag div</h2>
</body>
</html>
Class Selector
Anda dapat menentukan aturan gaya berdasarkan atribut class elemen. Semua elemen yang memiliki class tersebut akan distyle sesuai dengan aturan yang ditentukan.
Untuk membuat class selector kita cukup menbahkan tanda . (titik) di depan selector yang kita buat.
.merah {
color: red;
}
Jika tag HTML memiliki atribut class=.merah, maka konten untuk tag tersebut akan diubah menjadi berwarna hitam.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
.judul {
color: red;
}
.subjudul {
color: blue;
}
.konten {
color:brown;
}
</style>
</head>
<body>
<h1 class="judul">Ini judul berwarna merah</h1>
<h2 class="subjudul">Ini sub-judul berwarna biru.</h2>
<div>
<h2 class="judul">Ini sub-judul ke-2 berwarna merah lagi</h2>
<p class="konten">Ini konten berwarna hijau</p>
</div>
</body>
</html>
Class selector dapat digunakan berulang-ulang pada elemen HTML yang berbeda.
ID Selector
Ini sama dengan class selector, bedanya ID Selector hanya bisa digunakan untuk 1 elemen saja, tidak bisa digunakan untuk lebih dari 1 elemen. Semua elemen yang memiliki id tersebut akan diformat sesuai dengan aturan yang ditentukan.
#merah {
color: red;
}
Kode CSS di atas membuat konten menjadi berwarna merah untuk setiap elemen yang memiliki atribut id #merah.
Berikut contoh lengkapnya :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
#judul {
color: red;
}
#subjudul {
color: blue;
}
#konten {
color:brown;
}
</style>
</head>
<body>
<h1 id="judul">Ini judul berwarna merah</h1>
<h2 id="subjudul">Ini sub-judul berwarna biru.</h2>
<div>
<h2>Ini sub-judul ke-2 berwarna merah lagi</h2>
<p id="konten">Ini konten berwarna hijau</p>
</div>
</body>
</html>
Perhatikan pada contoh di atas, ID hanya bisa digunakan 1 kali saja untuk 1 elemen. Berbeda dengan class yang bisa digunakan untuk banyak elemen.
Child Selector
Di atas tadi kita sudah membahas Descendant Selector, yang fungsinya memberikan style pada elemen turunan.
Ada satu jenis selector lagi, yang sangat mirip dengan fungsi turunan ini, tetapi memiliki fungsi yang berbeda.
Perhatikan contoh berikut :
body > p {
color: red;
}
Aturan ini akan membuat semua paragraf menjadi merah, namun dengan syarat, jika elemen ini adalah anak pertama langsung dari elemen <body>.
Paragraf lain yang dimasukkan ke dalam elemen lain seperti <div> atau <td> tidak akan terpengaruh oleh aturan ini.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
div > p {
color: red;
}
</style>
</head>
<body>
<h1>Ini adalah Judul Belajar CSS</h1>
<p>Ini adalah materi belajar CSS.</p>
<div>
<h2>Ini adalah sub-judul belajar CSS</h2>
<p>Ini adalah konten-1 di dalam tag div berwarna merah</p>
<p>Ini adalah konten-2 di dalam tag div berwarna merah</p>
<h2>Ini adalah sub-judul di dalam tag div</h2>
</div>
<h2>Header h2 di luar tag div</h2>
</body>
</html>
Attribute Selector
Anda juga dapat menerapkan style ke elemen HTML dengan atribut tertentu. Contoh aturan style di bawah ini, akan cocok dengan semua elemen input yang memiliki atribut type dengan nilai text :
input[type = "text"] {
color: red;
}
Keuntungan metode ini adalah elemen <input type = “submit” /> tidak terpengaruh, dan warna hanya diterapkan ke kolom input yang memiliki nilai teks.
Ada aturan berikut yang diterapkan ke pemilih atribut.
- p [lang] – Memilih semua elemen paragraf dengan atribut lang.
- p [lang = “fr”] – Memilih semua elemen paragraf yang atribut langnya memiliki nilai persis “fr”.
- p [lang ~ = “fr”] – Memilih semua elemen paragraf yang atribut langnya mengandung kata “fr”.
- p [lang | = “en”] – Memilih semua elemen paragraf yang atribut langnya berisi nilai yang persis “en”, atau dimulai dengan “en-“.
Aturan Mutiple Style
Anda mungkin perlu mengatur lebih dari satu style untuk satu elemen.
Berikut ini contoh pemberian lebih dari satu atribut untuk 1 elemen HTML h1:
h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
Di sini semua pasangan property dan value dipisahkan oleh titik koma (;).
Anda dapat menulis kode dalam 1 baris Panjang, atau baris terpisah.
Agar kode CSS lebih mudah dibaca, disarankan untuk menulis kode dalam baris terpisah.
Untuk sementara, tidak usah bingung dulu dengan property dan value pada contoh, kita akan membahasanya pada tutorial selanjutnya.
Grouping Selector
Anda dapat menerapkan style yang sama ke beberapa selector yang berbeda. Pisahkan saja selector dengan koma, seperti yang terlihat dalam contoh berikut :
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
Seluruh aturan style akan berlaku untuk elemen h1, h2 dan h3.
Anda juga dapat menggunakan cara ini untuk ID selector seperti yang ditunjukkan di bawah ini :
#content, #footer, #supplement {
position: absolute;
left: 510px;
width: 200px;
}
Element Spesific Selector
Ini mirip dengan grup selector, dimana kita menggabungkan beberapa selector namun dengan tujuan lebih fokus terhadap elemen yang ingin di style.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
h2.judul {
color: red;
}
</style>
</head>
<body>
<h1>Ini adalah Judul Belajar CSS</h1>
<p>Ini adalah materi belajar CSS.</p>
<div>
<h2 class="judul">Ini adalah sub-judul belajar CSS, berwarna merah</h2>
<p>Ini adalah konten-1 di dalam tag div</p>
<p>Ini adalah konten-2 di dalam tag div</p>
<h2>Ini adalah sub-judul di dalam tag div</h2>
</div>
<h2 class="judul">Header h2 di luar tag div, berwarna merah lagi</h2>
</body>
</html>
Pada contoh di atas bisa Anda lihat bahwa pada setiap tag h2 dengan class judul memiliki warna merah.
Itu dia beberapa selector yang digunakan dalam pembuatan kode CSS, semoga tutorial ini bisa membantu Anda memahami jenis selctor CSS.
