How do I write my css classes with div tags?

Posted July 13, 2005

Rothe Blog CSS Logo This is a general title that I hope will bring users in who are just trying to find information. But more specifically, I wanted to address a style of formatting vs. an advantage in formatting when it comes to writing your CSS website.

Stemming from last month’s entry, since I began learning about the intricate but rewarding in’s and out’s of CSS, I have been researching sites that have use it. As often as I notice that there are many sites that use “ID” selectors to define a class for block level div element, I have also found that this format is used for the class definition in the CSS file;

div#wrapper

div.wrapper{}

Ignore the ID for now (the first example), instead what I wanted to argue, was that there is a reason that you would not want to format your styles in this manner;

div.(classname)

This formatting is known as a selector specific class. What this means without the jargon, is that you are only allowed to have this class name, in the above example wrapper, on a div element. In your html page, you would only be able to add that class in this fashion;

<div class=”wrapper”>

You would not be able to add that class to any other structural HTML element and have it work correctly, for example these two wouldn’t work;

<p class=”wrapper”>

<li class=”wrapper”>

I hope that was clear

Sometimes it is hard to explain this at such a rudimentary level, there is so much knowledge you have to assume for one person to even understand this article. But that is why I no longer use selector specific classes on my main block level elements, rather using it where appropriate on a cases by case basis.