?
Solved

css :last-child

Posted on 2013-10-23
15
Medium Priority
?
388 Views
Last Modified: 2013-11-08
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

0
Comment
Question by:coolispaul
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
  • 3
  • +2
15 Comments
 

Author Comment

by:coolispaul
ID: 39594057
thanks padas - will do that in future...
0
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39594085
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
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39594092
Here's a working sample: http://jsfiddle.net/q7h9g/1/
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 total points
ID: 39594101
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
 

Author Comment

by:coolispaul
ID: 39594102
ah ok,

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

Is there an alternative way - maybe :nth-child?
0
 

Author Comment

by:coolispaul
ID: 39594107
thanks padas - yeah ideally i want a css option.

Be easier than creating logic to add another class

Thanks
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39594124
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
 

Author Comment

by:coolispaul
ID: 39594135
yep i know.

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

Thanks
0
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39594158
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
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39594242
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
 
LVL 58

Expert Comment

by:Gary
ID: 39594553
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
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39594739
Very nice Gary!
0
 
LVL 5

Expert Comment

by:Neil_Bradley
ID: 39599054
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
 
LVL 58

Expert Comment

by:Gary
ID: 39599066
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

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question