Often we need to select certain html DOM elements excluding ones with certain names/ attributes/ attribute values. Let’s show how to do that.
Suppose we have the following HTML loaded in DOM for further parsing.
<ul class="item">
<li>
<a href="#product_detail_MSQA20" class="nav-link">
Product details </a>
</li><li>
<a href="#spares_related_products_MSQA20" class="nav- link">Product</a>
</li><li>
<a href="#tools_MSQA20" class="nav-link">CAD</a>
</li>
</ul>
How to fetch/click the links that are not starting from #tools
(the 3-d link in the code)? The :not
notation comes to rescue. The following selector will do the magic:
a.nav-link:not([href^=\"#tools\"])
The result will be the following:
<a href="#product_detail_MSQA20" class="nav-link">
Product details </a>
<a href="#spares_related_products_MSQA20" class="nav- link">Product</a>