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>
