CODEWITHSUNDEEP
css
user123456
user123456

Reputation: 2659

How do I select specific li based on id attribute

I have this ul

 <ul class="mobile-demo">
    <li>
        <img alt="" class="-logo" src="../assets/images/[email protected]" />
    </li>
    <li class="nav-item " id="mainPgae" style="margin-right: 90px !important;">
        <a class="btn nav-link active" href="../FrontEnd/home.aspx">
    
        
        الرئيسية
        
        
        </a>
    </li>
    <li class="nav-item history" id="history">
        <a href="../FrontEnd/History.aspx">تاريخ التأسيس</a>
    </li>
    <li class="nav-item mission" id="mission">
        <a href="../FrontEnd/Mission.aspx">الهدف والرؤية</a>
    </li>
    <li class="nav-item " id="news">
        <a href="../FrontEnd/news.aspx">الأخبار</a>
    </li>
    <li class="nav-item gallery" id="album">
        <a href="../FrontEnd/gallery.aspx">الصور</a>
    </li>
    <li class="nav-item videos" id="video">
        <a href="../FrontEnd/videos">الفيديو</a>
    </li>
</ul>

What is the css selector that will get me news one.

I tired

#mobile-demo ul li #news { margin-bottom: 0rem !important; }

also

I tired

#mobile-demo ul li[id="news "]{ margin-bottom: 0rem !important; }

also I added news class

#mobile-demo ul li[class="news "]{ margin-bottom: 0rem !important; }

nothing worked

Any luck ?

Upvotes: 1

Views: 127

Answers (2)

Karan
Karan

Reputation: 12619

You need to use like below. Do not use space between ul & #mobile-demo because #mobile-demo ul means it will find every ul inside element with id #mobile-demo. You need ul which has id as #mobile-demo so use ul#mobile-demo. Similarly for li also.

Moreover the code you have posted is having ul with class mobile-demo not id so use class selector (.) instead of id selector (#). Or add id="mobile-demo" in your ul element.

ul.mobile-demo li#news { margin-bottom: 0rem !important; }

Refer CSS Selectors W3Schools for more details.

Try it below.

ul#mobile-demo li#news {
  margin-bottom: 0rem !important;
}

ul#mobile-demo li#mainPage {
  margin-right: right:inherit !important;
}
<ul class="mobile-demo" id="mobile-demo">
  <li>
    <img alt="" class="s-logo" src="" />
  </li>
  <li class="nav-item " id="mainPage" style="margin-right: 90px !important;">
    <a class="btn nav-link active" href="../FrontEnd/home.aspx">
        الرئيسية
     </a>
  </li>
  <li class="nav-item history" id="history">
    <a href="../FrontEnd/History.aspx">تاريخ التأسيس</a>
  </li>
  <li class="nav-item mission" id="mission">
    <a href="../FrontEnd/Mission.aspx">الهدف والرؤية</a>
  </li>
  <li class="nav-item " id="news">
    <a href="../FrontEnd/news.aspx">الأخبار</a>
  </li>
  <li class="nav-item gallery" id="album">
    <a href="../FrontEnd/gallery.aspx">الصور</a>
  </li>
  <li class="nav-item videos" id="video">
    <a href="../FrontEnd/videos">الفيديو</a>
  </li>
</ul>

Upvotes: 5

Nima Owji
Nima Owji

Reputation: 665

You can use this selector:

li#history

Upvotes: 0

Related Questions