Kamis, 13 April 2017

Belajar CSS Dasar Bagian 10 – Specificity

     Assalamualaikum Wr. Wb. Selamat datang kembali sahabat lupacode semua di blog Lupa code. Masih bersama saya selaku admin dari blog lupacode. Pada hari kemarin kita telah membahas mengenai Belajar CSS Dasar Bagian 9 – Inheritance  Bagi sahabat lupacode yang baru saja gabung disini atau baru masuk ke artikel ini, saya sarankan untuk mempelajari pembahasan materi dari yang pertama agar sahabat paham maksud dari kelanjutan pembahasan yang selanjutnya. Atau sahabat bisa langsung mengunjungi halaman Daftar isi pada blog ini.

Belajar CSS Dasar Bagian 10 – Specificity

   Selamat malam sahabat lupacode semuanya, selamat datang kembali di blog lupacode.blogspot.com pada kesempatan kali ini kita akan membahas mengenai suatu konsep yang dinamakan dengan specificity. Konsep sprecificity ini merpakan sebuah konsep yang saya sendiri belum lama memahaminya dan ini sudah berhasil membuat saya bingung beberapa tahun ke belakang. Ya jadi kenapa saya share sekarang supaya kalian yang baru belajar css saat ini tidak mengalami kebingungan yang seperti saya alami.
         Dari definisinya dulu kita lihat
setiap deklarasi css (selector) memiliki berat yang berbeda. Berat tersebut menentukan seberapa spesifik sebuah elemen dapat dipilih oleh selector “
        
        Setiap deklari css atau selector yang kalian buat itu ternyata memiliki berat yang berbeda, berat tersebut nanti menentukan seberapa spesifik elemen  yang kalian pilih untuk diberikan style. Itulah kenapa waktu saya jelasin selector dasar pada materi sebelumnya itu saya bilang bahwa selector itu memiliki berat yang berbeda ada elemen HTML beratnya mungkin kita anggap satu, atau class beratnya mungkin kita bisa anggap 10 kali lipat lebih berat dan id bisa kita anggap 100 kali lebih berat. Nah  itu akan lebih jelas pada pembahasan materi kali ini. Misalkan seperti ini saya mempunyai sebuah paragraf saja satu di dalam html dan dua baris css di dalam style css nya

HTML
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

CSS
p { color: red; }
p { color: green; }

css tolong saya carikan paragraf lalu ubah warnanya jadi merah” kemudian dibawahnya saya tulis lagi p { color: green; } nah coba kalian bisa tebak kira – kira paragrafnya akan berwarna apa akhirnya ? ya jawabannya adalah hijau (green)

Belajar CSS Dasar Bagian 10 – Specificity 1


      Kalau saya tulis dua baris seperti itu artinya p yang ke-dua akan menimpa atau mengoveride prtoperti yang pertama. Jadi pasti warna menjadi hijau karna yang merah ketimpa. Ini karna kalau kita tulisnya sama selectornya itu artinya selevel maka yang akan di ambil adalah properti yang terakhir atau selector yang terakhir. Baik ini pasti ga ada masalah kalau sama ini yah.
     Sekarang coba saya punya HTML berikutnya, jadi tetap saya punya satu paragraf tapi kali ini paragraf saya, saya kasih id namanya p1 lalu saya kasih css

HTML
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

CSS
#p1 { color: red; }
P { color: green; }

Coba sekarang kalian bisa tebak kira-kira warna paragrafnya sekarang menjadi apa ?

Belajar CSS Dasar Bagian 10 – Specificity 2
      
          Ternyata warna paragraf saya itu ganti menjadi warna merah tidak jadi hijau. Padahal kalau kalian lihat saya tulis css nya color green itu setelah id p . kalau saya pake konsep yang tadi, bahwa p setelahnya itu akan mengoveride p sebelumnya dan ternyata ini tidak, mengapa ?
     Ini karena id #p1 { color: red; } itu lebih spesifik dari pada p. Ternyata ada sesuatu yang lebih spesifik dari yang lain. Terus menghitung nya gimana ? kita harus tau bagaimana cara ngitung nya. Oke caranya begini
      Coba anggap aja kalian punya 4 digit angka 0 lalu kalian kasih label, label yang sebelah kiri kalian kasih elemen, lalu yang kedua setelahnya kalian kasih class, kemudian yang ketiga kalian kasih id dan yang terakhir kalian kasih inline

Belajar CSS Dasar Bagian 10 – Specificity 3


        Nanti cara menghitungnya adalah kalian lihat selector yang kalian buat, lalu tiap ada elemen htnl disana tambahkan 1 dibagian elemen, kalau ada class nya tambahkan 1 di class, kemudian jika ada id nya tambahkan 1 pada idnya dan kalau ada inline tambahkan satu pada inline nya.
       Kita lihat pada contoh kasus di atas, p1 ada berapa elemen ?

Belajar CSS Dasar Bagian 10 – Specificity 4
  Lalu kita bandingkan atau kita adu dengan p

Belajar CSS Dasar Bagian 10 – Specificity 5
    Nah kalau sekarang kita adu antara 0 0 0 1 dengan 0 1 0 0 menang mana ?

Belajar CSS Dasar Bagian 10 – Specificity 6


        Pasti menng  0 1 0 0 yah :D . jadi karena cress #p1 itu lebih berat pasti dia yang terpilih, dia yang menang. Nah sekarang kalian pasti sudah tau yah jawabannya mengapa warnanya bisa menjadi merah. Silahkan kalian oprek – oprek saja coba – coba ber eksperimen kemudian coba kembangkan lagi agar nantinya kalian dapat lebih memahami lagi konsep yang seperti ini, saya yakin kalau kita sering banyak belajar maka semua akan terasa tidaklah sulit.
     Baiklah saya cukupkan sampai disini untuk materi dasar css nya, dimana materi ini menjadi penutup pada bagian Belajar CSS DASAR dari 1 s/d 10. Kalau saya ada umur dan waktu senggang saya akan lebih banyak share lagi tentang apa yang saya ketahui, bagi temen-temen lupacode silahkan jika ingin menambahkan tambahkan saja pada komentar dibawah agar temen – temen atau sahabat lupacode yang lainnya dapat lebih mengerti lagi mengenai materi yang kita bahas
        Sampai disini dulu perjumpaan kita mengenai pembelajaran CSS DASAR selanjutnya kita akan coba masuk kedalam pembahasan mengenai Tutorial Sublime Text 3 ya ini saya sengaja ingin buatkan tutorialnya agar temen-temen semua dapat lebih cepet lagi ngodingnya menggunakan sublime text
         Kunjungi terus blog lupacode.net dan mari kita belajar bersama – sama, tidak ada kata terlambat untuk belajar J

Wassalamualaikum Wr. Wb

Silahkan berkomentar yang baik dan menarik sesuai dengan isi konten.
Komentar yang tidak diperbolehkan :

1. Berbau penghinaan SARA & PXXN
2. Komentar dengan Link hidup ( akan dianggap spam )
3. Komentar tidak nyambung dengan isi postingan
EmoticonEmoticon