Stop Deleting HTML! Using CSS :nth-child to Hide List Items
<p data-path-to-node="1">In web development, there are times when you need to remove elements from a user's view without actually deleting them from the HTML source. This is particularly common when working with hardcoded CMS platforms or third-party scripts where you don't have direct access to change the markup.</p>
<p data-path-to-node="2">Instead of struggling with fixed HTML, you can use the powerful CSS <code data-path-to-node="2" data-index-in-node="68">:nth-child</code> pseudo-class to selectively hide elements based on their position.</p>
<h3 data-path-to-node="3">The Problem: Hardcoded Lists</h3>
<p data-path-to-node="4">As shown in the video, you might have a list where every item shares the same class, making it impossible to target a specific one using standard class selectors [<a class="ng-star-inserted" href="http://www.youtube.com/watch?v=TJfquiovmXI&t=42" target="blank" rel="noopener" data-hveid="0" data-ved="0CAAQ4QMahgKEwjWounzciSAxUAAAAAHQAAAAAQmQE">00:42</a>].</p>
<div class="code-block ng-tns-c1137244013-44 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwjWounzciSAxUAAAAAHQAAAAAQmgE">
<div class="code-block-decoration header-formatted gds-title-s ng-tns-c1137244013-44 ng-star-inserted"><span class="ng-tns-c1137244013-44">HTML</span>
<div class="buttons ng-tns-c1137244013-44 ng-star-inserted"> </div>
</div>
<div class="formatted-code-block-internal-container ng-tns-c1137244013-44">
<div class="animated-opacity ng-tns-c1137244013-44">
<pre class="ng-tns-c1137244013-44"><code class="code-container formatted ng-tns-c1137244013-44" role="text" data-test-id="code-content"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my-awesome-list"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>Item 1<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>Item 2<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>Item 3<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>Item 4<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>Item 5<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
</code></pre>
</div>
</div>
</div>
<h3 data-path-to-node="6">The Solution: The <code data-path-to-node="6" data-index-in-node="18">n + [number]</code> Formula</h3>
<p data-path-to-node="7">To hide a series of items starting from a specific point, you can use the formula <code data-path-to-node="7" data-index-in-node="82">:nth-child(n + [number])</code>. This targets the item at that number and every item following it [<a class="ng-star-inserted" href="http://www.youtube.com/watch?v=TJfquiovmXI&t=69" target="blank" rel="noopener" data-hveid="0" data-ved="0CAAQ4QMahgKEwjWounzciSAxUAAAAAHQAAAAAQmwE">01:09</a>].</p>
<h4 data-path-to-node="8">Example: Hiding everything after the 3rd item</h4>
<p data-path-to-node="9">If you want to keep the first three items visible and hide everything from the fourth item onwards, you would use <code data-path-to-node="9" data-index-in-node="114">n + 4</code> [<a class="ng-star-inserted" href="http://www.youtube.com/watch?v=TJfquiovmXI&t=95" target="blank" rel="noopener" data-hveid="0" data-ved="0CAAQ4QMahgKEwjWounzciSAxUAAAAAHQAAAAAQnAE">01:35</a>].</p>
<div class="code-block ng-tns-c1137244013-45 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwjWounzciSAxUAAAAAHQAAAAAQnQE">
<div class="code-block-decoration header-formatted gds-title-s ng-tns-c1137244013-45 ng-star-inserted"><span class="ng-tns-c1137244013-45">CSS</span>
<div class="buttons ng-tns-c1137244013-45 ng-star-inserted"> </div>
</div>
<div class="formatted-code-block-internal-container ng-tns-c1137244013-45">
<div class="animated-opacity ng-tns-c1137244013-45">
<pre class="ng-tns-c1137244013-45"><code class="code-container formatted ng-tns-c1137244013-45" role="text" data-test-id="code-content"><span class="hljs-comment">/ Target the list items within the container /</span>
<span class="hljs-selector-class">.my-awesome-list</span> <span class="hljs-selector-tag">li</span><span class="hljs-selector-pseudo">:nth-child</span>(n + <span class="hljs-number">4</span>) {
<span class="hljs-attribute">display</span>: none;
}
</code></pre>
</div>
</div>
</div>
<h3 data-path-to-node="11">How It Works</h3>
<ul data-path-to-node="12">
<li>
<p data-path-to-node="12,0,0"><strong data-path-to-node="12,0,0" data-index-in-node="0">The "n"</strong>: In CSS, <code data-path-to-node="12,0,0" data-index-in-node="17">n</code> acts as a counter (0, 1, 2, 3...).</p>
</li>
<li>
<p data-path-to-node="12,1,0"><strong data-path-to-node="12,1,0" data-index-in-node="0">The Offset</strong>: By adding a number (like <code data-path-to-node="12,1,0" data-index-in-node="37">+ 4</code>), you tell the browser to start the selection at that specific index.</p>
</li>
<li>
<p data-path-to-node="12,2,0"><strong data-path-to-node="12,2,0" data-index-in-node="0">The Result</strong>: All elements matching that index and higher are caught by the selector and hidden from the browser view [<a class="ng-star-inserted" href="http://www.youtube.com/watch?v=TJfquiovmXI&t=104" target="blank" rel="noopener" data-hveid="0" data-ved="0CAAQ4QMahgKEwjWounzciSAxUAAAAAHQAAAAAQngE">01:44</a>].</p>
</li>
</ul>
<h3 data-path-to-node="13">Why Not Just Delete the HTML?</h3>
<ol start="1" data-path-to-node="14">
<li>
<p data-path-to-node="14,0,0"><strong data-path-to-node="14,0,0" data-index-in-node="0">Read-Only Code</strong>: Sometimes you literally cannot edit the HTML file.</p>
</li>
<li>
<p data-path-to-node="14,1,0"><strong data-path-to-node="14,1,0" data-index-in-node="0">SEO & Inspection</strong>: The items remain in the DOM. If you inspect the page, you can still see the data, which can be useful for certain scripts or SEO purposes [<a class="ng-star-inserted" href="http://www.youtube.com/watch?v=TJfquiovmXI&t=23" target="blank" rel="noopener" data-hveid="0" data-ved="0CAAQ4QMahgKEwjWounzciSAxUAAAAAHQAAAAAQnwE">00:23</a>].</p>
</li>
<li>
<p data-path-to-node="14,2,0"><strong data-path-to-node="14,2,0" data-index-in-node="0">Flexibility</strong>: You can quickly change how many items are shown by simply updating one number in your CSS file rather than rewriting HTML structures.</p>
</li>
</ol>
<h3 data-path-to-node="15">Versatility</h3>
<p data-path-to-node="16">While the video demonstrates this using both <code data-path-to-node="16" data-index-in-node="45">div</code> containers and standard <code data-path-to-node="16" data-index-in-node="73"><ul></code>/<code data-path-to-node="16" data-index-in-node="78"><li></code> tags, the logic remains the same [<a class="ng-star-inserted" href="http://www.youtube.com/watch?v=TJfquiovmXI&t=109" target="blank" rel="noopener" data-hveid="0" data-ved="0CAAQ4QMahgKEwjWounzciSAxUAAAAAHQAAAAAQoAE">01:49</a>]. Whether you are dealing with a modern list or an older structure, <code data-path-to-node="16" data-index-in-node="191">:nth-child</code> provides a clean, "no-touch" way to manage your content's visibility.</p>
<p data-path-to-node="17">For more details, you can watch the full tutorial here: <a class="ng-star-inserted" href="https://www.youtube.com/watch?v=TJfquiovmXI" target="blank" rel="noopener" data-hveid="0" data-ved="0CAAQ4QMahgKEwjWounz_ciSAxUAAAAAHQAAAAAQoQE">https://www.youtube.com/watch?v=TJfquiovmXI</a></p>
<p data-path-to-node="17"><iframe src="https://www.youtube.com/embed/TJfquiovmXI" width="560" height="314" allowfullscreen="allowfullscreen"></iframe></p>
HTML
<ul class="my-awesome-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>CSS
.my-awesome-list li:nth-child(n + 4) {
display: none;
}- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
View Statistics
Add Comment
Other Items in css
Other Categories in Code
Random Quote
James Clear
