HTML CSS ẩn tất cả trừ yếu tố cuối cùng

Question

Tôi Tring để ẩn tất cả elemnts bên trong một div trừ người cuối cùng, đây là mã html của tôi:

<div id="TOPsession"> 
    <a id="link1" href="exc.txt"> 
     <img src="imagens/header/exc.png" align="center"> 
      <label id="label1">Label</label> 
    </a> 

    <a href="#" id="session">Session</a> 
    <label id="lbar" style="color: #666;">|</label> 
    <select id="sel"> 
     <option>German</option> 
     <option>Ingles</option> 
    </select> 
</div> 

Tôi tìm kiếm trên web và tôi tìm mã css này để ẩn tất cả trừ phần tử cuối cùng:

#TOPsession:not(:last-child){ 
     visibility: hidden; 
    } 

Nhưng điều này ẩn tất cả các yếu tố, ai đó biết điều gì đang làm sai? Cảm ơn đã giúp đỡ.

Answer 1

Bạn có thể sử dụng #TOPsession > *:not(:last-child), điều này sẽ chọn tất cả trẻ em trực tiếp của TOPsession ngoại trừ :last-child.

---

Nếu bạn không sử dụng > bạn cũng sẽ xóa tất cả các yếu tố bên trong yếu tố cuối cùng, ngoại trừ yếu tố cuối cùng bên trong phần tử cuối cùng DEMO

#TOPsession > *:not(:last-child) { 
 
    visibility: hidden; 
 
}

<div id="TOPsession"> 
 
    <a id="link1" href="exc.txt"> 
 
    <img src="imagens/header/exc.png" align="center"> 
 
    <label id="label1">Label</label> 
 
    </a> 
 

 
    <a href="#" id="session">Session</a> 
 
    <label id="lbar" style="color: #666;">|</label> 
 
    <select id="sel"> 
 
    <option>German</option> 
 
    <option>Ingles</option> 
 
    </select> 
 
</div>