Pada CSS,
terdapat 3 macam selector,
yaitu ID, class, dan tag HTML.
Contoh kode CSS
Selector ID diawali dengan
tanda #, selector class diawali
dengan tanda . (dot),
sedangkan selector tag HTML
tidak memerlukan tanda
awalan apapun. Cukup dengan
mengetikkan langsung nama
tag HTMLnya. Pada tutorial ini
akan dijelaskan semua hal
yang berhubungan dengan CSS
Selector.
Selector Class
Sebuah selector class dapat
digunakan pada lebih dari satu
tag HTML. Masukkan style CSS
dalam selector class jika
terdapat 2 atau lebih elemen/
tag HTML yang bisa memiliki
style yang sama dalam satu
halaman.
Contoh kode selector class:
[code lang='css']
.post{
background-color:#cdcdcd;
}
[/code]
Kode HTML untuk
menggunakan selector class:
<div class="post"> ... teks ...
</div>
Class .post bisa digunakan
lebih dari 1 kali pada sebuah
halaman. Contoh nyatanya
adalah blog-blog yang dibuat
dengan WordPress (baik
wordpress.com ataupun
wordpress.org). Coba buka
halaman awal sebuah blog
wordpress dan lihat kode
HTML halaman tersebut (pada
Firefox: View > Page Source).
Kemudian cari kata (CTRL+F)
class="post", maka akan
ditemukan lebih dari satu hasil
pencarian.
Selector ID
Kebalikan dari selector class,
selector ID hanya boleh
digunakan sekali pada satu
halaman.
Contoh kode selector ID:
[code lang='css']
#header{
background-color:silver;
padding:5px;
}
[/code]
Kode HTML untuk
menggunakan selector ID:
<div id="header">
majalahweb.com </div>
Selector ID digunakan hanya
untuk 1 elemen pada satu
halaman web. Misalnya saja ID
#header diatas hanya
digunakan sekali karena
dalam satu halaman web
hanya ada 1 header.
Jika Anda seorang
programmer, ID dalam HTML
ibaratnya sebuah variabel
dalam sebuah pemrograman.
Jika dalam pemrograman
tidak boleh ada 2 variabel
yang memiliki nama yang
sama dalam suatu blok kode,
begitu juga dengan HTML yang
tidak boleh ada elemen yang
memiliki nama ID yang sama
pada satu halaman web.
Selector HTML
Berbeda dengan selector ID
dan selector class, selector
HTML akan mempengaruhi tag
HTML yang diberi style. Untuk
lebih jelasnya, berikut contoh
kodenya:
[code lang='css']
p {
font-family: Arial;font-
size:10pt;
}
[/code]
Kode diatas akan membuat
semua tag <p> (paragraf)
agar ditampilkan
menggunakan font Arial
dengan ukuran 10pt (point).
Jadi tidak perlu menambahkan
atribut id="nama_id" ataupun
atribut class ="nama_class"
karena browser secara
otomatis akan mencari tag
yang akan diberi style.
BERMAIN DENGAN SELECTOR
Masih ada banyak cara untuk
memanfaatkan selector pada
CSS. Coba lihat beberapa
contoh berikut:
[code lang='css']
#header p {
font-family:Georgia;
}
h1.title {
font-size:large;
}
[/code]
Pada contoh pertama bisa
berarti bahwa style tersebut
akan berlaku pada semua tag
<p> yang ada didalam ID #
header. Contoh kode
HTMLnya:
<div id="header"><p>teks
teks</p></div>
Sedangkan pada contoh kedua
style akan berlaku pada
semua tag h1 yang memiliki
class title. Contoh kode
HTMLnya:
<h1 class="title">Judul title</
h1>
SELECTOR LAINNYA
Sedikit melangkah ke tingkat
lanjut, selain 3 selector utama
diatas (yang lebih umum
dipakai) masih terdapat
beberapa macam selector,
yaitu:
Selector Universal
Universal selector yang
dimaksud disini adalah
selector yang menggunakan
tanda *. Contoh kode CSS:
[code lang='css']
* {
line-height:1.5em;
}
blockquote{
font-family:Verdana;
}
blockquote * {
font-family:"Times New
Roman";
}
[/code]
Tanda * (asterisk) mengacu
pada semua element. Jadi,
pada blok kode yang pertama
bisa berarti bahwa “spasi
antar baris pada semua
elemen akan berukuran
1.5em“.
Pada style yang kedua,
potongan kode ini bisa berarti
“semua teks didalam
blockquote akan ditampilkan
dengan font Verdana“.
Sedangkan pada style yang
ketiga, tanda * berada setelah
selector HTML blockquote.
Potongan kode ini bisa berarti
“semua teks pada elemen
yang berada didalam
blockquote akan ditampilkan
dengan font Times New
Roman“. Untuk lebih jelas,
berikut contoh penggunaan
dalam kode HTML:
<blockquote>Halo dunia
<span>Ketikkan
sebuah kode</span> halo
dunia lagi.</blockquote>
Sesuai dengan kode HTML
diatas, teks yang berada
didalam tag <span> akan
ditampilkan menggunakan
font Times New Roman,
sedangkan sisanya
ditampilkan menggunakan
font Verdana.
Selector Atribut
Selector atribut
memungkinkan kita untuk
mengaplikasikan sebuah style
pada elemen HTML tertentu
dengan atribut tertentu.
Sebagai contoh, sebuah style
hanya untuk diaplikasikan
pada tag hyperlink (<a>) yang
memiliki atribut href, jadi tag
hyperlink yang tidak memiliki
atribut href tidak akan
mengikuti style yang sudah
ditentukan. Contoh kodenya :
[code lang='css']
a[href] {
color:green;
}
a[name] {
color:red;
}
[/code]
Berikut contoh dalam kode
HTML:
<a href=http://
majalahweb.com/
halamancontoh.html>
Halaman contoh</a>
<a name="bab2">Bab 2</a>
Pada contoh tag hyperlink
yang pertama, teks akan
berwarna hijau, mengikuti
style a[href]. Sedangkan pada
tag hyperlink yang kedua,
teks akan berwarna merah,
mengikuti style a[name].
Selector Atribut Dengan
Pencocokan Nilai Atribut
Selain itu, dengan selector
atribut juga dimungkinkan
untuk mengaplikasikan style
pada suatu elemen HTML
dengan nilai atribut tertentu.
Untuk lebih jelasnya, berikut
contoh kode CSS:
[code lang='css']
a[href="http://
majalahweb.com"] {
color:yellow;
}
[/code]
Dan contoh kode HTML:
<a href=http://
majalahweb.com>Warna
kuning</a> <a href=http://
yahoo.com>Entah warna
apa</a>
Hasilnya adalah hanya
hyperlink yang menuju ke
majalahweb.com saja yang
akan memiliki teks berwarna
kuning.
Selector Atribut Dengan
Mencocokkan Sebagian Nilai
Atribut
Mengaplikasikan style CSS ke
elemen HTML juga bisa
dilakukan dengan melakukan
pencocokan sebagian nilai dari
atribut. Untuk lebih jelasnya,
berikut kode CSSnya:
[code lang='css']
span[class~="error"] {
background-color:red;
}
[/code]
Style CSS diatas akan
diaplikasikan pada elemen
span yang nama classnya
memiliki kata error.
Misalnya : <span class="error
login"> .. teks .. </span>, atau
<span class="error
register"> .. teks .. </span>..
Selector Pseudo-element
Selector pseudo-element
digunakan untuk
menambahkan efek tertentu
pada sebuah selector. Jika
Anda bingung dengan istilah
pseudo-element, jangan
terlalu dipikirkan. Untuk
sekarang terima dulu kata
pseudo-element sebagai
sebuah istilah dalam CSS.
Syntax dari penggunaan
pseudo-element adalah
sebagai berikut:
[code lang='css']
selector:nama_pseudo-
element {
property:value;
}
[/code]
Atau bisa juga dengan
manambahkan nama class
setelah nama selector,
menjadi:
selector.class:nama_pseudo-
element {
property:value;
}
Berikut adalah beberapa
nama pseudo-element:
:first-line. Memberikan style
tertentu pada baris
pertama dalam sebuah
teks.
:first-letter. Memberikan
style tertentu pada huruf
pertama pada sebuah teks.
:before. Menambahkan
sebuah content sebelum
nama elemen yang
dijadikan selector.
:after. Menambahkan
sebuah content sesudah
nama elemen yang
dijadikan selector.
Pseudo-element :before
dan :after tidak bekerja pada
browser Internet Explorer
(sewaktu tutorial ini dicoba
menggunakan Internet
Explorer 6 ). Berikut contoh
style CSS yang menggunakan
pseudo-element:
p:first-line{
text-transform:uppercase;
}
Kode HTML:
<p>Ini adalah elemen
paragraf yang menggunakan
pseudo-element.</p>
Pada contoh diatas, browser
akan menampilkan baris
pertama dengan huruf besar.
Jika ukuran browser Anda
lebar dan menampilkan
semua teks dalam satu baris,
maka semua teks akan
ditampilkan huruf besar.
Untuk melihat efek dari style
CSS diatas, coba resize ukuran
browser menjadi lebih sempit
sehingga teks pada paragraf
tersebut dipisah menjadi 2
baris.
Beberapa yang perlu diingat,
pseudo-element :first-line
hanya bisa diaplikasikan pada
element yang bersifat block-
level. Pada tutorial berikutnya
akan saya jelaskan apa itu
block-level element. Beberapa
properties yang bisa
diaplikasikan pada pseudo-
element :first-line adalah
sebagai berikut: font, color,
background, word-spacing,
letter-spacing, text-
decoration, vertical-align,
text-transform, line-height,
clear.
Contoh berikutnya adalah
pseudo-element
menggunakan :first-letter:
[code lang='css']
p:first-letter{
font-size:16pt;
}
[/code]
Style CSS diatas akan
menampilkan huruf pertama
dari sebuah paragraf dengan
ukuran 16 point.
[code lang='css']
div.feed:before{
content:url(feed-icon.png);
}
div.feed:after{
content:url(feed-icon.png);
}
[/code]
Style diatas akan diaplikasikan
pada kode HTML seperti
dibawah ini:
<div
class=”feed”>Berlangganan
feed</div>
Hasilnya adalah sebuah teks
“Berlangganan feed” dimana
sebelum (:before) dan
sesudah (:after) teks tersebut
akan ditambahkan gambar
feed-icon.png. Seperti yang
sudah disebutkan
sebelumnya, :before
dan :after tidak akan bekerja
pada browser Internet
Explorer (saat dicoba versi 6).
Sumber penjelasan tentang
pseudo-element:
CSS pseudo-element
What is CSS pseudo-
element?
Selector Pseudo-class
Syntax dari pseudo-class sama
dengan syntax pseudo-
element, yaitu:
[code lang='css']
selector:nama_pseudo-class {
property:value;
}
[/code]
Atau bisa juga:
[code lang='css']
selector.class:nama_pseudo-
class {
property:value;
}
[/code]
Berikut beberapa nama-nama
pseudo-class:
:link. Memberikan style
pada link yang belum
dikunjungi.
:visited. Memberikan style
pada link yang telah
dikunjungi.
:hover. Memberikan style
pada elemen yang disorot
oleh pointer/mouse.
:active. Memberikan style
pada elemen yang berada
pada keadaan diaktifkan.
:focus. Memberikan style
pada elemen ketika elemen
tersebut menerima focus.
:first-child. Memberikan
style pada elemen anak
pertama pada dari elemen
lainnya.
:lang. Menentukan bahasa
yang digunakan pada
elemen tersebut.
Bermain Dengan Link
Dengan pseudo-
class :link, :visited, :hover,
dan :active, kita bisa
menambahkan efek pada
sebuah link. Misalkan ada
sebuah kode CSS seperti
berikut:
[code lang='css']
a:link{
color:orange;
}
a:visited{
font-style:italic;
}
a:hover{
font-weight:bold;
}
a:active{
color:blue;
}
[/code]
Style diatas akan diaplikasikan
pada sebuah link dengan kode
HTML sebagai berikut:
<a href="http://
www.google.com">Google</
a>
Maka, link tersebut secara
default akan memiliki warna
oranye, saat di-hover (disorot
dengan pointer/mouse) font
akan ditampilkan menjadi
cetak tebal, saat di-klik
sekilas akan berubah menjadi
warna biru, dan setelah link
tersebut dikunjungi akan
berubah warnanya menjadi
warna merah.
Pseudo-class Lainnya
Contoh kode CSS:
span:first-child{
font-weight:bold;
}
Contoh kode HTML:
<body><span>Teks pertama</
span><span>Teks kedua</
span></body>
Pada contoh diatas, kata
“Teks pertama” akan dicetak
tebal sesuai dengan style yang
sudah dibuat. Sedangkan kata
“Teks kedua” tidak akan
dicetak tebal karena tidak
cocok dengan selector yang
telah didefinisikan, dimana
selector hanya
mengaplikasikan style pada
elemen span pertama pada
sebuah elemen (dalam hal ini
elemen body).
Contoh kedua penggunakan
pseudo-class :first-child.
Berikut contoh kode CSS:
p > span:first-child{
font-style:italic;
}
Contoh kode HTML:
<p><span>Teks pertama</
span><span>Teks kedua</
span></p>
Pada contoh diatas, Teks
pertama akan diberi style
karena sesuai dengan selector
yang sudah ditentukan.
Dimana pada style CSS,
selector yang diberi style
adalah “elemen span pertama
didalam elemen p (paragraf)“.
Tanda > (kurang dari) berarti
elemen berikutnya adalah
elemen didalamnya.
Selector Child
Yang dimaksud dengan
selector child disini mengacu
pada elemen anak. Untuk
lebih jelasnya, berikut contoh
kodenya:
div>p {
... kode css ...
}
Kode CSS diatas akan berlaku
pada elemen HTML seperti
berikut:
<div><p>teks dalam
paragraf</p><span>teks
dalam span</span></div>
Contoh kedua:
div ol>li p {
... kode css ...
}
Kode CSS diatas akan berlaku
pada elemen HTML seperti
berikut:
<div><ol><li><p>teks dalam
paragraf dan dalam list
item</p></li><li>teks dalam
list item</li></ol></div>
Selector Sibling
Yang dimaksud selector
sibling disini adalah elemen
yang berada setelah elemen
saat ini dan berada pada level
yang sama.
Contoh sibling:
<div><h1></h1><h2></h2></
div>
h2 adalah sibling dari h1
karena h2 berada setelah
(disebelah kanan) h1. Dimana
h1 dan h2 berada pada level
yang sama. Maksud dari level
yang sama adalah h1 dan h2
memiliki elemen induk yang
sama (div).
Contoh penggunaan dalam
CSS:
h1 + h2 { ... kode css ..}
MENINGKATKAN
PENGETAHUAN TENTANG CSS
Salah satu cara untuk
meningkatkan pengetahuan
tentang CSS adalah dengan
melihat bagaimana orang lain
(yang lebih berpengalaman
tentunya) menyusun kode CSS
mereka. Saran saya, jika Anda
serius mempelajari CSS dan
kebetulan menggunakan
browser Firefox, maka segera
install add-on Web Developer.
Karena dengan tambahan
add-on Web Developer maka
Anda bisa melihat kode CSS
suatu halaman dengan hanya
menekan klik kanan Web
Developer > CSS > View CSS
(CTRL+SHIFT+C). Tentunya
tidak hanya dilihat, tapi juga
kode CSS tersebut dipelajari.
DOWNLOAD FILE LATIHAN
Jika malas mengetikkan kode
atau mengalami kesulitan saat
mencoba, Anda bisa download
file latihan css selector
