How to hide the first two div using css? - html

Question

Here is my page content
<div class="entry-content">
<div class="gv-grid">
<div class="gv-grid-col-1-1 gv-left">
<form class="gv-widget-search gv-search-vertical" method="get" action="https://www.mypage.com/test/">
<div class="gv-search-box">
<div class="gv-search">
<label for="gv_search_11">Tìm kiếm</label>
<p><input name="gv_search" id="gv_search_11" value="" type="text"></p>
</div>
</div> <div class="gv-search-box gv-search-box-submit">
<input name="mode" value="all" type="hidden">
<input class="button gv-search-button" id="gv_search_button_11" value="Search" type="submit">
</div>
</form>
</div>
<div class="gv-grid-col-1-2 gv-left">
</div>
<div class="gv-grid-col-1-2 gv-right">
</div>
</div>
<div class="gv-table-container gv-container">
<table class="gv-table-view">
<thead>
<tr>
<th id="gv-field-1-2" class="gv-field-1-2" style=""><span class="gv-field-label"> Cần mua hộ</span></th>
<th id="gv-field-1-6" class="gv-field-1-6" style=""><span class="gv-field-label"> Tiền công</span></th>
<th id="gv-field-1-15" class="gv-field-1-15" style=""><span class="gv-field-label"> Nơi mua</span></th>
<th id="gv-field-1-5" class="gv-field-1-5" style=""><span class="gv-field-label"> Nơi giao</span></th>
<th id="gv-field-1-4" class="gv-field-1-4" style=""><span class="gv-field-label"> Giao đồ trước</span></th>
<th id="gv-field-1-entry_link" class="gv-field-1-entry_link" style=""><span class="gv-field-label">Link</span></th>
</tr>
</thead>
<tbody>
<tr class="alt">
<td id="gv-field-1-2" class="gv-field-1-2">CEZANNE Lasting Lip Color N 402</td>
<td id="gv-field-1-6" class="gv-field-1-6">80 000</td>
<td id="gv-field-1-15" class="gv-field-1-15">Nhật Bản</td>
<td id="gv-field-1-5" class="gv-field-1-5">Hà Nội</td>
<td id="gv-field-1-4" class="gv-field-1-4">14/04/2016</td>
<td id="gv-field-1-entry_link" class="gv-field-1-entry_link">Chi tiết</td>
</tr>
</tbody>
<tfoot>
<tr>
<th id="gv-field-1-2" class="gv-field-1-2"><span class="gv-field-label"> Cần mua hộ</span></th>
<th id="gv-field-1-6" class="gv-field-1-6"><span class="gv-field-label"> Tiền công</span></th>
<th id="gv-field-1-15" class="gv-field-1-15"><span class="gv-field-label"> Nơi mua</span></th>
<th id="gv-field-1-5" class="gv-field-1-5"><span class="gv-field-label"> Nơi giao</span></th>
<th id="gv-field-1-4" class="gv-field-1-4"><span class="gv-field-label"> Giao đồ trước</span></th>
<th id="gv-field-1-entry_link" class="gv-field-1-entry_link"><span class="gv-field-label">Link</span></th>
</tr>
</tfoot>
</table>
</div><!-- end .gv-table-container -->
<div class="gv-grid">
<div class="gv-grid-col-1-1 gv-left">
</div>
<div class="gv-grid-col-1-2 gv-left">
</div>
<div class="gv-grid-col-1-2 gv-right">
</div>
</div>
<input class="gravityview-view-id" value="11" type="hidden">
<div class="gv-grid">
<div class="gv-grid-col-1-1 gv-left">
<form class="gv-widget-search gv-search-vertical" method="get" action="https://www.mypage.com/test/">
<div class="gv-search-box">
<div class="gv-search">
<label for="gv_search_7770">Tìm kiếm</label>
<p><input name="gv_search" id="gv_search_7770" value="" type="text"></p>
</div>
</div> <div class="gv-search-box gv-search-box-submit">
<input name="mode" value="all" type="hidden">
<input class="button gv-search-button" id="gv_search_button_7770" value="Search" type="submit">
</div>
</form>
</div>
<div class="gv-grid-col-1-2 gv-left">
</div>
<div class="gv-grid-col-1-2 gv-right">
</div>
</div>
<div class="gv-list-container gv-container">
<div id="gv_list_30" class="gv-list-view">
<div class="gv-list-view-title">
<h3 id="gv-field-1-custom" class="gv-field-1-custom"><b>Ga Cong Nghiep</b> cần mua <b>Giày zara kid size 37</b> bán tại <b>Tây Ban Nha</b></h3>
</div>
<div class="gv-grid gv-list-view-content">
<div class="gv-grid-col-1-3 gv-list-view-content-image"><div id="gv-field-1-14" class="gv-image gv-field-1-14"><a rel="gv-field-1-14-30" class="thickbox" target="_blank" href="https://www.mypage.com/wp-content/uploads/gravity_forms/1-f9c2348184f1140e486c01fab8f03460/2016/03/1050103050_2_3_1.jpg"><img scale="0" src="https://www.mypage.com/wp-content/uploads/gravity_forms/1-f9c2348184f1140e486c01fab8f03460/2016/03/1050103050_2_3_1.jpg" alt="Ảnh" class="gv-image gv-field-id-14" width="250"></a></div></div><div class="gv-grid-col-2-3 gv-list-view-content-description">
<div id="gv-field-1-custom" class="gv-field-1-custom">
<h4><span class="gv-field-label"></span></h4><p>
Nơi giao hàng: Lạng Sơn<br>
Tiền hàng: 25.95 EUR<br>
Tiền công : 150,000 VND<br>
(Có thể mặc cả tiền công)
</p>
<p>
<button>Chi tiết</button>
</p>
</div>
</div>
</div>
</div>
<div id="gv_list_23" class="gv-list-view">
<div class="gv-list-view-title">
<h3 id="gv-field-1-custom" class="gv-field-1-custom"><b>Nguyễn Yên</b> cần mua <b>3 hộp kem đánh răng</b> bán tại <b>Nhật Bản</b></h3>
</div>
<div class="gv-grid gv-list-view-content">
<div class="gv-grid-col-1-3 gv-list-view-content-image"><div id="gv-field-1-14" class="gv-image gv-field-1-14"><a rel="gv-field-1-14-23" class="thickbox" target="_blank" href="https://www.mypage.com/wp-content/uploads/gravity_forms/1-f9c2348184f1140e486c01fab8f03460/2016/03/kem-danh-rang.jpg"><img scale="0" src="https://www.mypage.com/wp-content/uploads/gravity_forms/1-f9c2348184f1140e486c01fab8f03460/2016/03/kem-danh-rang.jpg" alt="Ảnh" class="gv-image gv-field-id-14" width="250"></a></div></div><div class="gv-grid-col-2-3 gv-list-view-content-description">
<div id="gv-field-1-custom" class="gv-field-1-custom">
<h4><span class="gv-field-label"></span></h4><p>
Nơi giao hàng: Hà Nội<br>
Tiền hàng: 513 JPY<br>
Tiền công : 85,000 VND<br>
(Có thể mặc cả tiền công)
</p>
<p>
<button>Chi tiết</button>
</p>
</div>
</div>
</div>
</div>
<div id="gv_list_25" class="gv-list-view">
<div class="gv-list-view-title">
<h3 id="gv-field-1-custom" class="gv-field-1-custom"><b>Trường Hải Minh</b> cần mua <b>Đồng hồ Casio WAVECEPTOR WVQ-M410DE-2A2JF</b> bán tại <b>Nhật Bản</b></h3>
</div>
<div class="gv-grid gv-list-view-content">
<div class="gv-grid-col-1-3 gv-list-view-content-image"><div id="gv-field-1-14" class="gv-image gv-field-1-14"><ul class="gv-field-file-uploads gv-field-1-14"><li><a rel="gv-field-1-14-25" class="thickbox" target="_blank" href="https://www.mypage.com/wp-content/uploads/gravity_forms/1-f9c2348184f1140e486c01fab8f03460/2016/03/51Pj4cBrBpL.jpg"><img scale="0" src="https://www.mypage.com/wp-content/uploads/gravity_forms/1-f9c2348184f1140e486c01fab8f03460/2016/03/51Pj4cBrBpL.jpg" alt="Ảnh" class="gv-image gv-field-id-14" width="250"></a></li><li><a rel="gv-field-1-14-25" class="thickbox" target="_blank" href="https://www.mypage.com/wp-content/uploads/gravity_forms/1-f9c2348184f1140e486c01fab8f03460/2016/03/81xcVWtGDyL._UL1500.jpg"><img scale="0" src="https://www.mypage.com/wp-content/uploads/gravity_forms/1-f9c2348184f1140e486c01fab8f03460/2016/03/81xcVWtGDyL._UL1500.jpg" alt="Ảnh" class="gv-image gv-field-id-14" width="250"></a></li></ul></div></div><div class="gv-grid-col-2-3 gv-list-view-content-description">
<div id="gv-field-1-custom" class="gv-field-1-custom">
<h4><span class="gv-field-label"></span></h4><p>
Nơi giao hàng: Hà Nội<br>
Tiền hàng: 15,370 JPY<br>
Tiền công : 200,000 VND<br>
(Có thể mặc cả tiền công)
</p>
<p>
<button>Chi tiết</button>
</p>
</div>
</div>
</div>
</div>
<div id="gv_list_21" class="gv-list-view">
<div class="gv-list-view-title">
<h3 id="gv-field-1-custom" class="gv-field-1-custom"><b>Nguyễn Hương</b> cần mua <b>CEZANNE Lasting Lip Color N 402</b> bán tại <b>Nhật Bản</b></h3>
</div>
<div class="gv-grid gv-list-view-content">
<div class="gv-grid-col-1-3 gv-list-view-content-image"><div id="gv-field-1-14" class="gv-image gv-field-1-14"><a rel="gv-field-1-14-21" class="thickbox" target="_blank" href="https://www.mypage.com/wp-content/uploads/gravity_forms/1-f9c2348184f1140e486c01fab8f03460/2016/03/N402.jpg"><img scale="0" src="https://www.mypage.com/wp-content/uploads/gravity_forms/1-f9c2348184f1140e486c01fab8f03460/2016/03/N402.jpg" alt="Ảnh" class="gv-image gv-field-id-14" width="250"></a></div></div><div class="gv-grid-col-2-3 gv-list-view-content-description">
<div id="gv-field-1-custom" class="gv-field-1-custom">
<h4><span class="gv-field-label"></span></h4><p>
Nơi giao hàng: Hà Nội<br>
Tiền hàng: 518 JPY<br>
Tiền công : 80,000 VND<br>
(Có thể mặc cả tiền công)
</p>
<p>
<button>Chi tiết</button>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="gv-grid">
<div class="gv-grid-col-1-1 gv-left">
</div>
<div class="gv-grid-col-1-2 gv-left">
</div>
<div class="gv-grid-col-1-2 gv-right">
</div>
</div>
<input class="gravityview-view-id" value="7770" type="hidden">
I want to use css to hide the first two div of .entry-content.
How can I do it?

Answer 1

You can do following way using :first-child css:
.entry-content div:first-child, .entry-content div:first-child + div {
display:none;
}
<div class="entry-content">
<div class="gv-grid">1</div>
<div class="gv-table-container gv-container">2</div>
<div class="gv-grid">3</div>
<div class="gv-table-container gv-container">4</div>
</div>
Edit:
As per you html structure use css like following:
.entry-content > div:first-child, .entry-content > div:first-child + div {
display:none;
}

Answer 2

Try using the nth-child selector:
.entry-content div:nth-child(-n+2){
display:none;
}
<div class="entry-content">
<div class="gv-grid">1st</div>
<div class="gv-table-container gv-container">2nd</div>
<div class="gv-grid">3rd</div>
<div class="gv-table-container gv-container">4th</div>
</div>

Answer 3

<div class="entry-content">
<div class="gv-grid" style="display: none;">...</div> //HIDE THIS
<div class=gv-table-container gv-container" style="display: none;">...</div> //HIDE THIS
<div class="gv-grid">...</div>
<div class=gv-table-container gv-container">...</div>
</div>
style tag is embedded CSS.

Answer 4

Simple CSS2.1 version of this uses the sibling selector.
.gv-grid, .gv-table-container {
display: none;
}
.gv-grid ~ .gv-grid, .gv-table-container ~ .gv-table-container {
display: block;
}
The way the sibling selector works is that is will fire if an element has an earlier sibling that matches.
So the first rule applies to all .gv-grid and .gv-table-container elements within a shared parent; the subsequent rule will override it for later .gv-grid and .gv-table-container elements.