CSS Dasar #10 : Specificity

Post on 12-Feb-2017

253 views 0 download

Transcript of CSS Dasar #10 : Specificity

CSSspecificity

http://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/

setiap deklarasi css (selector) memiliki berat yang berbeda. Berat tersebut menentukan seberapa spesifik sebuah elemen dapat dipilih oleh selector.

#p1 lebih spesifik dari p

menghitung nilaispecificity

elementclassid

0000inline

0 1 0 0elementclassidinline

#p1 =

0 0 0 1p =vs.

0 1 0 0#p1 =

?

0 0 1 0

0 1 0 2ul#sarapan li

vs..favorit

ul#sarapan li

solusi ?

• buat elemen yang diinginkan agar menjadi lebih spesifik

• tambahkan beban pada elemen tersebut agar semakin berat

0 0 1 0

0 1 0 2ul#sarapan li

vs..favorit

0 1 1 2

0 1 0 2ul#sarapan li

vs.ul#sarapan li.favorit

ul#sarapan li.favorit

http://specificity.keegan.stkalkulator specificity

1. tulis selector yang ingin dibandingkan

1. tulis selector yang ingin dibandingkan

2. klik jika ingin membandingkan lebih dari 2 selector

3. klik untuk mengetahui hasilnya

4. urutan yang paling atas berarti yang paling spesifik

CSSspecificity

channel YouTube : webProgrammingUNPAS

shukrān.sandhikagalih@unpas.ac.id