88

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

div.with-some-class {
    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.

0

4 Answers 4

100

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).

5
  • 7
    Thanks! And I looked up "star property hack" and found this clear and comprehensive post by Ed Eliot: "CSS Tip: Targeting IE 5.x, 6 and 7 Separately" over ejeliot.com/blog/63 Nov 3, 2009 at 14:27
  • 1
    instead of using css hacks, you can also try conditional comments for ie, check quirksmode.org/css/condcom.html form more info. Jun 15, 2010 at 19:53
  • It should be noted that Safari (7.0.1) and versions before it (can't verify) will throw console warnings if you use the star property hack.
    – Jim
    Feb 21, 2014 at 21:11
  • RIP IE7 and these kinds of 'fixes'. Aug 29, 2017 at 0:50
  • note: "Since conditional comments use the HTML comment structure, they can only be included in HTML files, and not in CSS files" quirksmode.org/css/condcom.html Oct 17, 2017 at 16:34
32

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.

3
  • 2
    Indeed. CSS hacks that are not valid CSS should be avoided; you never know what a future browser might do with them.
    – bobince
    Nov 3, 2009 at 16:05
  • @bobince I realize you made that comment way back in the past but we can now be absolutely sure how every future browser will interpret this as CSS parsing algorithm is very strict and tells the browser to silently ignore such rules.
    – mgol
    Nov 3, 2016 at 11:11
  • 1
    @m_gol — No we can't. We don't know what a future CSS specification will say about the meaning of a * before a property. If it gets a meaning, then current browsers will ignore it allowing the extension to be added safely. That's the point of the "must ignore" rule.
    – Quentin
    Nov 3, 2016 at 11:11
8

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.

1
  • 4
    Answers what i googled for, even if its not the correct answer
    – Steve
    Mar 7, 2014 at 12:44
4

This is a hack for IE7.

If you write this:

.test {
    z-index: 1;
    *z-index: 2;
}

on all navigator which respect the W3C Standard <div class="test"></div> HTMLElement have a z-index: 1 but for IE7, this element have a z-index: 2.

This is not standard.

To achieve same thing with W3C Standard, follow this steps:

  • Add some Internet Explorer Conditional Comment (this is a simple HTML Comment for all other navigateur so, it's a standard way).

    <!--[if IE 7]><html lang="fr" class="ie7"><![endif]-->

    <!--[if gt IE 7]><!--><html lang="fr"><!--<![endif]-->

And use the previous rules like this:

.test {
    z-index: 1;
}
.ie7 .test {
    z-index: 2;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.