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


Tags: css,ruby-on-rails-3,html,divider

Problem :

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.



Solution :

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


    CSS Howto..

    How to apply focus css for all drop downs?

    How to display size and icon for pdf and word docs?

    how to add items into a CSS based text rotator (similar to news ticker)

    CSS/Javascript: How to make rotating circular menu with multiple states?

    how to change 'inner' lineheight of css text

    How to set HTML element's margin using percent of page height?

    How can I achieve this Flash effect using jQuery?

    How to highlight a currently selected item/section in Wordpress with CSS (maybe PHP too)?

    How to Use CSS transitions

    How to Centre Glyphicon Vertically In Bootstrap Button

    How to make a better transition of

    How to refer to third level lists in css?

    How could i center unordered lists in a footer?

    div not showing above text box

    How to Add external Javascript and CSS for CakePhp

    How can I make my form field have a background image?

    My sidebar is fixed no matter what. How do I make scrolling possible with the sidebar?

    how to give css height a percentage of a different div (above original div)

    How do I fit a fieldset to the size of its content with CSS?

    how to apply css in angular.js

    How to know the correct css selector or group of selector for any html element quickly?

    How to have background between two handles of jQuery Slider using css gradient

    Hide all div element but show first two

    How to show list items in menu when hover on the parent's it via CSS? [closed]

    how to make an oval in css?

    How to Implement different backgrounds on scroll [closed]

    How to implement CSS multi-level drop down menu with different classes?

    How to force thumbnails to overflow right and not below

    CSS element class - Height differs based on content, how to fix?

    How to assign custom CSS to Sharepoint site