Today, I ran into a problem with some CSS code I was modifying. I was making what I thought was a simple change, but the change refused to show up when I refreshed. Changing the declaration type from a class to an ID, and stripping out some HTML selectors made the problem go away, but I knew that wasn’t the right thing to do. That’s when I ran across this article at hungred.com.
Selector Order Priority
I knew CSS favored more specific over less specific. However, I mixed up what that meant. I thought more specific was just to have MORE information pointing at the item in question. It’s not quite so simple. Compare the following two samples:
<style> p .bordered { border: 1px black solid; } .bordered { border: 5px red dotted; } </style> <div> <p class="bordered">Bordered?</p> </div>
<style> p.bordered { border: 1px black solid; } .bordered { border: 5px red dotted; } </style> <div> <p class="bordered">Bordered?</p> </div>