Sunday, 26 January 2014

CSS Score

We all know that when many conflict css properties can be applied for one web element, it is by specification that the more specific properties will be applied. However, specific is an abstract word. Hence, it is better that we know about css score, or how browser choose which properties to override.

Browser categorize css to 4 categories with the specificity from high to low as:

1/ Style Attribute:  <li style="color:white"/>

2/ ID: #some_id{ color: red;}

3/ Class, pseudo class, attribute: .some_class {color:green;}

4/ Elements: li {color:black;}

From W3C recommendation, the result of this calculation takes the form of four comma-separated values, a,b,c,d,1 where the values in column “a” are the most important and those in column “d” are least important. A selector’s specificity is calculated as follows:

  • To calculate a, count 1 if the declaration is from a style attribute rather than a rule with a selector (an inline style), 0 otherwise.
  • To calculate b, count the number of ID attributes in the selector.
  • To calculate c, count the number of other attributes and pseudo-classes in the selector.
  • To calculate d, count the number of element names and pseudo-elements in the selector.
Here is one example using this rule:

body#home div#warning p.message --> 0, 2, 1, 3

Please notice the comma ',' in the css score, it is there to remind us that the score b, c, d can be equal or bigger than 10. Still, the rule to compare is left to right.

18 comments:

  1. Download your favorite Latest Mp3 Lyrics which are available in English, Hindi, Bangla, Telugu, Latin, Arabic, Russian, etc.

    Click Here

    Click Here

    Click Here

    Click Here

    Click Here

    ReplyDelete
  2. Thanks for provide great informatic and looking beautiful blog, really nice required information & the things i never imagined and i would request, wright more blog and blog post like that for us. Thanks you once agian

    court marriage in delhi ncr
    court marriage in delhi
    court marriage in noida
    court marriage in ghaziabad
    court marriage in gurgaon
    court marriage in faridabad
    court marriage in greater noida
    name change online
    court marriage in chandigarh
    court marriage in bangalore

    ReplyDelete
  3. Permainan Sabung Ayam tentunya sudah pada tahu ya, yang dimana ayam melawan ayam pertandingan yang sangat seru ini bisa kalian nonton secara live lohh, banyak yang bermain di situs kami dan merasa sangat nyaman, bagi kalian yang ingin bermain bisa kunjungi situs kami, dijamin kalian akan merasa sangat senang.

    https://www.s128apk.asia/

    https://www.s128apk.asia/daftar-s128/

    https://www.s128apk.asia/sabung-ayam-deposit-pulsa-telkomsel-dan-xl-daftar-s128/

    https://www.s128apk.asia/login-s128-cara-login-judi-sabung-ayam-online/

    https://www.s128apk.asia/link-alternatif-s128/

    ReplyDelete

  4. Permainan tembak ikan adalah permainan yang paling rame orang mainkan, apalagi jika pelayanannya yang sangat memuaskan bagi anda tentunya kalian pasti akan merasa sangat puas juga kan ?, bagi kalian yang sangat menyukai permainan tembak ikan bisa datang ke situs kami :)

    https://www.aplikasijoker123.org/

    https://www.aplikasijoker123.org/daftar-akun-slot-joker123/

    https://www.aplikasijoker123.org/login-joker388-slot/

    https://www.aplikasijoker123.org/joker123-deposit-pulsa/

    https://www.aplikasijoker123.org/download-joker388-apk/

    https://www.aplikasijoker123.org/link-alternatif-joker123/

    ReplyDelete