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 14 of 14
  1. #1
    Regular Coder najkiie's Avatar
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    103
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Using commas to select different CSS Styles?

    I've been wondering how to do this for a while now... I'm not sure how to explain it.. so i'll try my best to show you.


    Instead of using:

    .class-1 a {
    css here
    }

    class-2 a {
    css here
    }


    i want to use something like this, but i don't know if i'm doing it right, or how to do it...:

    class-1 a, class2 a {
    css for both classes here..
    }


    Is that possible to do, and am i doing it right? Should i just add a comma between each class name, like above?

    Thanks
    -Nike
    -Nike - PTS - Blubbz
    I would love to change the world, but they won't give me the source code.

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Yes, you're doing it right, but you're forgetting the full stops before your class names ^^

  • #3
    Regular Coder najkiie's Avatar
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    103
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by CyanLight View Post
    Yes, you're doing it right, but you're forgetting the full stops before your class names ^^
    More info please.. what do you mean?
    -Nike - PTS - Blubbz
    I would love to change the world, but they won't give me the source code.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I guess it depends on where you are from to understand what a full stop means. It means a dot or a period in the American English language.
    Code:
    .class-1 a, .class2 a {
    css for both classes here..
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder najkiie's Avatar
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    103
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    I guess it depends on where you are from to understand what a full stop means. It means a dot or a period in the American English language.
    Code:
    .class-1 a, .class2 a {
    css for both classes here..
    }
    Oh yea, i'm sorry... I totally forgot the dots xD, thanks. I understand now
    -Nike - PTS - Blubbz
    I would love to change the world, but they won't give me the source code.

  • #6
    New Coder
    Join Date
    Jan 2009
    Location
    Cornwall - UK
    Posts
    47
    Thanks
    0
    Thanked 9 Times in 9 Posts
    If you are trying to allow people to change the style, colours etc of a website you are going the wrong way about it.


    Code:
    .class1, .class2
     {
       color:#000;
       background:#fff;
     }
    Will asign black text on a white background to both classes. It's the same as:

    Code:
    .class1
     {
       color:#000;
       background:#fff;
     }
    
    .class2
     {
       color:#000;
       background:#fff;
     }
    All the best - redspyder
    Last edited by redspyder; 02-17-2009 at 12:41 AM.

  • #7
    Regular Coder najkiie's Avatar
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    103
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks redspyder.

    I've seen people do this too:

    .class1 .class2 {
    css here
    }

    without the comma between, what is that for then? Is it even correct?

    -Nike
    -Nike - PTS - Blubbz
    I would love to change the world, but they won't give me the source code.

  • #8
    Regular Coder
    Join Date
    Nov 2004
    Location
    The land of chocolate
    Posts
    226
    Thanks
    1
    Thanked 16 Times in 16 Posts
    It means an element with class2 is nested within an element with class1. An example would be:

    Code:
    <div class="class1">
      <div class="class2">
        The css is applied to this content.
      </div>
    </div>
    -Snow

    Susie, if you want to see your doll again, leave $100 in this envelope by the tree out front. Do NOT call the police. You CANNOT trace us. You CANNOT find us.

    Sincerely,
    - Calvin.

  • #9
    Regular Coder najkiie's Avatar
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    103
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Question

    Quote Originally Posted by snowieken View Post
    It means an element with class2 is nested within an element with class1. An example would be:

    Code:
    <div class="class1">
      <div class="class2">
        The css is applied to this content.
      </div>
    </div>
    Why can't i just use

    class-2 {
    css here..
    }

    instead of

    class-1 .class-2 {
    css here...
    }

    ?? I don't see the point with it?
    -Nike - PTS - Blubbz
    I would love to change the world, but they won't give me the source code.

  • #10
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    It makes the selector more specific, which gives it more weight in deciding the final outcome.

    Also, you may have classes outside a container element, like so:
    Code:
    
    <ul>
      <li class="alt">miaow</li>
      <li>rawr</li>
      <li class="non-feline">
        <ul>
          <li class="alt">squeak</li>
          <li class="alt">moo</li>
          <li>eep!</li>
        </ul>
      <li class="alt">meow</li>
    </ul>
    
    You may want to select only the .alts within .non-feline.

  • #11
    Regular Coder najkiie's Avatar
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    103
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Aaaah, ook, i think i get it.


    If i use this CSS

    .outer-div {
    font-size: 16px;
    font-weight: bold;
    }

    .inner-div {
    font-size: 16px;
    }


    For this code...

    <div class="outer-div">
    <div class="inner-div"></div>
    </div>


    Then the outer Div will be bold and with a 16px font.. and the inner div will have a 16px font and then it will use the bold tag from the outer div..? So the inner-div will also be bold?
    Last edited by najkiie; 02-16-2009 at 08:45 AM.
    -Nike - PTS - Blubbz
    I would love to change the world, but they won't give me the source code.

  • #12
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    So the inner-div will also be bold?
    Yes it'll be inherited to the .inner-div

    (assuming you meant
    Code:
    .inner-div {
    font-size: 16px;
    }
    above)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #13
    Regular Coder najkiie's Avatar
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    103
    Thanks
    7
    Thanked 0 Times in 0 Posts
    abduraooft, yes.. sorry i wrote wrong :P

    Exellent, now i understand this too Thanks!
    -Nike - PTS - Blubbz
    I would love to change the world, but they won't give me the source code.

  • #14
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Exellent, now i understand this too
    CSS specificity is also worth a look.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Tags for this Thread

    Posting Permissions

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