CODEWITHSUNDEEP
htmlcss
charkoul
charkoul

Reputation: 67

How to catch this nth-child() with css

I have this html code

<ul>
<div id="consolidation-checkboxes-container" class="consolidation-checkboxes container" style="height: 104px;">                     
    <a href="" class="consolidation-link" target="_blank">
    <li>one</li>
    </a>
    <a href="" class="consolidation-link" target="_blank">
    <li>two</li>
    </a>
    <a href="" class="consolidation-link bordered" target="_blank">
    <li>three</li>
    </a>
    <a href="" class="consolidation-link" target="_blank">
    <li>four</li>
    </a>
    <a href="" class="consolidation-link" target="_blank">
    <li>five</li></a>
    <a href="" class="consolidation-link" target="_blank">
    <li>six</li>
    </a>
    <a href="" class="consolidation-link" target="_blank">
        <li>seven</li>
    </a>
    <a href="" class="consolidation-link" target="_blank">
        <li>eight</li>
    </a>

</div>
</ul>

I would like the seventh li not have bullet.Is this possible to be done with css, because I am not allowed to change the html

Upvotes: 4

Views: 305

Answers (2)

Alex Char
Alex Char

Reputation: 33218

If your html is the one you provide you can use the following code:

ul div a:nth-child(7) li {
  list-style-type: none;
}
<ul>
  <div id="consolidation-checkboxes-container" class="consolidation-checkboxes container" style="height: 104px;">
    <a href="" class="consolidation-link" target="_blank">
      <li>one</li>
    </a>
    <a href="" class="consolidation-link" target="_blank">
      <li>two</li>
    </a>
    <a href="" class="consolidation-link bordered" target="_blank">
      <li>three</li>
    </a>
    <a href="" class="consolidation-link" target="_blank">
      <li>four</li>
    </a>
    <a href="" class="consolidation-link" target="_blank">
      <li>five</li>
    </a>
    <a href="" class="consolidation-link" target="_blank">
      <li>six</li>
    </a>
    <a href="" class="consolidation-link" target="_blank">
      <li>seven</li>
    </a>
    <a href="" class="consolidation-link" target="_blank">
      <li>eight</li>
    </a>

  </div>
</ul>

Additional as mention in comments ul element can only contain zero or more li elements, eventually mixed with ol and ul elements. So you can change your html mark up to be valid like:

ul li:nth-child(7) {
  list-style-type: none;
}
<ul>
  <li><a href="#" class="consolidation-link" target="_blank">one</a>
  </li>
  <li><a href="#" class="consolidation-link" target="_blank">two</a>
  </li>
  <li><a href="#" class="consolidation-link bordered" target="_blank">three</a>
  </li>
  <li><a href="#" class="consolidation-link" target="_blank">four</a>
  </li>
  <li><a href="#" class="consolidation-link" target="_blank">five</a>
  </li>
  <li><a href="#" class="consolidation-link" target="_blank">six</a>
  </li>
  <li><a href="#" class="consolidation-link" target="_blank">seven</a>
  </li>
  <li><a href="#" class="consolidation-link" target="_blank">eight</a>
  </li>
</ul>

Upvotes: 10

Amit singh
Amit singh

Reputation: 2036

you can also do like this to exactly catch the nth-child..

ul > div > a:nth-child(7) > li {
  list-style-type: none;
}

Upvotes: -2

Related Questions