KruXoR
HomeCodeUsing nth-child css to hide list items or repeated elements

this content was originally posted here.

Using nth-child css to hide list items or repeated elements

[@creator] Posted in css @ 5:10 am, March 13, 2019

Lets say that i have a list like this:

<div class='my-awesome-list'>
<div class='a-list-item'>yay im a list item</div>
<div class='a-list-item'>yay im a list item</div>
<div class='a-list-item'>yay im a list item</div>
<div class='a-list-item'>yay im a list item</div>
<div class='a-list-item'>yay im a list item</div>
<div class='a-list-item'>yay im a list item</div>
<div class='a-list-item'>yay im a list item</div>
</div>

And we cant edit the actual html for some reason... but we want to only show the 1st two items in the list.

Well css can fix this for you by using the following.

<style>
.my-awesome-list .a-list-item:nth-child(n+3) {
display:none;
}
</style>

we can also apply this to an ordered or un-ordered list like so:

<ol class='my-awesome-list'>
<li class='a-list-item'>yay im an ordered list item</li>
<li class='a-list-item'>yay im an ordered list item</li>
<li class='a-list-item'>yay im an ordered list item</li>
<li class='a-list-item'>yay im an ordered list item</li>
<li class='a-list-item'>yay im an ordered list item</li>
<li class='a-list-item'>yay im an ordered list item</li>
<li class='a-list-item'>yay im an ordered list item</li>
<li class='a-list-item'>yay im an ordered list item</li>
</ol>

which will take on the same as the div version as the class names are the same. 

HTML

<div class='my-awesome-list'>
	<div class='a-list-item'>yay im a list item</div>
	<div class='a-list-item'>yay im a list item</div>
	<div class='a-list-item'>yay im a list item</div>
	<div class='a-list-item'>yay im a list item</div>
	<div class='a-list-item'>yay im a list item</div>
	<div class='a-list-item'>yay im a list item</div>
	<div class='a-list-item'>yay im a list item</div>
</div>

<ol class='my-awesome-list'>
	<li class='a-list-item'>yay im an ordered list item</li>
	<li class='a-list-item'>yay im an ordered list item</li>
	<li class='a-list-item'>yay im an ordered list item</li>
	<li class='a-list-item'>yay im an ordered list item</li>
	<li class='a-list-item'>yay im an ordered list item</li>
	<li class='a-list-item'>yay im an ordered list item</li>
	<li class='a-list-item'>yay im an ordered list item</li>
	<li class='a-list-item'>yay im an ordered list item</li>
</ol>

CSS

.my-awesome-list .a-list-item:nth-child(n+3) {
    display:none;
}

Demo

yay im a list item
yay im a list item
yay im a list item
yay im a list item
yay im a list item
yay im a list item
yay im a list item
  1. yay im an ordered list item
  2. yay im an ordered list item
  3. yay im an ordered list item
  4. yay im an ordered list item
  5. yay im an ordered list item
  6. yay im an ordered list item
  7. yay im an ordered list item
  8. yay im an ordered list item
Privacy
copyright © 2019
database file: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/db.db
comments_dbfile: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/comments.db ($db_comments)
views_dbfile: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/views.db
$dbfood_file: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/food.db
db_linx: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/linx/db/db.db
Classes Loaded:
class/answers.class.php
class/code.class.php
class/comments.class.php
class/content.class.php
class/core.class.php
class/crud.class.php
class/crumbs.class.php
class/featured.class.php
class/food.class.php
class/functions.class.php
class/images.class.php
class/import.class.php
class/links.class.php
class/questions.class.php
class/template.class.php
class/tv.class.php
class/user.class.php
class/utilities.class.php
class/views.class.php
class/widget.class.php
Class Extend Loaded: class/extends/expenses.extend.php
Class Extend Loaded: class/extends/gary_cummins_timeline.extend.php
Class Extend Loaded: class/extends/moo.extend.php
Class Extend Loaded: class/extends/osrs_item_data.extend.php
Class Extend Loaded: class/extends/osrs_slayer.extend.php
Class Extend Loaded: class/extends/osrs_slayer_monsters.extend.php
Class Extend Loaded: class/extends/searches.extend.php
Core Database Connected: expenses.db
expenses add_to_menu:
Class Extend Auto Initialized as: expenses
Core Database Connected: gary_cummins_timeline.db
gary_cummins_timeline add_to_menu:
Class Extend Auto Initialized as: gary_cummins_timeline
Core Database Connected: moo.db
moo add_to_menu:
Class Extend Auto Initialized as: moo
Core Database Connected: osrs_item_data.db
osrs_item_data add_to_menu:
Class Extend Auto Initialized as: osrs_item_data
Core Database Connected: osrs_slayer.db
osrs_slayer add_to_menu:
Class Extend Auto Initialized as: osrs_slayer
Core Database Connected: osrs_slayer_monsters.db
osrs_slayer_monsters add_to_menu:
Class Extend Auto Initialized as: osrs_slayer_monsters
Core Database Connected: searches.db
searches add_to_menu:
Class Extend Auto Initialized as: searches
$user_logged_in:
user access level:
pages:
$p1:view
$p2:code
$p3:16eH4
$p4:using-nth-child-css-to-hide-list-items-or-repeated-elements
$p5:
$p6:
$p:/view/code/16eH4/using-nth-child-css-to-hide-list-items-or-repeated-elements/
Using Template: view-code.html