Как скрыть последний разделитель в списке комментариев, используя 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>

Я генерирую это в представлении рельсов:

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

Цель состоит в том, как сделать это без использования ruby.

Answer 1

Обычно не одобряется добавление дополнительной разметки, например, пустых элементов 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, :before Класс psuedo имеет довольно приличную поддержку (не доступен IE7).

Answer 2

Псевдокласс:last-child все еще не может быть надежно использован во всех браузерах. В частности, версии Internet Explorer < 9 и Safari < 3.2 определенно не поддерживают его, хотя Internet Explorer 7 и Safari 3.2 поддерживают:first-child, что любопытно.

Лучше всего явно добавить класс последнего ребенка (или аналогичный класс) к этому элементу и вместо этого применить div.last-child.

или вы можете использовать Javascript.

Answer 3

Как насчет переосмысления дизайна и сокрытия поддерживаемых :first-child псевдо... и прояснение деления?

.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% семантически; ОДНАКО, один элемент против JavaScript или хакерский CSS кажется более чем справедливым компромиссом.

Answer 4

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

Answer 5

Сделай это:

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