Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Aturan Penulisan Selektor dalam CSS

Green
Sebelum memasuki tabel, Saya jelaskan dulu istilah-istilahnya melalui contoh:

img {background:#EEEEEE; padding:5px;}
selektor {deklarasi1; deklarasi2;}
selektor {properti1:value1; properti2:value2;}

Selektor terdiri dari deklarasi-deklarasi yang dipisahkan dengan titik koma, setiap deklarasi adalah gabungan antara properti dengan value/nilainya. img adalah selektor, background dan padding adalah properti, #EEEEEE dan 5px adalah value. background:#EEEEEE; dan padding:5px; adalah deklarasi.
Suatu saat mungkin kalian juga akan melihat susunan kode yang tampak berbeda seperti ini:

img {
  background:#EEEEEE;
  padding:5px;
}

img
{
background:#EEEEEE;
padding:5px;
}

img {
  background : #EEEEEE;
  padding    : 5px;
}

img { background: #EEEEEE; padding: 5px; }

Apapun bentuk dan susunan kode yang akan kalian temui nantinya tidak akan mempengaruhi apapun.

Aturan Penulisan Selektor dalam Tag Murni

Untuk tag-tag dengan kondisi yang masih murni bisa kamu tuliskan apa adanya sesuai dengan nama tagnya seperti beberapa contoh berikut:

SELEKTORCONTOH KERANGKAKETERANGAN
body {deklarasi}<body>OBJEK</body>Deklarasi akan mempengaruhi objek-objek di dalam wilayah kekuasaan <body>
a {deklarasi}<a href='#'>OBJEK</a>Deklarasi akan mempengaruhi objek-objek di dalam wilayah kekuasaan <a>
img {deklarasi}<img src='hompimpa.jpg' />Deklarasi akan mempengaruhi elemen gambar
ul {deklarasi}<ul>
<li>OBJEK1</li>
<li>OBJEK2</li>
<li>OBJEK3</li>

</ul>
Deklarasi akan mempengaruhi semua elemen di dalam wilayah kekuasaan <ul>
ol {deklarasi}<ol>
<li>OBJEK1</li>
<li>OBJEK2</li>
<li>OBJEK3</li>

</ol>
Deklarasi akan mempengaruhi semua elemen di dalam wilayah kekuasaan <ol>
li {deklarasi}<ul>
<li>OBJEK1</li>
<li>OBJEK2</li>
<li>OBJEK3</li>

</ul>
<ol>
<li>OBJEK1</li>
<li>OBJEK2</li>
<li>OBJEK3</li>

</ol>
Deklarasi akan mempengaruhi semua elemen <li> baik yang berada di dalam wilayah kekuasaan <ul> maupun <ol>
ul li {deklarasi}<ul>
<li>OBJEK1</li>
<li>OBJEK2</li>
<li>OBJEK3</li>

</ul>
<ol>
<li>OBJEK1</li>
<li>OBJEK2</li>
<li>OBJEK3</li>
</ol>
Deklarasi akan mempengaruhi elemen <li> di dalam wilayah kekuasaan <ul>, namun tidak akan mempengaruhi elemen <li> di dalam wilayah kekuasaan <ol>


Penulisan ID dan CLASS

Penulisan selektor ID harus diawali dengan prefiks #, sedangkan selektor CLASS harus diawali dengan prefiks .

SELEKTORCONTOH KERANGKAKETERANGAN
#hompimpa {deklarasi}<div id='hompimpa'>
OBJEK
</div>
Deklarasi akan mempengaruhi objek di dalam elemen yang memiliki ID hompimpa
.hompimpa {deklarasi}<div class='hompimpa'>
OBJEK
</div>
Deklarasi akan mempengaruhi objek di dalam elemen yang memiliki CLASS hompimpa
span.hompimpa {deklarasi}<div class='hompimpa'>
OBJEK
</div>
<span class='hompimpa'>
OBJEK
</span>
Deklarasi akan mempengaruhi objek di dalam wilayah kekuasaan <span> yang memiliki CLASS hompimpa, namun tidak akan mempengaruhi objek di dalam wilayah kekuasaan <div> yang memiliki CLASS hompimpa
div.hompimpa {deklarasi}<div class='hompimpa'>
OBJEK
</div>
<span class='hompimpa'>
OBJEK
</span>
Deklarasi akan mempengaruhi objek di dalam wilayah kekuasaan <div> yang memiliki CLASS hompimpa, namun tidak akan mempengaruhi objek di dalam wilayah kekuasaan <span> yang memiliki CLASS hompimpa
div .hompimpa {deklarasi}<div>
<div class='hompimpa'>
OBJEK
</div>

<span class='hompimpa'>
OBJEK
</span>

</div>
<div class='hompimpa'>
OBJEK
</div>
<span class='hompimpa'>
OBJEK
</span>
Deklarasi akan mempengaruhi elemen apapun di dalam wilayah kekuasaan <div> induk, dimana elemen-elemen tersebut harus diketahui memiliki CLASS hompimpa.
Elemen-elemen sejenis yang berada di luar <div> induk tidak akan ikut terpengaruh
div#hompimpa {deklarasi}<div id='hompimpa'>
OBJEK
</div>
<span id='hompimpa'>
OBJEK
</span>
Deklarasi akan mempengaruhi objek di dalam wilayah kekuasaan <div> yang memiliki ID hompimpa, namun tidak akan mempengaruhi objek di dalam wilayah kekuasaan <span> yang memiliki ID hompimpa
div #hompimpa {deklarasi}<div>
<div id='hompimpa'>
OBJEK
</div>

<span id='hompimpa'>
OBJEK
</span>

</div>
<div class='hompimpa'>
OBJEK
</div>
<span class='hompimpa'>
OBJEK
</span>
Deklarasi akan mempengaruhi elemen apapun di dalam wilayah kekuasaan <div> induk, dimana elemen-elemen tersebut harus diketahui memiliki ID hompimpa.
Elemen-elemen sejenis yang berada di luar <div> induk tidak akan ikut terpengaruh
div span.hompimpa {deklarasi}<div>
<div id='hompimpa'>
OBJEK
</div>
<span class='hompimpa'>
OBJEK
</span>

</div>
<div class='hompimpa'>
OBJEK
</div>
<span class='hompimpa'>
OBJEK
</span>
Deklarasi akan mempengaruhi elemen <span> yang memiliki CLASS hompimpa di dalam elemen <div> induk, namun tidak akan mempengaruhi elemen <div> yang memiliki CLASS hompimpa yang berada di dalam elemen <div> induk.
Elemen-elemen sejenis yang berada di luar <div> induk tidak akan ikut terpengaruh
#hompimpa {deklarasi}<div id='hompimpa'>
OBJEK
</div>
<div class='hompimpa'>
OBJEK
</div>
Deklarasi akan mempengaruhi objek di dalam wilayah kekuasaan <div> yang memiliki ID hompimpa, namun tidak akan mempengaruhi objek di dalam wilayah kekuasaan <div> yang memiliki CLASS hompimpa


Meringkas Beberapa Selektor bagi Elemen yang Memiliki Deklarasi Sama

Penulisan selektor dapat diringkas dengan memisahkannya menggunakan tanda koma untuk menggabungkan deklarasi-deklarasi yang sama.

SEBELUM DIRINGKASSESUDAH DIRINGKASCONTOH KERANGKAKETERANGAN
h1 {color:green;}
h2 {color:green;}
h3 {color:green;}
h1, h2, h3 {color:green;}<h1>OBJEK</h1>
<h2>OBJEK</h2>
<h3>OBJEK</h3>
Deklarasi color:green; akan mempengaruhi elemen <h1>, <h2> dan <h3>


Penulisan Selektor Atribut dalam CSS

Atribut tag HTML dalam selektor CSS dapat dituliskan dengan menutupinya menggunakan simbol [ dan ]

SELEKTORCONTOH KERANGKAKETERANGAN
a[title] {deklarasi}<a href='#' title='hag'>OBJEK</a>
<a href='#'>OBJEK</a>
<img src='hompimpa.jpg' title='hag' />
Deklarasi hanya akan mempengaruhi elemen <a> yang memiliki atribut title=''
Elemen-elemen bukan <a> yang memiliki atribut title='' tidak akan ikut terpengaruh
input[type="button"] {deklarasi}<input value='OBJEK' type='button' />
<input value='OBJEK' type='text' />
Deklarasi hanya akan mempengaruhi elemen <input> yang memiliki atribut type='button'
Elemen-elemen <input> dengan atribut selain type='button' tidak akan ikut terpengaruh


Dua Metode Penulisan CSS

Ada dua metode penulisan dalam CSS, yaitu metode penulisan secara terpisah dengan memanfaatkan tag <style>, atau metode penulisan secara langsung dengan memanfaatkan atribut style=''

METODE PENULISAN SECARA TERPISAH DARI OBJEK SASARANMETODE PENULISAN SECARA LANGSUNG PADA OBJEK SASARAN
<style type='text/css'>
#hompimpa {
proprti:value;
properti:value;
properti:value;
}
</style>

....
....

<div id='hompimpa'>
OBJEK
</div>
<div style='properti:value;properti:value;proprti:value;'>
OBJEK
</div>


Penulisan CSS secara terpisah dilakukan dengan memisahkan objek sasaran dari selektor yang dituliskan sesuai dengan keadaan objek sasaran agar berfungsi. Tag <style> beserta komponen-komponen di dalamnya bisa diletakkan di mana saja, namun prosedur peletakkan yang benar adalah di dalam wilayah kekuasaan <head>, sementara objek sasarannya harus berada di dalam wilayah kekuasaan <body>.
Penulisan CSS secara langsung dilakukan dengan memasukkan deklarasi-deklarasi ke dalam atribut style='' tanpa menuliskan selektornya. Atribut class='' dan id='' sudah tidak penting lagi di sini, karena semua deklarasi sudah dituliskan secara langsung pada objek sasaran.

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 11 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!