Working on a basic MVC 3 application, I added in a jQuery UI datepicker. After getting it to work, I decided to re-size the input box. I did this by adding an entry at the bottom of the applications Site.css file as follows:

.date {

width: 100px;

}

No matter what I did, it wouldn’t work. I then decided to run the application in Chrome and use the Developer Tools provided to examine the page. I discovered that my .date entry was being superceded by a input entry earlier in the CSS file.

Research led me to this article on specificity. It appears that my .date entry is not as specific as an input[type=text] entry. The rules of specificity say that .date is worth ten points (for the class) but that input[type=text] is worth 11 points (1 point for the ‘input’ element and ten points for the [type=text] attribute.