SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Why would you repeat styles with *??

    I am reading a book on CSS and in the code of one example he styles like following. what is the point of the asteriks?

    Code:
    #mainNav {
      padding-top: 20px;
      padding-bottom: 20px;
    }
    
    #mainNav * {
      padding-left: 20px;
      padding-right: 20px;
    }
    
    #mainNav * * {
      padding-left: 0;
      padding-right: 0;
    }
    Last edited by AutisticCuckoo; Oct 29, 2007 at 00:17. Reason: Fixed broken CODE tags

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It seems to be a workaround for IE's lack of support for child selectors. Ignoring IE, this could be written as,
    Code CSS:
    #mainNav, #mainNav>* {
      padding-top: 20px;
      padding-bottom: 20px;
    }

    The asterisk is the universal selector, matching any element.

    Thus the second rule matches any descendant of #mainNav, including immediate children, while the third rule matches only grandchildren, great-grandchildren, etc.
    Birnam wood is come to Dunsinane


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
  •