How to hide the first two div using css?


Tags: html,css

Problem :

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"><a href="/test/?sort=2&amp;dir=asc" class="gv-sort icon gv-icon-caret-up-down"></a>&nbsp;Cần mua hộ</span></th>
                <th id="gv-field-1-6" class="gv-field-1-6" style=""><span class="gv-field-label"><a href="/test/?sort=6&amp;dir=asc" class="gv-sort icon gv-icon-caret-up-down"></a>&nbsp;Tiền công</span></th>
                <th id="gv-field-1-15" class="gv-field-1-15" style=""><span class="gv-field-label"><a href="/test/?sort=15&amp;dir=asc" class="gv-sort icon gv-icon-caret-up-down"></a>&nbsp;Nơi mua</span></th>
                <th id="gv-field-1-5" class="gv-field-1-5" style=""><span class="gv-field-label"><a href="/test/?sort=5&amp;dir=asc" class="gv-sort icon gv-icon-caret-up-down"></a>&nbsp;Nơi giao</span></th>
                <th id="gv-field-1-4" class="gv-field-1-4" style=""><span class="gv-field-label"><a href="/test/?sort=4&amp;dir=desc" class="gv-sort icon gv-icon-sort-desc"></a>&nbsp;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"><a href="https://www.mypage.com/test/entry/21/?gvid=11">Chi tiết</a></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th id="gv-field-1-2" class="gv-field-1-2"><span class="gv-field-label"><a href="/test/?sort=2&amp;dir=asc" class="gv-sort icon gv-icon-caret-up-down"></a>&nbsp;Cần mua hộ</span></th>
                <th id="gv-field-1-6" class="gv-field-1-6"><span class="gv-field-label"><a href="/test/?sort=6&amp;dir=asc" class="gv-sort icon gv-icon-caret-up-down"></a>&nbsp;Tiền công</span></th>
                <th id="gv-field-1-15" class="gv-field-1-15"><span class="gv-field-label"><a href="/test/?sort=15&amp;dir=asc" class="gv-sort icon gv-icon-caret-up-down"></a>&nbsp;Nơi mua</span></th>
                <th id="gv-field-1-5" class="gv-field-1-5"><span class="gv-field-label"><a href="/test/?sort=5&amp;dir=asc" class="gv-sort icon gv-icon-caret-up-down"></a>&nbsp;Nơi giao</span></th>
                <th id="gv-field-1-4" class="gv-field-1-4"><span class="gv-field-label"><a href="/test/?sort=4&amp;dir=desc" class="gv-sort icon gv-icon-sort-desc"></a>&nbsp;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>
                        <a href="https://www.mypage.com/test/entry/30/"><button>Chi tiết</button></a>
                    </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>
                        <a href="https://www.mypage.com/test/entry/23/"><button>Chi tiết</button></a>
                    </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>
                        <a href="https://www.mypage.com/test/entry/25/"><button>Chi tiết</button></a>
                    </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>
                        <a href="https://www.mypage.com/test/entry/21/"><button>Chi tiết</button></a>
                    </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?



Solution :

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

    CSS Howto..

    How to animate CSS Translate

    How set css style to GWT TextBox text?

    How can I make the parent div draggable

    Why doesn't this site have a Google logo for their use of Google Maps? I want to do this. How? [closed]

    How can I use meta viewport and CSS media queries to make the average 960px website look good on the iPhone and iPad?

    How to do Background Image horizontal slide

    How to get item to appear on mobile homepage only(wordpress)

    How to make a hidden face appear from the top using -webkit-transform: rotateX();

    How can I move this box in this HTML/CSS file?

    How to draw a half circle (border, outline only) [closed]

    Responsive website - how to debug a non-responding responsive css?

    How to apply this CSS class to a given LinkButton?

    How can I set CSS only for specific IE browsers?

    How to make sure one css file does not override another one?

    how to make Sections in one line?

    How to force parent div to expand by child div width/padding/margin/box?

    How to make a foreground image using CSS?

    How to style textbox using CSS in ASP.NET

    How to align divs side by side without one being slightly lower?

    css nested classes, how to not repeat code?

    CSS - How to Style a Selected Radio Buttons Label?

    How to vertically center multiline text with an image on its left?

    How to get CSS background property to work with toggleClass() in jQuery?

    Having Two HTML issues with PHP DOM: 1.) DOMDocument::createEntityReference $name values and 2.) how to add multiple CSS classes an element?

    How to fix cloud rising?

    How do I avoid multiple jquery dropdown boxes interfering with eachother

    HTML + CSS layout with bottom box showing all content, variable height top box with scroll

    How to reference nested classes with css?

    How to make table by CSS?

    How to use Aural CSS?