CSS Part 3 : Jenis Jenis Selector Pada CSS

Selector pada penulisan sintaks CSS umumnya dalam bentuk tag HTML, namun bisa juga berupa atribut ID ataupun CLASS pada elemen HTML saat melakukan pemformatan tampilan (styling).

Selector berupa Tag HTML.
Semua tag HTML bisa digunakan sebagai Selector pada CSS, penulisannya adalah dengan menyebutkan nama dari tag tersebut.

Contoh:

body {background:#ff0000;}
h1 {font-size: 36px;color:blue;}
p {color:#333333;text-align:justify;}

Selector berupa atribut ID
Selector ID digunakan untuk melakukan pendefinisian style pada element HTML tunggal dan bersifat unique. Selector ID menggunakan atribut ID pada tag HTML, yang kemudian penyebutan dalam sintaks CSS menggunakan tanda “#” .

Contoh:
index.html

<p>artikel pada paragraf</>
<p>artikel pada paragraf</>
<p id=”format”>artikel pada paragraf</>

style.css

P {

text-align:justify;

color:grey;

}

#format {

text-align:center;

color:red;

}

Selector berupa atribut CLASS
Selector CLASS digunakan untuk mendefinisikan pemformatan elemen HTML dengan membaca atribut CLASS pada tag HTML. Selector CLASS umumnya digunakan untuk melakukan pemformatan pada satu atau lebih elemen HTML. Selector CLASS pada penulisan baris kode CSS menggunakan tanda “.” (tanda titik).

contoh:
index.html

<p class="merah">konten pada paragraf ke-1</p>

<p class="biru"> konten pada paragraf ke-2</p>

<p class="merah"> konten pada paragraf ke-3</p>

<p class="biru"> konten pada paragraf ke-4</p>

Style.css

p{

font-size: 12px;

text-alignment:justify;

}

.merah{

color: red;

}

.biru{

color: blue;

}

Dengan bentuk seperti di atas, maka akan dihasilkan sebuah halaman web sejumlah empat paragraf, dimana tiap paragraf memiliki ukuran huruf sebesar 12px dan alignment teksnya adalah justify (CSS dengan selector “p”).

Dari keempat paragraf tersebut, juga akan dihasilkan tampilan berupa :
Paragraf ke-1 dan ke-3 memiliki warna teks merah (CSS dengan selector “.merah”)
Paragraf ke-2 dan ke-4 memiliki warna teks biru (CSS dengan selector “.biru”)

Selector untuk Elemen Turunan
Dalam dokumen HTML, konten sebuah elemen bisa berupa elemen lainnya. Maka diperlukan cara penulisan tersendiri untuk memilih sebuah elemen HTML yang akan ditetapkan sebagai target pemformatan dengan CSS.
Contoh :
file index.html

<h1>Judul dengan <em>bagian penting</em> di dalamnya</h1>

<p>Artikel yang terdapat <em>bagian penting</em> di dalamnya</p>

Apabila kita ingin melakukan pemformatan pada elemen “em” yang berada pada elemen “h1”, maka penulisan CSSnya adalah sebagai berikut :

h1 em { color:red; }

Pengelompokan Selector (Grouping)
Declaration pada CSS bisa diterapkan untuk satu jenis atau beberapa jenis elemen sekaligus. Caranya adalah dengan menuliskan beberapa Selector dalam satu baris kode CSS yang dipisahkan dengan tanda “,” (koma) sebelum penulisan Declaration. Contoh :

h1, h2, h3, h4{

color:red;

}

Maka tampilan halaman web dimana konten pada elemen “h1”, “h2”, “h3” dan “h4” memiliki warna yang sama, yakni merah.