Apr 062010
 

specificitywars 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>

Continue reading »

Reddit<-- Share/Bookmark