Search code examples
htmlcssghost-blog

Correct selector for toggle button


I cannot grab the correct selector for the toggle button (the toggle button works), but I am aim to show only the first 5 results and when user clicks toggle button (open/close) then the remainer 20 shows. I cannot replicate a working example here because the items are dynamically generated and it involves ejs code. Question is which is the correct selector for my css since shown css code does not work.

.module ul li a:nth-child(n+6) {
    display: none!important;
}
<section class='module'>
    <div class='header'>Hello</div>
    <div class='content'>
        <% if (site.categories.length){var limit=0;  %>
            <ul class="list">
                <!--<% "EJS code here" %>-->
                    <li>
                        <a class="flat-box" href="<%= url_for(item.path) %>">
                            <div class='name'>
                                <!--<%= item.name %>-->
                            </div>
                            <div class='count'>
                               <!--<%= item.posts.length %>-->
                            </div>
                        </a>
                    </li>
            </ul>
    </div>
</section>


Solution

  • You are referring to the 6th <a></a> tag inside the <li></li>, which it does not exits.

    You wish to select the 6th <li></li> element.

    Your CSS should look like this:

    .module ul li:nth-child(n+6) {
      display: none!important;
    }