Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 393
  • Last Modified:

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

0
coolispaul
Asked:
coolispaul
  • 4
  • 4
  • 3
  • +2
1 Solution
 
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
 
Alexandre SimõesManager / Technology SpecialistCommented:
Here's a working sample: http://jsfiddle.net/q7h9g/1/
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
Scott Fell, EE MVEDeveloper & 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:
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

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

  • 4
  • 4
  • 3
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now