CSS apa itu Nesting?

kali ini kita akan share tentang nesting. dengan teknik nesting ini kita bisa membuat style yang berbeda disetiap tag. fungsi nesting adalah membuat style berbeda pada

kalau persahabatan sejati terdiri dari telinga yang mau mendengarkan, hati yang mau memahami dan tangan yang siap menolong. Frank Tyger

kali ini kita akan share tentang nesting. dengan teknik nesting ini kita bisa membuat style yang berbeda disetiap tag. fungsi nesting adalah membuat style berbeda pada

Last Modif at July 8th, 2011

nesting adalah salah satu teknik penulisan dalam css, selain fungsi utamanya merubah maupun mendesign website. css ini juga dilengkapi berbagai macam teknik penulisan, kali ini kita akan share tentang nesting. dengan teknik nesting ini kita bisa membuat style yang berbeda disetiap tag. fungsi nesting adalah membuat style berbeda pada tag_atau_slector yang sama.

atauran pelulisan nesting

selector_atau_tag(spasi)selector_atau_tagkedua{property:value;}
.misal p{property:value;}
.misal2 p{property:value;}
#misal .misallagi{property:value;}

keterangan

  • tag_atau_selector pertama dan kedua dipisahkan dengan spasi
  • dimana selector_atau_tagkedua yang akan kita gunakan/bentuk(anggap saja tag_atau_selectorkedua namanya sama)
  • maaf agak beribet, css ini memang susah jika diimplementasikan dengan kata! mungkin dengan contoh kita akan sama-sama bisa

contoh nesting dalam internal style

perhatikan code markup dibawah

<html>
<head>
<title>css nesting</title>
<meta content="indam url:http://www.indaam.net" name="author"/>
<style type="text/css">
/*pada contoh ini, kita akan membuat dua style untuk tag p atau paragraf*/
p{color:blue;/*semua tag p akan berwarna biru*/}
#misal1 p{color:red;/*dengan nesting, kita bisa mambuat tag(sama ) yang memiliki tampilan berbeda*/}
#misal2 p{color:lime;/**/}
.contohlagi{
font-size:15px;
}
#misallagi1 .contohlagi{
font-size:25px;
text-decoration:blink;
}
#misallagi2 .contohlagi{
font-size:30px;
text-decoration:underline;
}
</style>
</head>
<body>
<p>ini adalah paragraf</p>
<p>ini adalah paragraf</p>
<p>ini adalah paragraf</p>
<div id="misal1">
<p>ini adalah paragraf dengan style(teknik) nesting</p>
</div>
<div id="misal2">
<p>ini adalah paragraf dengan style(teknik) nesting</p>
<!-- disini kita bisa lihat perbedaanya, kita menulis html(tag p), dan tampilanya berbeda-->
<!-- dengan nesting ini sobat bisa mambuat beberapa tag(sama) yang memiliki tampilan berbeda-->
<!-- dengan adanya nesting pula, sobat bisa berkreasi lebih, jadi kita tidak perlu menggunakan banyak tag-->
<!--dalam css, sobat ngga mesti menggunakan nesting, hanya saja. kreatifitas akan sangat terbatas-->
</div>
<span class="contohlagi">ini adalah contoh kedua dengan class contoh lagi</span>
<div id="misallagi1">
<span class="contohlagi">ini adalah contoh kedua dengan class contoh lagi, hanya saya ini dengan nesting</span>
</div>
<div id="misallagi2">
<span class="contohlagi">ini adalah contoh kedua dengan class contoh lagi, hanya saya ini dengan nesting</span>
</div>
<div style="clear:both;/**//**/"></div>
<p>salam <a href="http://www.indaam.net" title="indam site" target="_blank">indaam site</a></p>
</body>
</html>

untuk melihat hasilnya

  • copy markup style diatas
  • paste ke notepad
  • save as (pilih all types) dengan nama contohcssnesting.htm
  • jalankan(double click), atau
  • open with (firefox, ie, opera, safari, chrome)
  • silakan edit valuenya
  • letak valuenya antara : (titik dua) dan ;/**/(titik koma)
  • untuk keteranganya, silakan baca komentar yang saya tambahkan pada markup dan style di atas

tulisan ini perlu dirapikan
References

http://www.w3.org/Style/CSS

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

One thought on “CSS apa itu Nesting?”

  1. anawia says:

    salam kenal mas.
    blognya cukup unik. tapi sayang kurang rapi jadi serasa ada yang kurang gitu, tapi tetep ok. :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-