How to hide last divider in list of comments using CSS?

Question

I want to hide last divider between comments using css. Code is below.

<div id="question_comments" class="comments_container">
  <div class="comment">
    <div class="comment_details">
      <div>
        <p>Comment1</p>
      </div>
    </div>
  </div>
  <div class="hr-comment"></div>
  <div class="comment">
    <div class="comment_details">
      <div>
        <p>Comment2</p>
      </div>
    </div>
  </div>
  <div class="hr-comment"></div>
  <div id="question_comment">
    <form> ... </form>
  </div>
  <div class="clear"></div>
</div>

I am generating that in rails view:

<div id="question_comments" class="comments_container">
  <% @question.comments.order("created_at ASC").each do |comment| %>
    <%= render :partial => "questions/comment", :locals => { :comment => comment } %>
    <div class="hr-comment"></div>
  <% end %>
  <%= render :partial => 'new_comment', :locals => {:targit => @question, :answer => nil} %>
  <div class="clear"></div>
</div>

I tried that:

div.hr-comment {
  background:url(hr-background.gif) repeat-x;width:100%;height:2px;margin-top:7px;margin-bottom:7px;width:310px;
}

.hr-comment:last-child { 
    display: none 
}

Goal is how to do that without using ruby in view.

Answer 1

It's generally frowned upon to add extra markup like empty divs purely for styling purposes.

.comment + .comment:before {
    border-top:1px solid;
    max-width: 300px;
    margin: 0 auto;
    content: " ";
    display: block;
}

http://jsfiddle.net/pVcrV/1/

The adjacent selector has greater support in older browsers than pseudo classes like :last-child (not available in IE8) or :last-of-type. The :before psuedo class has fairly decent support (not available IE7).

Answer 2

The :last-child pseudoclass still cannot be reliably used across browsers. In particular, Internet Explorer versions < 9, and Safari < 3.2 definitely don't support it, although Internet Explorer 7 and Safari 3.2 do support :first-child, curiously.

Your best bet is to explicitly add a last-child (or similar) class to that item, and apply div.last-child instead.

or you could use some Javascript.

Answer 3

How about rethinking the design, and hiding the supported :first-child pseudo...and clearing up the div-itus?

.comment { border-top:1px solid red }
.comment:first-child { border:none; }​

<div id="question_comments" class="comments_container">
  <div class="comment">
      <p>Comment1</p>
  </div>
  <div class="comment">
      <p>Comment2</p>
  </div>
</div>​

I realize you may just be using hr... as a dumby class, but I took the liberty of using it as a <hr> element (which, btw is better than a <div> that acts/works the same)

http://jsfiddle.net/pVcrV/

*EDIT: (to put back a container) *

<div id="question_comments" class="comments_container">
  <hr>
  <div class="comment">
      <p>Comment1</p>
  </div>
  <hr>
  <div class="comment">
  ...
</div>​

http://jsfiddle.net/VJVxt/

I'm sort of assuming that you're pulling these comments from a database, and having a server-side language spit out the HTML on the fly. Starting that dump with the divider (then using :first-child to hide it) isn't 100% semantic; HOWEVER, one element vs a JavaScript, or a CSS hack seems more than a fair trade-off.

Answer 4

#question_comments .hr-comment:last-child {display:none;}

Answer 5

Do this:

#question_comments > .hr-comment:last-child {
  display: none;
}