Rekayasa Perangkat Lunak Tk.1 - SMKN 2 Surabaya
2
3. Class Selector
Dengan menggunakan class selector, kita dapat mendefinisikan style yang berbeda untuk elemen HTML yang sama. Secara umum syntax style untuk class adalah sebagai berikut:
.namaKelas{ Property1: value1;
Property2: value2; .
. }
Misalnya kita ingin mendefinisikan dua buah tipe paragraph yaitu paragraph dengan rata kanan, sedang yang lainnya adalah rata tengah. Berikut bentuk penulisannya:
p.right {text-align: right}
p.center {text-align: center}
Dalam dokumen HTML kita harus menambahkan attribut class:
p class=right This paragraph will be right-aligned. p p class=center This paragraph will be center-aligned. p
Pada contoh dibawah ini, semua elemen HTML dengan class=center, akan menjadikan rata tengah.
.center {text-align: center}
Pada dokumen HTML dibawah, elemen h1 dan elemen p menggunakan class center, artinya kedua
elemen tersebut akan mengikuti aturan pada selector “center”:
h1 class=center This heading will be center-aligned h1 p class=center This paragraph will also be center-aligned. p
Note: Do NOT start a class name with a number It will not work in MozillaFirefox.
Misalnya, dalam HTML terdapat empat buah div, tetapi hanya div pertama hendak dibuat berbeda dari ketiga div yang lain, Implementasinya sebagai berikut :
html head
titleJangan Menyerahtitle style type=”textcss”
.judul { background-color : green;
color : yellow; }
.tubuh{ background-color : blue;
color : white; }
style head
body div class=”judul”
pPenggalan lirik : Jangan Menyerahp pD’Masivp
div
Rekayasa Perangkat Lunak Tk.1 - SMKN 2 Surabaya
3
Perhatikan, tag div pertama menyertakan atribut class yang diisi dengan “judul”, sedangkan tiga div yang
lain menggunakan nilai berupa “tubuh” untuk atribut class. Hal inilah yang membedakan antara div pertama dengan tiga div yang lain.
Selektor kelas diawali dengan tanda titik . Contoh Selektor kelas diterapkan hanya pada elemen tertentu :
Perhatikan bahwa hanya “divisi 2” yang diberi latar belakang, ini karena kode
div.liga {
background-color : blue;} Selektor
div.liga berarti div yang mengandung kelas”liga”
Dengan demikian yang tidak terletak dalam elemen div tidak ikut diberi latar belakang Namun efek
.liga { color : gray; } berlaku untuk semua yang berkelas “liga”
Sebuah elemen bisa mempunyai lebih dari satu kelas, didalam atribut class, nama-nama kelas dipisahkan oleh spasi, contoh :
div class=”tubuh” pTak ada manusia p
pYang terlahir sempurnap pJangan kau sesalip
pSegala yang telah terjadip div
div class=”tubuh” pKita pasti pernah p
pDapatkan cobaan yang beratp pSeakan hidup inip
pTakada artinya lagip div
div class=”tubuh” pReff. 1: p
pSyukuri apa yang adap pHidup adalah anugerahp
pTetap jalani hidup inip pMelakukanyang terbaikp
p……p div
body html
html head
titleSelektor Kelas Khusustitle style type=”textcss”
.liga { color : gray;
} div.liga {
background-color : blue; }
style head
body p class=”liga”Jakartap
div class=”liga”Bandungdiv p class=”liga”Surabayap
body html
Rekayasa Perangkat Lunak Tk.1 - SMKN 2 Surabaya
4
pada contoh diatas bahwa elemen div tersebut mempunyai dua buah kelas, yaitu “umum” dan “khusus”, kedua
nama kelas dipisahkan dengan spasi 4. Id Selector
Kita juga dapat mendefinisikan style dengan menggunakan id selector. Id selector didefiniskan dengan menggunakan karakter . Berikut adalah contoh penggunaan id selector:
green {color: green}
Aturan style dibawah ini akan diterapkan pada elemen p yang menggunakan id dengan value adalah “para1”:
ppara1 { text-align: center;
color: red }
Selektor ID berguna untuk mengatur elemen yang mempunyai ID tertentu. Atribut ID bisa dikenakan pada suatu elemen dengan bentuk seperti berikut
nama Tag id = “nama Identitas”….. Sebuah ID dapat dipakai untuk mendapatkan sebuah elemen secara unik, hal ini berbeda dengan class,
sebagaimana diketahui, beberapa elemen boleh memiliki kelas yang sama
html head
titleSelektor 2 Kelastitle style type=”textcss”
.umum { color : yellow;
} .khusus {
background-color : blue; }
style head
body div class = “umum khusus”Umum, ya. Khusus, ya.div
body html
Rekayasa Perangkat Lunak Tk.1 - SMKN 2 Surabaya
5
Berikut ini adalah contoh penggunaan id selector pada dokumen HTML:
html head
style type=textcss green{
color:green }
ppara1{ text-align:center;
color:red }
style head
body h2 id=greenIni heading 2h2
pIni paragraph 1 yang tidak menggunakan id para1. Ini paragraph 1 yang tidak menggunakan id para1. Ini paragraph 1 yang tidak menggunakan id para1.p
p id=para1Ini paragraph 2 yang menggunakan id para1. Ini paragraph 2 yang menggunakan id para1. Ini paragraph 2 yang menggunakan id para1.p
body html
Do NOT start an ID name with a number It will not work in MozillaFirefox.
Contoh penggunaan id dalam tag div
html head
titleSelektor IDtitle style type=”textcss”
.isi { background-color : green;
} bagian1 {
text-align : left ; color : white ;
} bagian2 {
text-align : right ; color : yellow ;
} style
head body
h1Pantunh1 div id = “bagian1” class = “isi”
pJalan-jalan ke hutan purbap pDapat buah enak rasanyap
pPelan-pelan selalu mencobap pPengetahuan pun bertambah tanpa terasap
div div id = “bagian2” class = “isi”
pSemangka erat diikatp pMemang bisa banyak membawanyap
pSemangat yang kuatp pmembawa hasil yang sangat berhargap
div body
html
Rekayasa Perangkat Lunak Tk.1 - SMKN 2 Surabaya
6
Keterangan tag diatas : Kedua div mempunyai kelas yang sama, yaitu “isi”, namun, masing-masing div memiliki id yang
berbeda, yang pertama berupa “bagian1” dan yang kedua “bagian2” Kedua div tersebut akan diatur oleh 2 buah selektor, selektor pertama berupa .isi dan yang kedua
bagian1 atau bagian2
5. Universal Selector
Kategori