SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Apply style to first child but not second

    I have the following code...

    Code HTML4Strict:
    <div id="middle">
    	<div class="content_middle">
    	</div>
     
    	<div class="content_middle">
    	</div>

    and want to style the first "content_middle" one way and the rest another way.

    How do I do that (and ensure that it works for all browsers)?

    Thanks,


    Debbie

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Add another class...

    <div class="content_middle class2"></div>

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Add another class...

    <div class="content_middle class2"></div>
    Interesting...

    It isn't a problem to "AND" classes together to created the desired effect?


    Debbie

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    To "add" classes together to "create" the desired effect. No problem at all. Whatever is in the new class will be combined with the other.

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,820
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    What you may be looking for is to target an adjacent sibling. If you are hping to support IE6.. this might be a problem.

    Otherwise:
    .content_middle + div{}
    or .content_middle + .content_middle{}
    or div + .content_middle{}

    depending on your intent and mark up. would do the trick.

    adding classes si another possibility.. but again IE6 doesn't like chaining:
    .class1class2 {}

    and you have to be really careful with specificity if you are trying to OVERRIDE rules present in both the class you are adding.

    in other words:
    .content_class{ color:red;}
    .class2 {color: orange;}

    <div class="content_class class2">some text </div>
    can lead to unpredictable results

    .content_class{ color:red;}
    .content p.class2 {color: orange;} /*now the text color will change to orange*/

    I hope that shed some light on the subject.


  6. #6
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    What you may be looking for is to target an adjacent sibling. If you are hping to support IE6.. this might be a problem.

    Otherwise:
    .content_middle + div{}
    or .content_middle + .content_middle{}
    or div + .content_middle{}

    depending on your intent and mark up. would do the trick.

    adding classes si another possibility.. but again IE6 doesn't like chaining:
    .class1class2 {}

    and you have to be really careful with specificity if you are trying to OVERRIDE rules present in both the class you are adding.

    in other words:
    .content_class{ color:red;}
    .class2 {color: orange;}

    <div class="content_class class2">some text </div>
    can lead to unpredictable results

    .content_class{ color:red;}
    .content p.class2 {color: orange;} /*now the text color will change to orange*/

    I hope that shed some light on the subject.

    Thanks dresden.

    Yes, that gives me some ideas.

    I wimped out and just created #content_slideshow


    Debbie

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    P.S. Thanks Eric too.

    BTW, I have been using FireBug on a fairly regular basis, although I still think its sucks because slows my laptop down so much! (I disable the add-on when I am doing other work.)


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
  •