CSS Dasar #10 : Specificity

25
CSS specificity

Transcript of CSS Dasar #10 : Specificity

Page 1: CSS Dasar #10 : Specificity

CSSspecificity

Page 2: CSS Dasar #10 : Specificity

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.

Page 3: CSS Dasar #10 : Specificity
Page 4: CSS Dasar #10 : Specificity
Page 5: CSS Dasar #10 : Specificity

#p1 lebih spesifik dari p

Page 6: CSS Dasar #10 : Specificity

menghitung nilaispecificity

Page 7: CSS Dasar #10 : Specificity

elementclassid

0000inline

Page 8: CSS Dasar #10 : Specificity

0 1 0 0elementclassidinline

#p1 =

0 0 0 1p =vs.

Page 9: CSS Dasar #10 : Specificity

0 1 0 0#p1 =

Page 10: CSS Dasar #10 : Specificity
Page 11: CSS Dasar #10 : Specificity

?

Page 12: CSS Dasar #10 : Specificity
Page 13: CSS Dasar #10 : Specificity

0 0 1 0

0 1 0 2ul#sarapan li

vs..favorit

Page 14: CSS Dasar #10 : Specificity

ul#sarapan li

Page 15: CSS Dasar #10 : Specificity

solusi ?

Page 16: CSS Dasar #10 : Specificity

• buat elemen yang diinginkan agar menjadi lebih spesifik

• tambahkan beban pada elemen tersebut agar semakin berat

Page 17: CSS Dasar #10 : Specificity

0 0 1 0

0 1 0 2ul#sarapan li

vs..favorit

Page 18: CSS Dasar #10 : Specificity

0 1 1 2

0 1 0 2ul#sarapan li

vs.ul#sarapan li.favorit

Page 19: CSS Dasar #10 : Specificity

ul#sarapan li.favorit

Page 20: CSS Dasar #10 : Specificity
Page 21: CSS Dasar #10 : Specificity

http://specificity.keegan.stkalkulator specificity

Page 22: CSS Dasar #10 : 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

Page 23: CSS Dasar #10 : Specificity

CSSspecificity

Page 24: CSS Dasar #10 : Specificity

channel YouTube : webProgrammingUNPAS

Page 25: CSS Dasar #10 : Specificity

shukrā[email protected]