Bir listede çocuk öğeleri varsa, bir öğe

Question

gösterilecek bir simge nasıl alabilirim Bir alt öğe içinde bulunduğunda üst menü öğelerinde küçük bir tür gösterge almak için mümkün olup olmadığını merak ediyordum? Aşağıda menü öğelerinden birinin kodudur. Herhangi bir tavsiye harika olurdu.

<asp:LoginView ID="AdministrationLV" runat="server"> 
       <RoleGroups> 
        <asp:RoleGroup Roles="Masters, General Managers, Administrators, Managers"> 
         <ContentTemplate> 
          <div id="MainMenu3"> 
           <div class="list-group panel"> 
            <a class="list-group-item list-group-item-success" href="#demo3" data-toggle="collapse" data-parent="#MainMenu3">+ Administration </a> 
            <div class="collapse" id="demo3"> 
             <a class="list-group-item1" href="#Appliances" data-toggle="collapse" data-parent="#Appliances">+ Appliances</a> 
             <div class="collapse list-group-submenu" id="Appliances"> 
              <a class="list-group-item2" href="../../../../Homes/Appliances/Fridge.aspx" data-parent="#Appliances">Fridge</a> 
              <a class="list-group-item2" href="../../../../Homes/Appliances/Freezers.aspx" data-parent="#Appliances">Freezer</a> 
             </div> 

             <div id="list-group panel"> 
              <a class="list-group-item1" href="../../../General/Authorities/Authorities.aspx" data-parent="#Mainmenu3">Authorities</a> 
             </div> 

             <a class="list-group-item1" href="#Backgrounds" data-toggle="collapse" data-parent="#Backgrounds">+ Backgrounds</a> 
             <div class="collapse list-group-submenu" id="Backgrounds"> 
              <a class="list-group-item2" href="../../../../General/Religions/Religions.aspx" data-parent="#Backgrounds">Relegion</a> 
              <a class="list-group-item2" href="../../../../General/Ethnicities/Ethnicities.aspx" data-parent="#Backgrounds">Ethnicities</a> 
             </div> 


             <a class="list-group-item1" href="#Placements" data-toggle="collapse" data-parent="#Placements">+ Placements</a> 
             <div class="collapse list-group-submenu" id="Placements"> 
              <a class="list-group-item2" href="../../../../Staff/Placements/New_Referral.aspx" data-parent="#Placements">New placement</a> 
              <a class="list-group-item2" href="../../../../Staff/Placements/End_Referral.aspx" data-parent="#Placements">End Placement</a> 
              <a class="list-group-item2" href="../../../../Staff/Placements/New_Placement.aspx" data-parent="#Placements">New Referal</a> 
              <a class="list-group-item2" href="../../../../Staff/Placements/End_Placement.aspx" data-parent="#Placements">End Referal</a> 
             </div> 

             <a class="list-group-item1" href="#Education" data-toggle="collapse" data-parent="#Education">+ Education</a> 
             <div class="collapse list-group-submenu" id="Education"> 
              <a class="list-group-item2" href="../../../../General/Education/Schools.aspx" data-parent="#Education">Schools</a> 
             </div> 

             <a class="list-group-item1" href="#PoliciesDoc" data-toggle="collapse" data-parent="#PoliciesDoc">+ Policies/Documents </a> 
             <div class="collapse list-group-submenu" id="PoliciesDoc"> 
              <a class="list-group-item2" href="../../../../Homes/Document_Forms/Document_Types.aspx" data-parent="#PoliciesDoc">Add/Edit Documents</a> 
              <a class="list-group-item2" href="../../../../Homes/Document_Forms/Upload_Home_Document.aspx" data-parent="#PoliciesDoc">Update House Documents</a> 
              <a class="list-group-item2" href="../../../../Staff/Group/Group_Document_Forms/New_Group_Template.aspx" data-parent="#PoliciesDoc">Update Group Template</a> 
              <a class="list-group-item2" href="../../../../Staff/Group/Group_Document_Forms/New_Group_Policy.aspx" data-parent="#PoliciesDoc">Update Group Policy</a> 
             </div> 

            </div> 

           </div> 
          </div> 
         </ContentTemplate> 
        </asp:RoleGroup> 
       </RoleGroups> 
      </asp:LoginView> 

Bu, birkaç küçük renk değişimi olan önyükleme CSS'si kullanılarak yapılır.

Answer 1

:empty pseudoclass ile uyar childNodes olmadan bir element, yani en az bir çocukla bir öğe tespit etmek için size

:not(:empty) { 
    ... 
} 

kullanmak ve belki bir content veya olduğunca bir :before/:after pseudoelement bilgiyi ekleyebilir background icon, eg

:not(:empty):after { 
    content: " (not empty)"; 
    display: inline-block; 
}