Solved

css :last-child

Posted on 2013-10-23
15
381 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 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 52

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 52

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 52

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: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering 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

Suggested Solutions

Title # Comments Views Activity
Adding a countdown to HTA 12 98
Change how page is organized 3 37
disable open new tab with right mouse click in <a> tag 3 19
Incorrect css styling in footer 3 3
Find out what you should include to make the best professional email signature for your organization.
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…
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)
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

749 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