SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: selectors and their targets...

  1. May 23, 2005 20:43 #1
    FreakyStyley
    FreakyStyley is offline
    SitePoint Enthusiast FreakyStyley's Avatar
    Join Date
    May 2005
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    selectors and their targets...

    Hi guys,

    I've seen some css scripts where different tags were used (using check source) but I've been checking so many that I can't remember where it was that I saw it. DOH! (...in a loud Homer voice) :P

    something along the lines of:

    #header-nav>img{ /* is this the right format? */
    whatever
    }

    or is this better..............

    #header-nav img{
    whatever
    }

    AND....................

    .whatever, .whatever-more{
    whatever
    }

    these are classes targeting other classes in the same *.css file? or what?

    AND......................

    /* \*/
    * html .flip, * html .flop{
    whatever
    }
    /* */

    This one the class "flip" and "flop" are being targeted in an external html file?

    Any advice on the above specificaly would be great!

    and finally, are there any limitations cross-browser wise with the actual tag used? ie: #flip-123 or #21_flip and so on

    thanks in advance!

    - Styley
  2. May 23, 2005 22:21 #2
    Kravvitz
    Kravvitz is offline
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.w3.org/TR/REC-CSS2/selector.html

    http://css-discuss.incutio.com/?page=CssHack

    1) the direct descendent selector -- IE/Win doesn't support it
    2) descendent selector -- most basic combinator
    3) mustiple selector chains being given the same rule
    4) those two filters are used in combination to only show code to IE/Win

    ID's should be unique.
    ID's can not start with a number.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.
  3. May 23, 2005 22:31 #3
    AutisticCuckoo
    AutisticCuckoo is offline
    SitePoint Author silver trophybronze trophy
    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by FreakyStyley
    I've seen some css scripts where different tags were used
    CSS scripts, huh? Using tags no less!
    (A CSS file is called a style sheet, and it consists of selectors and rule blocks made up by property/value pairs.)

    Quote Originally Posted by FreakyStyley
    #header-nav>img{ /* is this the right format? */
    whatever
    }
    This specifies an <img> element which is the immediate child of an element which has id="header-nav". It is not supported by IE/Win.

    Quote Originally Posted by FreakyStyley
    or is this better..............

    #header-nav img{
    whatever
    }
    It's different, but not necessarily better, because it means something else. This specifies an <img> element which is a descendant of an element which has id="header-nav". It may be an immediate child, a grandchild, a great-grandchild, etc.

    Quote Originally Posted by FreakyStyley
    .whatever, .whatever-more{
    whatever
    }

    these are classes targeting other classes in the same *.css file? or what?
    This specifies any element which has class="whatever" or class="whatever-more".

    Quote Originally Posted by FreakyStyley
    /* \*/
    * html .flip, * html .flop{
    whatever
    }
    /* */

    This one the class "flip" and "flop" are being targeted in an external html file?
    These are hacks for targeting IE/Win. The '*' is the universal selector, i.e. it matches any element. Thus '* html' matches an <html> element which is a descendant of any other element. Since <html> is always the root element in an HTML document, it has no ancestors, so this selector should never match anything. Microsoft, however, believes that there is something above <html>. Probably Bill Gates. This useful bug exists in both IE/Win and IE/Mac.

    The escaped comment hack uses another parsing bug in IE/Mac, to hide the CSS rule from IE/Mac and thus target only IE/Win. IE/Mac doesn't understand that the comment on the first line ends, because of the backslash character before '*/'. Therefore it thinks everything up to the '*/' on the last line is one long comment.

    Quote Originally Posted by FreakyStyley
    and finally, are there any limitations cross-browser wise with the actual tag used? ie: #flip-123 or #21_flip and so on
    Some older browsers don't like underscores in ID attributes, and an ID must never start with a digit.
    Birnam wood is come to Dunsinane
  4. May 24, 2005 00:50 #4
    Buddy Bradley
    Buddy Bradley is offline
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo
    A CSS file is called a style sheet, and it consists of selectors and rule blocks made up by property/value pairs.
    CSS declarations is another commonly used term.
    Digital Web Magazine | The Watchmaker Project
    Bite Size Standards | 29digital Design Studio
  5. May 24, 2005 08:17 #5
    Paul O'B
    Paul O'B is offline
    The CSS Clinic is open silver trophybronze trophy
     SitePoint Award Recipient Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    37,800
    Mentioned
    99 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by tommy
    however, believes that there is something above <html>. Probably Bill Gates
    lol
    www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
    Ultimate CSS Reference
    Check out SitePoint's latest JavaScript challenge
  6. May 24, 2005 10:08 #6
    FreakyStyley
    FreakyStyley is offline
    SitePoint Enthusiast FreakyStyley's Avatar
    Join Date
    May 2005
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey guys thanks for the info....

    AutisticCuckoo: thanks for the lowdown!
« Previous Thread | Next Thread »

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
  •  

Forum Rules