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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jul 2011
    Posts
    172
    Thanks
    64
    Thanked 2 Times in 2 Posts

    .x1.x2.x3 vs .x1, .x2, .x3

    Is there any difference between:

    .x1 {color: black;}
    .x2.x3 {color: green;}
    .x1.x2.x3 {color: red;}

    and

    .x1 {color: black;}
    .x2, .x3 {color: green;}
    .x1, .x2, .x3 {color: red;}

    lets say:

    <p class="x1"></p>
    <p class ="x2 x3"></p>
    <p class ="x1 x2 x3"></p>

    Just wondering...
    Last edited by joliett89; 08-09-2011 at 12:40 PM.

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Quote Originally Posted by joliett89 View Post
    Is there any difference between:

    .x1 {color: black;}
    .x2.x3 {color: green;}
    .x1.x2.x3 {color: red;}

    and

    .x1 {color: black;}
    .x2, .x3 {color: green;}
    .x1, .x2, .x3 {color: red;}

    lets say:

    <p class="x1"></p>
    <p class ="x2 x3"></p>
    <p class ="x1 x2 x3"></p>

    Just wondering...

    In 1st scenario .x1.x2.x3 next class like x2 and x3 will apply to child elements of class x.

    In 2nd scenario .x1, .x2, .x3 , it is just grouping of classes which has similar CSS properties.

    .x1, .x2, .x3 is same as .x1 {...} , .x2 {...} , .x3 {...}
    Last edited by vikram1vicky; 08-09-2011 at 02:28 PM.

  • Users who have thanked vikram1vicky for this post:

    joliett89 (08-09-2011)

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Just a suggestion, you could use less cryptic naming conventions as well.

    x1 x2 x3.....24355.........very cryptic and will get very confusing in the future. Give your id's and classes meaningful names.

    <p class="firstParagraph">
    <p class="secondParagraph">
    Teed

  • Users who have thanked teedoff for this post:

    joliett89 (08-09-2011)

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,639
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    Quote Originally Posted by teedoff View Post
    Just a suggestion, you could use less cryptic naming conventions as well.
    I suppose this was just for demonstration purposes.

    But i’m not sure if I understand what vikram1vicky is saying. .x1.x2.x3 {…} only applies to elements that have all three classes while .x1, .x2, .x3 {…} will apply to elements that have any of these classes.

  • Users who have thanked VIPStephan for this post:

    joliett89 (08-09-2011)

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    I suppose this was just for demonstration purposes.
    lol Yes I thought that might be the case AFTER I posted.
    Teed

  • #6
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    I think Vikram was thinking that there was a space between each class (.x1 .x2 .x3), which selects the .x3 class inside .x2 class inside .x1 class.

  • Users who have thanked resdog for this post:

    joliett89 (08-09-2011)


  •  

    Posting Permissions

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