Unable to hide HTML within a UL + LI (CSS)

Question

Can anyone see or think why I can't hide items 5 onwards?

I would like to show ONLY items #1, #2, #3, and #4 with the rest all hidden (i.e. completely hidden from the code).

I can hide them from the client view but view source you can see the HTML - what am I doing wrong here?

I have tried:

visibility: hidden

As well as

display: none

And still, the code is there...

ul>li {
  display: inline-block;
  /* You can also add some margins here to make it look prettier */
  width: 180px;
  zoom: 1;
  *display: inline;
  /* this fix is needed for IE7- */
}

ul>li:nth-of-type(1n+5) {
  display: none;
}

.speakercard {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 180px;
  margin: auto;
  text-align: center;
  padding-top: 14px;
}

button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 10px;
  color: white;
  background-color: #393939;
  text-align: center;
  cursor: pointer;
  width: 100%;
}

a {
  text-decoration: none;
  color: black;
}

button:hover,
a:hover {
  opacity: 0.7;
}

.image-cropper {
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid #ccc;
  margin-left: auto;
  margin-right: auto;
}

.profile-pic {
  display: inline;
  margin: 0 auto;
  height: 100%;
  width: auto;
}


  
    
      
        
      
      1 Poo Doe
      
    
  

  
    
      
        
      
      2 Doe
      
    
  

  
    
      
        
      
      3 Doe
      
    
  

  
    
      
        
      
      4 Doe
      
    
  

  
    
      
        
      
      THIS SHOULD BE TOTALLY HIDDEN
      
    
  

  
    
      
        
      
      THIS SHOULD BE TOTALLY HIDDEN
      
    
  

  
    
      
        
      
      THIS SHOULD BE TOTALLY HIDDEN

Any idea how to make this happen?

Thanks!

user_2576254 · Answer

Demo to hide from also view source you should use ngIf directive rather than css

or you can use custom pipe to show what you want.

or you can connect to ngFor your elements and filter your list related what you want.

css just applied for design. It does for user view

for ngIf your html


  
    
      
        
          
        
        {{data.id}} {{data.Name}}

in component.ts just create your array

personels=[
    {id:1,Name:"Poo Doe",img:"image1"},
    {id:2,Name:"Poo Doe",img:"image1"},
    {id:3,Name:"Poo Doe",img:"image1"},
    {id:4,Name:"Poo Doe",img:"image1"},
    {id:5,Name:"Poo Doe",img:"image1"},
    {id:6,Name:"Poo Doe",img:"image1"},
    {id:7,Name:"Poo Doe",img:"image1"}
  ]

and this is pipe example

create custom pipe

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'customPipe'
})

export class CustomPipe implements PipeTransform {
  transform(row: any[],n:number): any {
      return row.filter((x,idx)=>idx


and in html use pipe

    
      
        
          
        
        {{data.id}} {{data.Name}}

user_4828276 · Answer

Try this CSS:

li {
  display: none;
}
li:nth-child(-n+3) {
  display: block;   
}

check on codepen

user_5941413 · Answer

What you aim for is not possible with CSS! CSS is build just for styling the content of the DOM, not for malipulating the latter. If you really want to remove the items after the speaker profile 4, then you would have to use JavaScript to do so. JavaScript can manipulate the DOM on the client side. But why are you sending the profiles at all, if you want to remove them afterwards? Wouldn't it be easier to just not send them to your clients?

But if you rellay want to do so, here is how you can achieve your desired result.

let speakercards = document.querySelectorAll('.speakercard');

for (let i = 0; i < speakercards.length; ++i) {
  if (i >= 4) {
    speakercards[i].remove()
  }
}

ul>li {
  display: inline-block;
  /* You can also add some margins here to make it look prettier */
  width: 180px;
  zoom: 1;
  *display: inline;
  /* this fix is needed for IE7- */
}

/* ul>li:nth-of-type(1n+5) {
  display: none;
} */

.speakercard {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 180px;
  margin: auto;
  text-align: center;
  padding-top: 14px;
}

button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 10px;
  color: white;
  background-color: #393939;
  text-align: center;
  cursor: pointer;
  width: 100%;
}

a {
  text-decoration: none;
  color: black;
}

button:hover,
a:hover {
  opacity: 0.7;
}

.image-cropper {
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid #ccc;
  margin-left: auto;
  margin-right: auto;
}

.profile-pic {
  display: inline;
  margin: 0 auto;
  height: 100%;
  width: auto;
}


  
    
      
        
      
      1 Poo Doe
      
    
  

  
    
      
        
      
      2 Doe
      
    
  

  
    
      
        
      
      3 Doe
      
    
  

  
    
      
        
      
      4 Doe
      
    
  

  
    
      
        
      
      THIS SHOULD BE TOTALLY HIDDEN
      
    
  

  
    
      
        
      
      THIS SHOULD BE TOTALLY HIDDEN
      
    
  

  
    
      
        
      
      THIS SHOULD BE TOTALLY HIDDEN

user_13790251 · Answer

It is my first answer on SO ever and guys above clearly gave you the solution but here is another way to accomplish the same result.

let myobj = document.querySelectorAll("ul > li:nth-of-type(1n+5)");
Array.from(myobj).map((el)=>el.remove())

user_13596406 · Answer

I would simply use ngClass directive:

 
  
    
      
        
      
      {{user.id}} {{user.name}}

CSS :

.hide{
display:none;
}

You can also replace hide with bootstrap class d-none:

Unable to hide HTML within a UL + LI (CSS)

5 Answers