What does a star-preceded property mean in CSS?

Question

Hi all,

I was looking at a css file today and found the following rule set:

display:block;                   
margin:0;
padding:2px 0 0 0;
*padding:1px 0 0 0;
font-size:11px;   
font-weight:normal;
*line-height:13px;
color:#3D9AD0;

What does the star mean in *padding and *line-height?

Thanks.

Answer 1

In CSS? Nothing; it is an error.

Due to bugs in some versions of Internet Explorer, they won't correctly ignore the invalid property name, so this is one way of providing CSS that is specific to those browsers.

Using conditional comments is clearer and safer though.

Answer 2

This is the "star property hack" along the same lines as the "underscore hack." It includes junk before the property that IE ignores (the * works up to IE 7, the _ up to IE 6).

Answer 3

The asteriks character is a valid wildcard in CSS. Use of it alone means the following CSS properties will be used against all element nodes in the DOM. Example:

*{color:#000;}

The above property will be applied to all DOM elements, thereby defeating the natural cascading in CSS. It can only be overridden by specifically tageting DOM elements where that targeting begins a unique identifier reference. Example:

#uniqueValue div strong{color:#f00;}

The above property will override the wildcard and make the text of all strong elements that occur in a div inside an element with an id attribute value of "uniqueValue".

Using a universally applied wildcard, such as the first example, can be a quick and dirty method for writing a reset stylesheet. It is quick and dirty because granular definition of presentation after the wildcard will likely create an extremely bloated stylesheet. If you are going to use the wildcard I would suggest using it more specifically, such as:

* strong{color:#f00;}

The above example will make the text of all strong elements color red regardless of other CSS properties not specified with a unique identifier. This is considered much safer than using the "!important" declaration as that declaration is known to cause interference with natural functionality of the intended behaviors and is a maintanence nightmare.

The asteriks in your example are in the wrong place as they seem to occur inside the property declarations, the code that goes inside curly braces, and that will likely cause an error.