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.
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;
}
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).