Target the last "row" of elements

HTML & CSS
1

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…


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

Can you use :last-of-type?

3

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:

				
			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

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

same concept, the key is pattern recognition.

just add the following selectors:

 	    .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

Another way to skin the cat…


<!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

Ok, am endorsing ronpats method there. Nice use of negatives.
tho in THAT case I would change the following:

section {
    overflow:hidden;
    padding:0 1px;
}
article {
        margin-bottom:-1px; 
/*  border-right:1px solid #000;[/COLOR] remove*/

article:nth-child(3n) {
    margin-right:-1px;
}

 }

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

8

You’ve both been a great help, thank you so much!

9

Or simpler still :slight_smile:


<!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

Crikey!