SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What Does The Asterisk Mean In A CSS Rule?

    I have been studying the rigid 3 column layout by Piefecta (http://www.positioniseverything.net/piefecta-rigid.html) and I am noticing new CSS rules with punctuation that I have never seen before.

    For example they use an asterisk before the html tag like this:
    Code:
    * html .left {margin-right: -3px;}
    And they use forward slashes in the middle of a classes property like this:
    Code:
    * html .outer {width: 480px; wid\th: 478px;}
    Also shown above are two of the same properties of "width".
    Can anyone explain why there are these strange characters within the CSS styles? I have not seen these before. Also, any good links to explanations would be greatly appreciated. Thanks in advance.

    Todd Temple
    Todd Temple > T2 Design

  2. #2
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The asterisk sybolises the universal selector, which can be handy when resetting margin/padding; in terms of it's influence, it's the highest selector, so applies it styles to all elements.

    I think in the instance you have it in, IE6 can give that rule priority over a duplicate rule without the global selector included

    The property that includes the slash is a hack, I think designed for IE6 to parse - correct me if I'm wrong, as I've never had to use one before, so don't know too much about them.

  3. #3
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    At SitePoint CSS Reference are some answers:
    The Star Selector Hack
    The Backslash and Underscore Hacks
    Happy ADD/ADHD with Asperger's

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Also, any good links to explanations would be greatly appreciated. Thanks in advance.
    The faq at the top of the forum explains these in the box model section.

    The "asterisk" (*) is the universal selector and applies styles to all elements.

    If you said * {color:red} then all elements that accept the property color will be red.

    If you said: div * {color:red} then only elements that are children of a div will be red.

    So the universal selector will stand to mean any selector that would be in the position it is placed.

    When combined with html (i.e. * html {}) you are effectively saying that the rule will be applied to a parent of html. As html is the root and has no parent then the rule should be ignored. All browsers except IE6 understand this and ignore the rule completely.

    IE sees the rule as though it was simply html {etc..}.

    This means that * html is useful for use as a hack and targeting only ie6 and under.

    The backslash is another filter/hack that IE5.x doesn't understand and is combined with the star selector hack to produce a way of targeting ie5 and ie6 in the same rule and fix issues like the broken box model.

    Code:
    .outer{
        width:478px;
        border:1px solid #000;
    }
    * html .outer {
        width: 480px;/* only ie5.x gets this because it doesn't understand the next rule */
        wid\th: 478px;/* only ie6 get this */
    }
    In the above styles ie5.x is given a larger size to make up for its broken box model where it will add borders and padding to the inside of the stated width.

    The backslash is valid code but ie5 trips up on it and jumps to the next rule instead. The backslash cannot appear before the characters a-f 0-9 or it treats then as hex.

    You can read more about it here:

    http://reference.sitepoint.com/css/workaroundsfilters

    Hope that helps

  5. #5
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So what does it mean when the asterisk (*) is inside the element declarations? Like this...

    .myClassHere {
    *height:100%;
    min-height:100%;
    {

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,583
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    That is a hack to target IE6 only. Just like the underscore hack.

    It's best to just seperate the IE6 rules so you can tell what the hacks are.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome. Thanks Ryan!

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,583
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Your welcome

    Off Topic:

    It should have been obvious because min-height isn't recognized by IE6...but height is the same thing basically lol
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Welcome to Sitepoint

    Quote Originally Posted by chrisarella View Post
    So what does it mean when the asterisk (*) is inside the element declarations? Like this...

    .myClassHere {
    *height:100%;
    min-height:100%;
    {
    It's a nasty invalid hack that only ie7 and under will recognise.

    However in the rule that you have it there it will cause problems because IE7 will get height:100% and will also get min-height:100% which means all you get is height:100% and the element won't expand.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •