Andrey Andrey - 6 months ago 9
HTML Question

Select the first div within another div

I have a hotell booking site, where user can choose check-in and check-out date in a week view. Each date has a decoration "left border" so that it is easier to see the dates.

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


See this example in jsfiddle: https://jsfiddle.net/zvo72tec/

I have spend many hours trying to remove left border for the first day (15 May 2016) for both views (check-in and check-out). My solution with :first-child is not working since div "date" is not direct child of parent "content" div. Appreciate any help!

Is it possible to do it in css?

Answer

You just need to use :nth-child selectors.

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

And by the way. The div that encloses the date you want is not the fist-child of any element you have there. It's the second child.

The first child of the .dates-wrapper elements are those arrows.

Or you can use the :nth-of-type

Comments