Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Jan 2004
    Location
    USA
    Posts
    364
    Thanks
    12
    Thanked 6 Times in 6 Posts

    Question CSS: classes after each other

    What does it mean when you have something like this:

    .classone .classtwo {background: green;}

    What about this:

    .classone #idone .classtwo {color: blue;}

  • #2
    New Coder
    Join Date
    Dec 2003
    Location
    California
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's just a simple descendant selector.

    Code:
    .classone .classtwo
    Selects any element with a class attribute that contains the word classtwo that is a descendant of any element with a class attribute that contains the word classone.

    And,
    Code:
    .classone #idone .classtwo
    Selects any element with a class attribute that contains the word classtwo that is a descendant of any element with an id attribute that equals idone that is a descendant of any element with a class attribute that contains the word classone.

    // freak

  • #3
    Regular Coder
    Join Date
    Jan 2004
    Location
    USA
    Posts
    364
    Thanks
    12
    Thanked 6 Times in 6 Posts
    So, the first example in HTML would be:

    ...<p class="classone">stuff<b class="classtwo">more stuf</b></p>...

    correct? That also means the bold stuff would have a green background. Am I right?

    If this is correct, thanks!

    Also, isn't: .classone .classtwo {background:green;}

    the same as: .classone > .classtwo {background:green;}
    Last edited by qwertyuiop; 02-10-2004 at 04:31 AM.

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    Iowa / Notre Dame
    Posts
    538
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I will first direct you to a recent thread which will answer your question(s) very well: http://www.codingforums.com/showthre...threadid=32707

    Now then, .classone .classtwo is not the same as .classone > .classtwo. The first will select any element with the class "classtwo" contained anywhere inside of an element with the class "classone". Where as the second selector will only select an element with class "classtwo" that is a direct decendant of an element with class"classone". eg:
    Code:
    <div class="classone">
      <div class="randomdiv">
        <div class="classtwo"></div>
      </div>
    </div>
    Your first selector (.classone .classtwo) will select the div with class "classtwo", whereas your second selector will not. If your code was changed to:
    Code:
    <div class="classone">
      <div class="classtwo"></div>
    </div>
    Both selectors would select the div with class "classtwo".
    My Site {Mike's Adventures}

    Yikes, forums are almost too much fun.

  • #5
    New Coder
    Join Date
    Dec 2003
    Location
    California
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Almost, but, not exactly.

    .classone .classtwo matches any descendant of .classone with class .classtwo while .classone > .classtwo will match any child of .classone with class .classtwo.

    For "english" translations of CSS Selectors check out the SelectORacle.

    // freak

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    Iowa / Notre Dame
    Posts
    538
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Aren't the words "direct descendant" and "child" synonymous in the context of CSS?
    My Site {Mike's Adventures}

    Yikes, forums are almost too much fun.

  • #7
    Regular Coder
    Join Date
    Jan 2004
    Location
    USA
    Posts
    364
    Thanks
    12
    Thanked 6 Times in 6 Posts

    Thumbs up

    ok, i think i understand it now. Thanks all of you!

  • #8
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by qwertyuiop


    Also, isn't: .classone .classtwo {background:green;}
    the same as: .classone > .classtwo {background:green;}
    No, .classone > .classtwo *shouldn't* work. This is because a space is a combinator, as is ">".
    You would type it as
    Code:
    .classone>.classtwo
    Merely a heads up to avoid bad practices.

    *untested

    I take no responsibility for the above nonsense.


    Left Justified


  •  

    Posting Permissions

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