css :last-child

Im trying to use last child to hide a border to the last div with a class of "row". But, it doesnt work - any ideas?

my css is:
.row {
  border-bottom:1px solid #ccc;
  padding-bottom:40px;
  float:left;
  margin-bottom:40px
}
.row:last-child { border:none }

Open in new window

my HTML is
<section id="latest" class="fixedwidth">
  <div class="row">
    <div class="latest-item"> <span class="type">NEWS</span>
      <h4>OREM IPSUM DOLOR SIT AMET, CONSEC TETUR ADIPISCING ELIT. </h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nisl massa, luctus vel odio at, tempus congue mauris. Pellentesque mattis nunc lacinia, ornare leo sit amet, viverra ante. V</p>
      <a href="" class="more">Read more</a> </div>
    <div class="latest-item"> <span class="type">BLOG</span>
      <h4>OREM IPSUM DOLOR SIT AMET, CONSEC TETUR ADIPISCING ELIT. </h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nisl massa, luctus vel odio at, tempus congue mauris. Pellentesque mattis nunc lacinia, ornare leo sit amet, viverra ante. V</p>
      <a href="" class="more">Read more</a> </div>
    <div class="latest-item last-child"> <span class="type">NEWS</span>
      <h4>OREM IPSUM DOLOR SIT AMET, CONSEC TETUR ADIPISCING ELIT. </h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nisl massa, luctus vel odio at, tempus congue mauris. Pellentesque mattis nunc lacinia, ornare leo sit amet, viverra ante. V</p>
      <a href="" class="more">Read more</a> </div>
  </div>
  <div class="clearfix"></div>
  <div class="row">
    <div class="latest-item"> <span class="type">NEWS</span>
      <h4>OREM IPSUM DOLOR SIT AMET, CONSEC TETUR ADIPISCING ELIT. </h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nisl massa, luctus vel odio at, tempus congue mauris. Pellentesque mattis nunc lacinia, ornare leo sit amet, viverra ante. V</p>
      <a href="" class="more">Read more</a> </div>
    <div class="latest-item"> <span class="type">BLOG</span>
      <h4>OREM IPSUM DOLOR SIT AMET, CONSEC TETUR ADIPISCING ELIT. </h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nisl massa, luctus vel odio at, tempus congue mauris. Pellentesque mattis nunc lacinia, ornare leo sit amet, viverra ante. V</p>
      <a href="" class="more">Read more</a> </div>
    <div class="latest-item last-child"> <span class="type">NEWS</span>
      <h4>OREM IPSUM DOLOR SIT AMET, CONSEC TETUR ADIPISCING ELIT. </h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nisl massa, luctus vel odio at, tempus congue mauris. Pellentesque mattis nunc lacinia, ornare leo sit amet, viverra ante. V</p>
      <a href="" class="more">Read more</a> </div>
  </div>
  <div class="clearfix"></div>
  <div class="row">
    <div class="latest-item"> <span class="type">NEWS</span>
      <h4>OREM IPSUM DOLOR SIT AMET, CONSEC TETUR ADIPISCING ELIT. </h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nisl massa, luctus vel odio at, tempus congue mauris. Pellentesque mattis nunc lacinia, ornare leo sit amet, viverra ante. V</p>
      <a href="" class="more">Read more</a> </div>
    <div class="latest-item"> <span class="type">BLOG</span>
      <h4>OREM IPSUM DOLOR SIT AMET, CONSEC TETUR ADIPISCING ELIT. </h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nisl massa, luctus vel odio at, tempus congue mauris. Pellentesque mattis nunc lacinia, ornare leo sit amet, viverra ante. V</p>
      <a href="" class="more">Read more</a> </div>
    <div class="latest-item last-child"> <span class="type">NEWS</span>
      <h4>OREM IPSUM DOLOR SIT AMET, CONSEC TETUR ADIPISCING ELIT. </h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nisl massa, luctus vel odio at, tempus congue mauris. Pellentesque mattis nunc lacinia, ornare leo sit amet, viverra ante. V</p>
      <a href="" class="more">Read more</a> </div>
  </div>
  <div class="clearfix"></div>
  <div class="pagination">1 of 1
  </div>
</section>

Open in new window

coolispaulAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
The problem is in this code the child is not what you think it is.  Perhaps somebody else may have pure css option.  What I would do is place  another class called, "last" in the last row like
<div class="row last">

Open in new window

With css
.row.last {border:none; }

Open in new window

Working sample http://jsbin.com/oNaLUQUb/1/edit?html,css,output
0
 
coolispaulAuthor Commented:
thanks padas - will do that in future...
0
 
Alexandre SimõesManager / Technology SpecialistCommented:
Your problem is that the .row is not the last child of the parent.
After all the rows you have
    <div class="clearfix"></div>
    <div class="pagination">1 of 1</div>

Open in new window

Remove these two and the css selector will work as you expect
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
Alexandre SimõesManager / Technology SpecialistCommented:
Here's a working sample: http://jsfiddle.net/q7h9g/1/
0
 
coolispaulAuthor Commented:
ah ok,

I do need these to be part of the section though.

Is there an alternative way - maybe :nth-child?
0
 
coolispaulAuthor Commented:
thanks padas - yeah ideally i want a css option.

Be easier than creating logic to add another class

Thanks
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
If you are generating this dynamically, you can of course use whatever serverside code you are currently using.  You could also use js/jquery.
0
 
coolispaulAuthor Commented:
yep i know.

I was just hoping to do it with css. Not a problem tho...

Thanks
0
 
Alexandre SimõesManager / Technology SpecialistCommented:
Simply wrap the rows with another div.
Here's a working sample: http://jsfiddle.net/q7h9g/2/
<section id="latest" class="fixedwidth">
    <div class="rows">
        <div class="row">
            <div class="latest-item"> <span class="type">NEWS</span>

                 <h4>OREM IPSUM DOLOR SIT AMET, CONSEC TETUR ADIPISCING ELIT. </h4>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nisl massa, luctus vel odio at, tempus congue mauris. Pellentesque mattis nunc lacinia, ornare leo sit amet, viverra ante. V</p> <a href="" class="more">Read more</a> 
            </div>
            <div class="latest-item"> <span class="type">BLOG</span>

                 <h4>OREM IPSUM DOLOR SIT AMET, CONSEC TETUR ADIPISCING ELIT. </h4>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nisl massa, luctus vel odio at, tempus congue mauris. Pellentesque mattis nunc lacinia, ornare leo sit amet, viverra ante. V</p> <a href="" class="more">Read more</a> 
            </div>
            <div class="latest-item last-child"> <span class="type">NEWS</span>

                 <h4>OREM IPSUM DOLOR SIT AMET, CONSEC TETUR ADIPISCING ELIT. </h4>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nisl massa, luctus vel odio at, tempus congue mauris. Pellentesque mattis nunc lacinia, ornare leo sit amet, viverra ante. V</p> <a href="" class="more">Read more</a> 
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="row">
            <div class="latest-item"> <span class="type">NEWS</span>

                 <h4>OREM IPSUM DOLOR SIT AMET, CONSEC TETUR ADIPISCING ELIT. </h4>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nisl massa, luctus vel odio at, tempus congue mauris. Pellentesque mattis nunc lacinia, ornare leo sit amet, viverra ante. V</p> <a href="" class="more">Read more</a> 
            </div>
            <div class="latest-item"> <span class="type">BLOG</span>

                 <h4>OREM IPSUM DOLOR SIT AMET, CONSEC TETUR ADIPISCING ELIT. </h4>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nisl massa, luctus vel odio at, tempus congue mauris. Pellentesque mattis nunc lacinia, ornare leo sit amet, viverra ante. V</p> <a href="" class="more">Read more</a> 
            </div>
            <div class="latest-item last-child"> <span class="type">NEWS</span>

                 <h4>OREM IPSUM DOLOR SIT AMET, CONSEC TETUR ADIPISCING ELIT. </h4>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nisl massa, luctus vel odio at, tempus congue mauris. Pellentesque mattis nunc lacinia, ornare leo sit amet, viverra ante. V</p> <a href="" class="more">Read more</a> 
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="row">
            <div class="latest-item"> <span class="type">NEWS</span>

                 <h4>OREM IPSUM DOLOR SIT AMET, CONSEC TETUR ADIPISCING ELIT. </h4>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nisl massa, luctus vel odio at, tempus congue mauris. Pellentesque mattis nunc lacinia, ornare leo sit amet, viverra ante. V</p> <a href="" class="more">Read more</a> 
            </div>
            <div class="latest-item"> <span class="type">BLOG</span>

                 <h4>OREM IPSUM DOLOR SIT AMET, CONSEC TETUR ADIPISCING ELIT. </h4>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nisl massa, luctus vel odio at, tempus congue mauris. Pellentesque mattis nunc lacinia, ornare leo sit amet, viverra ante. V</p> <a href="" class="more">Read more</a> 
            </div>
            <div class="latest-item last-child"> <span class="type">NEWS</span>

                 <h4>OREM IPSUM DOLOR SIT AMET, CONSEC TETUR ADIPISCING ELIT. </h4>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nisl massa, luctus vel odio at, tempus congue mauris. Pellentesque mattis nunc lacinia, ornare leo sit amet, viverra ante. V</p> <a href="" class="more">Read more</a> 
            </div>
        </div>
    </div>
    <div class="clearfix"></div>
    <div class="pagination">1 of 1</div>
</section>

Open in new window

0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
One way or another, you need to change something.

1) As AlexCode Suggests, small updates to your HTML

2) Use serverside code to add a special class to the div where you don't want the border

3) Use jquery to find the last div with the class .row and append the class as suggested that will remove the border (.addClass)
0
 
GaryCommented:
Just need to rejig your css slightly, no need for extra markup or classes

.row {
  border-top:1px solid #ccc;
  padding-top:40px;
  float:left;
  margin-bottom:40px
}
.row:first-child { border:none;padding:0 }

Open in new window

0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Very nice Gary!
0
 
Neil_BradleyWeb UX/UI DeveloperCommented:
I use a handy piece of jquery that adds a class to the first and last of all html list items on your web page.
IE: The first list item would look like this <li class=first"> and the last <li class="last">

This is the jquery
  $('ul').each(function() {
   $(this).find('li:last-child').addClass('last');
   $(this).find('li:first-child').addClass('first');
   });

Open in new window


With the classes added by jquery all you then need to do is to write a ".last" and ".first" class in your style sheet and you have complete control over your list items..
Cheers,
N
0
 
GaryCommented:
That makes no sense - why use last/first child to look for an element just so you can add a class to say it is the first/last.
Apart from that you don't use javascript to do what CSS does.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.