別の部門内の最初の部門を選択

Question

私はホテルの予約サイトを持っています。ここでは、ユーザーは週のビューでチェックインとチェックアウトの日付を選択できます。それぞれの日付は、日付を見るのが簡単になるように装飾が "左の境界線"になっています。

HTML：

<div id="content"> 

<h1>Check-in date:</h1> 
<div class="dates-wrapper"> 
    <div class="prev">&larr;</div> 
    <div class="date">15 May 2015</div> 
    <div class="date">16 May 2015</div> 
    <div class="date">17 May 2015</div> 
    <div class="next">&rarr;</div> 
</div> 

<div style="clear: both"></div> 

<h1>Check-out date:</h1> 
<div class="dates-wrapper"> 
    <div class="prev">&larr;</div> 
    <div class="date">15 May 2015</div> 
    <div class="date">16 May 2015</div> 
    <div class="date">17 May 2015</div> 
    <div class="next">&rarr;</div> 
</div> 

</div> 

CSS

.prev, .next, .date { 
    float: left; 
    width: 120px; 
    text-align: center; 
} 
.date { 
    border-left: 1px solid red; 
} 

.dates-wrapper { 
    position: relative; 
} 

.content: first-child{ 
    border-left: none; 
} 

jsfiddleでこの例を参照してください：私は最初の日のための左の境界線を削除しようと多くの時間を費やしていhttps://jsfiddle.net/zvo72tec/

を（2016年5月15日）、両方のビュー（チ​​ェックインとチェックアウト）があります。私の解決策は：first-childは動作していないdiv "date"は親 "content" divの直接の子ではないからです。助けをよろしく！

cssで行うことはできますか？

Answer 1

:nth-childセレクタを使用するだけです。

.date:nth-child(2) { 
    border: none; 
} 

ところで、あなたが望む日付を囲むdivは、あなたがそこに持っている要素のfist-childではありません。それは二番目の子です。

.dates-wrapper要素の最初の子は矢印です。

それとも、 `の後にスペースを使用していない:nth-of-type