CSS Declaration Location Decision

walbalooshi · August 11th, 2010, 04:57 PM

Hi Imar,

I was reading chapter 15 and while going through the Try It Out where we moved the GridView Styles to a theme and used a CSS class for the styling I started thinking about one certain bit of CSS. I understand what the CSS is doing, but I am more interested in the reason for the placement of the rules.

Code:

.GridViewHeaderStyle th, .GridViewPagerStyle
{
  background-color: #BCD1FE;
  background-repeat: no-repeat;
  background-position: 0 5px;
  text-align: left;
}

To me it seems like the background-repeat and background-position declarations should be placed under the following selector:

Code:

.GridViewSortedAscendingHeaderStyle, .GridViewSortedDescendingHeaderStyle
{

}

because they both deal with those particular th elements. I understand that this is not a book on CSS, but I just was wondering if there is something that I am missing or if the decision was arbitrary, because it seems that it works either way - at least testing moving the properties worked on IE 8 and Firefox 3.6.8.

Thanks.

Imar · August 12th, 2010, 03:04 AM

Hi there,

Yes, you're right. GridViewSortedAscendingHeaderStyle and GridViewSortedDescendingHeaderStyle would have been more appropriate as they are applied to the sorted headers. However, since GridViewSortedDescendingHeaderStyle is applied to a <th> and .GridViewHeaderStyle th refers to the same <th>, the net effect is exactly the same.

Looks like I forgot to move that code when I introduced the sort styles.

Cheers,

Imar