?
Solved

css :last-child

Posted on 2013-10-23
15
Medium Priority
?
389 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 54

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 54

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 54

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 54

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

Tech or Treat! - Giveaway

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

650 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