Nesting

Nah setelah kemarin saya membahas mengenai Class & ID, maka sekarang saatnya saya akan membahas mengenai nesting. Apa si nesting itu dalam css?

Nesting adalah suatu cara penulisan dalam css. Atau biasa disebut selector dalam selector. Jadi dengan menerapkan fungsi dari nesting ini, kita tidak perlu repot-repot membuat class atau id yang sangat banyak.

Dan agar paham dengan maksud saya, sekarang langsung aja kita ambil contohnya.
Sebelum nesting:

<html>
<head>
   <title>Nesting</title>
   <style type="text/css">
   #top {
      background-color: #ccc;
      padding: 10px;
   }
   .test {
      color: blue;
      font-weight: bold;
   }
   </style>
</head>
<body>
<div id="top">
   <h1>Mencoba Nesting</h1>
   <p class="test">Ini adalah contoh penerapan dari class di dalam css</p>
   <p class="test">Ini juga adalah contoh penerapan dari class</p>
</div>
</body>
</html>

Dan ini adalah codingan setelah nesting:

<html>
<head>
   <title>Class dan Id</title>
   <style type="text/css">
   #top {
      background-color: #ccc;
      padding: 10px;
   }
   #top p {
      color: blue;
      font-weight: bold;
   }
   </style>
</head>
<body>
<div id="top">
   <p>Mencoba Class dan Id</p>
   <p>Ini adalah contoh penerapan dari class di dalam css</p>
   <p>Ini juga adalah contoh penerapan dari class</p>
</div>
</body>
</html>

Lihat perbedaan dari codingan di atas. Sudah jelas kan maksudnya dari nesting itu?
Pada bagian coding sebelum di nesting, disana saya memakai class test, dan di codingan yang setelah nesting, class test saya hapus dan sebagai gantinya saya menggunakan #top p

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s