css - CSSを使用してコメントのリストの最後の仕切りを非表示にする方法は？

Question

cssを使用してコメント間の最後の仕切りを非表示にします。コードは以下のとおりです。

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

Railsビューでそれを生成しています：

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

私はそれを試しました：

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 
}

目標は、ビューでルビーを使用せずにそれを行う方法です。

Answer 1

：last-child疑似クラスは、ブラウザ間で確実に使用することはできません。特に、InternetExplorerのバージョン<9およびSafari<3.2は、これを確実にサポートしていませんが、Internet Explorer7およびSafari3.2は、不思議なことに、：first-childをサポートしています。

最善の策は、そのアイテムにlast-child（または同様の）クラスを明示的に追加し、代わりにdiv.last-childを適用することです。

または、Javascriptを使用することもできます。

Answer 2

純粋にスタイリングの目的で空のdivのようなマークアップを追加することは一般的に嫌われています。

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

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

隣接するセレクターは、:last-child（IE8では使用できない）やのような疑似クラスよりも古いブラウザーでより強力にサポートされます:last-of-type。psuedo:beforeクラスはかなりまともなサポートを持っています（IE7では利用できません）。

Answer 3

デザインを再考し、サポートされている:first-child疑似を非表示にして、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>​

あなたはhr...ダンビークラスとして使用しているだけかもしれませんが、私はそれを要素として使用する自由を取りました（これは、同じように動作/動作するもの<hr>よりも優れています）<div>

http://jsfiddle.net/pVcrV/

*編集:(コンテナを元に戻すため）*

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

http://jsfiddle.net/VJVxt/

私は、あなたがデータベースからこれらのコメントを引き出しており、サーバー側の言語にその場でHTMLを吐き出させていると仮定しています。そのダンプを仕切りで開始する（次にそれを:first-child非表示にするために使用する）ことは、100％セマンティックではありません。ただし、1つの要素とJavaScript、またはCSSハックは、公正なトレードオフ以上のもののようです。

Answer 4

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

Answer 5

これを行う：

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