SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 35
  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Pseudo Class first three li's

    I have a list which is generated dynamically. I need to target the first three li's since they need a different top margin than the others, but between those three there are differences as well so I can't target them in one rule. What would be the best way?
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    ul li.first, ul li.second, ul li.third {
    }
    or

    Code:
    ul>li, ul>li+li, ul>li+li+li {
    }

  3. #3
    SitePoint Member
    Join Date
    May 2008
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    Giving specific class to your li (noonop's first solution) is the one IE6 will understand.

    If you use the second one, the Adjacent sibling combinator and the Child selectors are ok starting IE7 (if I do remember right, don't have IE7 here to check) but be aware that the first selector (ul>li) will affect all your li in the list. The second one all of them except the first one and the last one all li exept the first one and second one. You'll have to reset the css for the other by using:

    Code CSS:
    ul>li+li+li+li {}

    By using the pseudo-class :firstchild (starting IE7 ?) on the first one you will get out of the problematic above:

    Code CSS:
    ul>li:firstchild {}
    ul>li:first-child+li {}
    ul>li:first-child+li+li {}


    There is an easy way to select each li seperatly with css3 selector :nth-child(n)
    Code CSS:
    ul>li:first-child  {}
    ul>li:nth-child(2) {}
    ul>li:nth-child(3) {}
    Sadly IE8 and under don't understand it (IE9 does and other modern browsers too)

  4. #4
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice explaining Candygirl.

    I would add the descendat selector-class-child selector combination:

    Code:
    ul li.first, ul li.first+li, ul li.first+li+li {
    }
    I don't think ">" selector would be of very much help here since li will always be a direct child of the ul. So the descendant selector will do just fine, except if you have nested ul's. Even then, ">" would apply to the nested ul's and li's the same way, so you'd probably need a class for the main ul, if the rules doesn't need to apply for the nested ul's.

    The code above is provided with complete element names for readability. In a real code the above will not have ul but a class/id for the ul, or it would be based on the class/id of the ul's parent, and li.first would be just .first. As always, a test code would probably be more suited in pointing out the best way.

  5. #5
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Candygirl View Post
    There is an easy way to select each li seperatly with css3 selector :nth-child(n)
    Code CSS:
    ul>li:first-child  {}
    ul>li:nth-child(2) {}
    ul>li:nth-child(3) {}
    Sadly IE8 and under don't understand it (IE9 does and other modern browsers too)
    Sorry, but that doesn't work.
    nth-child(2) hits the 2nd, 4th, 6th, 8th, 10th etc instance of the item
    nth-child(3) hits the 3rd, 6th, 9th, 12th etc instance.

    If you can't put a class on the relevant items, your best bet is the li:first-child+li construction.

  6. #6
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Stevie, I haven't tested it, but for
    nth-child(2) hits the 2nd, 4th, 6th, 8th, 10th etc instance of the item

    it should be
    nth-child(2n)?

    If the parameter n is missing, then it should work as pointed by Candygirl?

    Code:
    ul>li:nth-child(1) {}
    ul>li:nth-child(2) {}
    ul>li:nth-child(3) {}
    No IE8- support though.

  7. #7
    SitePoint Member
    Join Date
    May 2008
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Stevie D,

    Did you try it ?

    According to the nth-child-pseudo's documentation you have that exemple:

    Examples:

    foo:nth-child(0n+5) /* represents an element foo that is the 5th child
    of its parent element */
    foo:nth-child(5) /* same */
    The behavior you've discribe is, for me, what the
    Code CSS:
    :nth-child(2n+0),:nth-child(3n+0)
    would do ?

    (EDIT the +0 is optional as noonnope write it)
    Last edited by Candygirl; Mar 14, 2011 at 04:21. Reason: noonnope was faster ;) and edit to remplace the 1 by a 0

  8. #8
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Candygirl,

    No, he described:

    :nth-child(2n), :nth-child(3n)

    EDIT: +1 is not optional, +1 would give you a different sequence all together.

    2n = 2*1, 2*2, 2*3 = 2, 4, 6
    2n+1 = 2*1+1, 2*2+1, 2*3+1 = 3, 5, 7 which is neither 2n neither 3n.

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by candygirl
    If you use the second one, the Adjacent sibling combinator and the Child selectors are ok starting IE7 (if I do remember right, don't have IE7 here to check)
    They'll work in IE7.

    :first-child will too, so long as you don't have a comment in there (IE7 will think a comment is a child).

  10. #10
    SitePoint Member
    Join Date
    May 2008
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Stomme poes, thank you for the point

    noonnope, thank you too

    I must confess, because the documentation is in English, I'm having a hard time understanding all the subtilities ;p and I didn't pay attention that, in my test, it was lines 1 4 7 instead of 3 6 9 with the 3n+1

    I think :nth-child(2n+0) will do the same then :nth-child(2n) ?

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    The sitepoint reference has a small section with a table explaining how the values work that makes things a little easier to understand.

    Remember that the examples above would also hit nested lists - if that was an issue.

    As an aside I usually use "nth-of-type" when I am concerned with a specific element although it's not an issue in this case as only list elements can be children of a ul of course.

  12. #12
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, :nth-child(2n+0) will do the same as nt-child(2n).

    Selectors Level 3
    The :nth-child(an+b) pseudo-class notation represents an element that has an+b-1 siblings before it in the document tree, for any positive integer or zero value of n, and has a parent element.
    [...]
    The a and b values must be integers (positive, negative, or zero). The index of the first child of an element is 1.
    [...]
    If both a and b are equal to zero, the pseudo-class represents no element in the document tree.

    The value a [and b] can be negative, but only the positive values of an+b, for n≥0, may represent an element in the document tree.

    Example:

    html|tr:nth-child(-n+6) /* represents the 6 first rows of XHTML tables */

    So, another way to select the first three:
    Code:
    li:nth-child(-n+3) {}
    No IE8-, FF3.0-, and apparently Op10.60- has problems with it: http://www.quirksmode.org/css/contents.html.

  13. #13
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by noonnope View Post
    Stevie, I haven't tested it, but for
    nth-child(2) hits the 2nd, 4th, 6th, 8th, 10th etc instance of the item

    it should be
    nth-child(2n)?

    If the parameter n is missing, then it should work as pointed by Candygirl?

    Code:
    ul>li:nth-child(1) {}
    ul>li:nth-child(2) {}
    ul>li:nth-child(3) {}
    No IE8- support though.
    D'oh!
    Sorry candygirl, you're absolutely right and I'm an idiot who didn't read carefully...

  14. #14
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is bit of a tricky one though! I targeted every third <li> in a row already using my serverside scripting.
    Code CSS:
    #content .gallery .gal1,
    #content .gallery .gal2,
    #content .gallery .gal0 {
    	width: 191px;
    	height: 152px;
    	margin: 15px 10px 0 0;
    	float: left;
    	background: url(../images/site/backgrounds/gallery_background.png) 0 0 no-repeat;	
    }
    #content .gallery .gal0 {
    	margin: 15px 0 0 0;
    }
    Output:
    Code CFM:
    <cfset modStyle = currentRow mod 3>
      <li class="gal#modStyle#"></li>
    And no mather what I try, the first three <li's> are not reacting to any of the suggestions so far.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  15. #15
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Instead of the ColdFusion code, please post the resulting html mark up.

    Since you have the possibility to provide classes server-side, the only question remaining is what browsers do you want to support, not if it'll work or not.

    For a modern CSS3 solution, no IE8-, no FF3-, to be tested in Op, one line selector like this will do:
    Code:
    .gallery li:nth-child(-n+3) {}

    Otherwise, if IE6- is no concern, you can choose between:
    Code:
    .gallery .gal0, .gallery .gal0+li, ul .gallery .gal0+li+li {
    }
    where the first li only gets a class: "gal0", and

    Code:
    .gallery li:firstchild, .gallery li:first-child+li, .gallery li:first-child+li+li {
    }
    where the ul alone needs a class: "gallery".

    Finally, the full proof method: gal0, gal1, gal2 classes, if IE6- is a must. No need for ul's class "gallery", assuming you don't have other li's in the #content having gal# class names.

  16. #16
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by noonnope View Post
    Instead of the ColdFusion code, please post the resulting html mark up.

    Since you have the possibility to provide classes server-side, the only question remaining is what browsers do you want to support, not if it'll work or not.
    I would love to support as many browsers as possible. I don't care at this point if IE 6 would be supported. Excuse me that I past a mixed CF html mark up in a html code:
    Code HTML4Strict:
    <ul class="gallery">
    	<cfloop query="getEventgallery">
      	<cfset modStyle = currentRow mod 3>
    			<li class="gal#modStyle#"><a href="#link#" rel="prettyPhoto" title="#description#"><img src="event_gallery/#photo#" alt="#description#" /></a></li>
        <cfif modStyle eq 0></cfif>  
      </cfloop>
    </ul>
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  17. #17
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, I mean the resulting HTML, as in client-side HTML.
    The above is still CF.

  18. #18
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    <li class="gal#modStyle#">
    I'm pretty sure (but did not look it up) that hashmarks (#) are not allowed in class tokens. So, without CF, I assume that stuff between the hashes gets filled with something?

  19. #19
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    I'm pretty sure (but did not look it up) that hashmarks (#) are not allowed in class tokens. So, without CF, I assume that stuff between the hashes gets filled with something?
    That's my point! Using the mod 3, I make sure that the third one in the row don't have a right margin, since I don't know how many images will be involved I need to do this. The stuff between the hash marks is the 1, 2, 0 (CF returns 0 as the third one)

    @ noonnope: This is the returned html:
    Code HTML4Strict:
    <ul class="gallery">
     
    			<li class="gal1"><a href="http://www.youtube.com/watch?v=GYEDpUpBock" rel="prettyPhoto" title="Drambuie Event Thessaloniki"><img src="event_gallery/drambuie_thessaloniki.jpg" alt="Drambuie Event Thessaloniki" /></a></li>
     
    			<li class="gal2"><a href="http://www.youtube.com/watch?v=2lGVRbGSvo4" rel="prettyPhoto" title="Drambui Event Athens"><img src="event_gallery/drambuie_athens.jpg" alt="Drambui Event Athens" /></a></li>
     
    			<li class="gal0"><a href="http://www.youtube.com/watch?v=aWptAShzKSU" rel="prettyPhoto" title="Bacardi Event Athens"><img src="event_gallery/bacardi_athens.jpg" alt="Bacardi Event Athens" /></a></li>
     
    			<li class="gal1"><a href="http://www.youtube.com/watch?v=1JlFBnQTY7s" rel="prettyPhoto" title="Bombay Sapphire Event Athens"><img src="event_gallery/bombay_sapphire_athens.jpg" alt="Bombay Sapphire Event Athens" /></a></li>
     
    			<li class="gal2"><a href="http://www.youtube.com/watch?v=meN32koefY0" rel="prettyPhoto" title="Bombay Sapphire Event Thessaloniki"><img src="event_gallery/bombay_sapphire_thessaloniki.jpg" alt="Bombay Sapphire Event Thessaloniki" /></a></li>
     
    			<li class="gal0"><a href="http://www.youtube.com/watch?v=vVBQjwq0yDk" rel="prettyPhoto" title="In a Sentimental Mood"><img src="event_gallery/in_a_sentimental_mood.jpg" alt="In a Sentimental Mood" /></a></li>
     
     
    </ul>
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  20. #20
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm lost now. You said the first three, now you say every other 3rd li.

    A picture would look better, but I'd say a li(#n mod 3 = 0#) class="noRightMargin" is all you need:

    Code:
    #content .gallery li {
        width: 191px;
        height: 152px;
        margin: 15px 10px 0 0;
        float: left;
        background: url(../images/site/backgrounds/gallery_background.png) 0 0 no-repeat;   
    }
    #content .gallery .noRightMargin {
        margin-right: 0;
    }
    For every other 3rd li you apply a margin right 0, and you do that by adding the class noRightMargin for li's that have 0 as the remainder of the division between their index and 3.

  21. #21
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by noonnope View Post
    I'm lost now. You said the first three, now you say every other 3rd li.

    A picture would look better, but I'd say a li(#n mod 3 = 0#) class="noRightMargin" is all you need:

    Code:
    #content .gallery li {
        width: 191px;
        height: 152px;
        margin: 15px 10px 0 0;
        float: left;
        background: url(../images/site/backgrounds/gallery_background.png) 0 0 no-repeat;   
    }
    #content .gallery .noRightMargin {
        margin-right: 0;
    }
    For every other 3rd li you apply a margin right 0, and you do that by adding the class noRightMargin for li's that have 0 as the remainder of the division between their index and 3.
    You should not be lost! Like I said The first three need a different top margin. the third <li> of every row has no right margin (which I solved with my server side scripting) which is working fine the way I have it.

    I have it solved by giving the <ul> the negative top margin needed, but I really would like to know how to target those three first <li's> in the structure given!
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  22. #22
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What first three?

    You have "the first three" repeating in the "second first three". A picture would shed most light on this matter.

  23. #23
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by noonnope View Post
    What first three?

    You have "the first three" repeating in the "second first three". A picture would shed most light on this matter.
    I hear what you say The first row (1, 2, 0) or the top row in other words. I don't want the 15px top margin to be applied to the first row
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  24. #24
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <ul class="gallery">
        <cfloop query="getEventgallery">
    
        row = currentRow mod 3
    
        if currentRow <=3 then
          modStyle = row
        endif
         
        if (currentRow >3) and (row != 0) then
          modStyle = ''
        else
          modStyle = row
        endif
    
                <li class="gal#modStyle#"><a href="#link#" rel="prettyPhoto" title="#description#"><img src="event_gallery/#photo#" alt="#description#" /></a></li>
        <cfif modStyle eq 0></cfif> 
      </cfloop>
    </ul>

    Code:
    <ul class="gallery">
       
                <li class="gal1"><a href="http://www.youtube.com/watch?v=GYEDpUpBock" rel="prettyPhoto" title="Drambuie Event Thessaloniki"><img src="event_gallery/drambuie_thessaloniki.jpg" alt="Drambuie Event Thessaloniki" /></a></li>
       
                <li class="gal2"><a href="http://www.youtube.com/watch?v=2lGVRbGSvo4" rel="prettyPhoto" title="Drambui Event Athens"><img src="event_gallery/drambuie_athens.jpg" alt="Drambui Event Athens" /></a></li>
       
                <li class="gal0"><a href="http://www.youtube.com/watch?v=aWptAShzKSU" rel="prettyPhoto" title="Bacardi Event Athens"><img src="event_gallery/bacardi_athens.jpg" alt="Bacardi Event Athens" /></a></li>
       
                <li><a href="http://www.youtube.com/watch?v=1JlFBnQTY7s" rel="prettyPhoto" title="Bombay Sapphire Event Athens"><img src="event_gallery/bombay_sapphire_athens.jpg" alt="Bombay Sapphire Event Athens" /></a></li>
       
                <li><a href="http://www.youtube.com/watch?v=meN32koefY0" rel="prettyPhoto" title="Bombay Sapphire Event Thessaloniki"><img src="event_gallery/bombay_sapphire_thessaloniki.jpg" alt="Bombay Sapphire Event Thessaloniki" /></a></li>
       
                <li class="gal0"><a href="http://www.youtube.com/watch?v=vVBQjwq0yDk" rel="prettyPhoto" title="In a Sentimental Mood"><img src="event_gallery/in_a_sentimental_mood.jpg" alt="In a Sentimental Mood" /></a></li>
    
                <li><a href="http://www.youtube.com/watch?v=1JlFBnQTY7s" rel="prettyPhoto" title="Bombay Sapphire Event Athens"><img src="event_gallery/bombay_sapphire_athens.jpg" alt="Bombay Sapphire Event Athens" /></a></li>
       
                <li><a href="http://www.youtube.com/watch?v=meN32koefY0" rel="prettyPhoto" title="Bombay Sapphire Event Thessaloniki"><img src="event_gallery/bombay_sapphire_thessaloniki.jpg" alt="Bombay Sapphire Event Thessaloniki" /></a></li>
       
                <li class="gal0"><a href="http://www.youtube.com/watch?v=vVBQjwq0yDk" rel="prettyPhoto" title="In a Sentimental Mood"><img src="event_gallery/in_a_sentimental_mood.jpg" alt="In a Sentimental Mood" /></a></li>  
     
    </ul>
    Code:
    #content .gallery li {
        width: 191px;
        height: 152px;
        margin: 15px 10px 0 0;
        float: left;
        background: url(../images/site/backgrounds/gallery_background.png) 0 0 no-repeat;   
    }
    
    #content .gallery .gal1,
    #content .gallery .gal2 {
        margin-top: 0;
    }
    
    #content .gallery .gal0 {
        margin-right: 0;
    }

  25. #25
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I keep struggling with these Pseudo classes:

    This is what I have in my CSS:
    Code CSS:
    .content p {
    	margin: 15px 0 0;
    	font-size: 90%;
    }
     
    .content p.first {
    	margin-top: 0;
    	font-size: 110%;
    }

    and this is the html:
    Code HTML4Strict:
    <div class="content">
    <img class="yiannis" src="http://www.sitepoint.com/forums/images/site/photos/yiannis.jpg" alt="" />
    <p>Yiannis Tsapatori is one of the most talented and renowned hair ....</p>
    <p>His magical hands have transformed a range of known and unknown...</p>
    <p>Yiannis was born a hairdresser and was......</p>
    <p>With his weapons... </p>
    <p>Yiannis Tsapatori now lives and works in New York.</p>
    </div>
    Note again: the content is coming from the database! what you see as html is what I took from the uploaded page. Nether the top-margin or the font-size is changing?

    Edit: I tried .content p:first-child, .content img p.first and .content img p:first-child as well
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)


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
  •