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 can I apply CSS to elements created with javascript in IE?

    How to align logo and text in bootstrap on small screens?

    How to avoid text go below the icon with css?

    joomla, CSS - show joomla module only for smartphone screens

    How to apply custom CSS on Facebook comment box plugin

    How can I center the below form?

    Three inline divs: how to make display all three inline OR three block (NOT 2 + 1)?

    How do I apply desktop media queries style to IE?

    Navigation bar - How to keep the page highlighted when selected?

    How to display vertical text in table headers with auto height / without text overflow?

    How to link CSS file from css folder in wordpress

    How to get All Defined CSS Selectors for a given DOM Element?

    CSS - How to remove 2nd vertical scroll bar without changing anything else?

    How to use HTML/CSS to show images and titles inline?

    How to hide or show correctly page element (with media query of pure css)?

    How to hide a css transition behind another element both ways?

    CSS frustration: How to center floating images of different widths inside LI tags?

    How do I use the Bootstrap form select css with a Rails model?

    How do I get this div to be positioned below this search form?

    How do I select columns including colspans in a table?

    How to Tie Events to CSS

    how do I customize header color in jquery mobile?

    How to interpret HTML multiple class names in the CSS renderization? What W3C says about it?

    CSS/JQuery: A scrolling, overlay div and a centered layout - how to get it in a somewhat fixed position?

    Rails4: How to create Image Links with Hover?

    How to give a div full height in CSS

    How to define a CSS fontface?

    How would I go about setting a CSS gradient background in JavaScript?

    CSS - How to get star aligned properly on this page

    How to copy the html contents of one iframe to another iframe including CSS?