SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Target the last "row" of elements

    Hi all,

    I have X number of <article> tags on a page. They will be laid out in rows of 3. I need to remove the bottom border on any of them which are on the last 'row'.

    Now, if there were always going to be multiples of 3 then I could use...

    Code CSS:
    article:last-child, article:nth-last-child(2), article:nth-last-child(3) {
            border-bottom: none;
      }

    But the number will change regularly. so I'm stuck.

    I'm using Sass if that helps.

    Any ideas?

    Thanks!

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,537
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Can you use :last-of-type?

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,806
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    more of a logic problem than pure CSS.. I like this!

    1) you need to isolate the end of your rows nth-child(3n)
    2) the isolate the last one using nth-last-child
    3) as you figured you will need to cover the possibility of different remainders.

    demo:

    Code:
    				
    			section, article {display:block;}
    			section { border: 1px solid;overflow: hidden}
    			article { float:left; width:33.3334%; border-right:1px solid; -webkit-box-sizing: border-box ;-moz-box-sizing: border-box ; box-sizing: border-box ; border-bottom:1px solid red;  border-top:none;}
    			.nav article:nth-child(3n)  {border-right:none; float: right}
    			
    			/*this is th epart you are interested in*/
    		    .nav article:nth-child(3n) + article:nth-last-child(2),
    		    .nav article:nth-child(3n) + article:nth-last-child(2)+ article,
     		    .nav article:nth-child(3n):nth-last-child(4)~ article,
     		    .nav article:nth-child(3n) + article:nth-last-child(1)
      		    {background: pink; border-bottom: none }
     
    <section class="nav">
    	<article><a href="#">item</a></article>
    	<article><a href="#">item</a></article>
    	<article><a href="#">item</a></article>
    	<article><a href="#">item</a></article>
    	<article><a href="#">item</a></article>
    	<article><a href="#">item</a></article>
    	<article><a href="#">item</a></article>
    	<article><a href="#">item</a></article>
    	<article><a href="#">item</a></article>
    	<article><a href="#">item</a></article>
    	<article><a href="#">item</a></article>
         </section>


    hope that helps

  4. #4
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow Dresden!

    That's fantastic. I've just realised that there is one more scenario... If there is only a single row. Doable?

    Thanks!

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,806
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    same concept, the key is pattern recognition.

    just add the following selectors:

    Code:
     	    .nav article:first-child:last-child,
     		    .nav article:first-child:nth-last-child(2), .nav article:first-child:nth-last-child(2)+article,
     		    .nav article:first-child:nth-last-child(3), .nav article:first-child:nth-last-child(3)~article
    note you could also do ": only-child" on that first line.

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,537
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Another way to skin the cat...
    Code:
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Last "row" of elements Sans underline</title>
    <!--
    http://www.sitepoint.com/forums/showthread.php?1166873-Target-the-last-quot-row-quot-of-elements
    Thread: Target the last "row" of elements
    2013.08.31 23:17
    mikeebee8
    -->
        <style type="text/css">
    
    section, article {
        display:block;
    }
    section {
        overflow:hidden;
        padding:1px;
    }
    article {
        float:left;
        width:200px;
        border-top:1px solid #000;
        border-right:1px solid #000;
        border-bottom:1px solid transparent;
        border-left:1px solid #000;
        padding:1px 2px 2px;
        margin-left:-1px;
        margin-top:-1px;
    }
    article:nth-child(3n+1) {
        clear:left;
    }
    .nav article:nth-child(3n-1):nth-last-child(3),
    .nav article:nth-child(3n):nth-last-child(3),
    .nav article:nth-child(3n):nth-last-child(2) {
        border-bottom-color:#000;
    }
    a {text-decoration:none;}
    
        </style>
    </head>
    <body>
    
    <section class="nav">
        <article><a href="#">item01</a></article>
        <article><a href="#">item02</a></article>
        <article><a href="#">item03</a></article>
        <article><a href="#">item04</a></article>
        <article><a href="#">item05</a></article>
        <article><a href="#">item06</a></article>
        <article><a href="#">item07</a></article>
        <article><a href="#">item08</a></article>
        <article><a href="#">item09</a></article>
    </section>
    
    </body>
    </html>

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,806
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Ok, am endorsing ronpats method there. Nice use of negatives.
    tho in THAT case I would change the following:
    Code:
    section {
        overflow:hidden;
        padding:0 1px;
    }
    article {
            margin-bottom:-1px; 
    /*  border-right:1px solid #000;[/COLOR] remove*/
    
    article:nth-child(3n) {
        margin-right:-1px;
    }
    
     }




    As I said earlier is all about pattern recognition ( and on occasion the patterns overlap)

  8. #8
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You've both been a great help, thank you so much!

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Or simpler still

    Code:
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    section, article { display:block; }
    section {
    	overflow:hidden;
    	padding:0 1px
    }
    article {
    	float:left;
    	width:200px;
    	border:1px solid #000;
    	padding:1px 2px 2px;
    	margin:0 0 -1px -1px;
    }
    article:nth-child(3n+1) { clear:left; }
    a {text-decoration:none; }
    </style>
    </head>
    <body>
    <section class="nav">
    		<article><a href="#">item01</a></article>
    		<article><a href="#">item02</a></article>
    		<article><a href="#">item03</a></article>
    		<article><a href="#">item04</a></article>
    		<article><a href="#">item05</a></article>
    		<article><a href="#">item06</a></article>
    		<article><a href="#">item07</a></article>
    		<article><a href="#">item08</a></article>
    		<article><a href="#">item09</a></article>
    </section>
    </body>
    </html>

  10. #10
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Crikey!


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
  •