Hide every div (inside ul/li) with CSS selector except first one-CodePudding

How to hide with CSS every <div > in my UL/LI list except first one, but to keep all <span >

<div id="rpwwt-recent-posts-widget-with-thumbnails-2" class="rpwwt-widget">
<h4 class="widget-title penci-border-arrow"><span class="inner-arrow">WIDGET TITLE</span></h4>
    <ul>
        <li>
            <span class="rpwwt-post-title">TITLE #1</span>
                <div class="rpwwt-post-excerpt">POST EXCERPT TO SHOW</div>
        </li>
        <li>
            <span class="rpwwt-post-title">TITLE #2</span>
                <div class="rpwwt-post-excerpt">POST EXCERPT TO HIDE</div>
        </li>
        <li>
            <span class="rpwwt-post-title">TITLE #3</span>
                <div class="rpwwt-post-excerpt">POST EXCERPT TO HIDE</div>
        </li>
        <li>
            <span class="rpwwt-post-title">TITLE #4</span>
                <div class="rpwwt-post-excerpt">POST EXCERPT TO HIDE</div>
        </li>
    </ul>
</div>

CodePudding user response：

Inside your selector use the :not(:first-child) pseudo-class on the ancestor li to exclude the first <li> in a list from matching the selector - even though the style-rule ultimately affects only div.rpwwt-post-excerpt elements.

Like so:

li:not(:first-child) div.rpwwt-post-excerpt {
    display: none;
}

CodePudding user response：

Just select li is not first-child.

use :not for is not , and use first-child to select first element.

so , ul li:not(:first-child) { display:none; }