CODEWITHSUNDEEP
css
Kevin Morrison
Kevin Morrison

Reputation: 11

Hide an href using css

I have a menu item that I need to hide. It is not logical to go through all the files and remove it so I was looking for a way to hide it with CSS. Here is the code I have:

<li>
    <a tabindex="-1" href="index.php?option=com_eshop&view=countries">
        <span class="icon-flag"></span>
         Countries
    </a>
</li>

I found a few possible solutions but nothing seems to work. Here is the one that should work but I must be doing something wrong:

a[href="index.php?option=com_eshop&view=countries"]{ display:none; }

Upvotes: 1

Views: 61

Answers (2)

Aslam
Aslam

Reputation: 9690

Use the nth-child(item number) css property and hide it because you also want to hide the li because if you only hide link then there may be whitespace due to li

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 241188

That attribute selector should work given the HTML you provided. See this example.

There are several reasons why it may not be working. Here are two possibilities:

  • The selector is being overwritten by another selector with a higher specificity. If this is the case, you could increase the specificity of your selector by adding the parent element selectors to the selector. Since it's a dropdown menu, it's likely there is a more specific selector setting something like display: block.

  • It's also possible that's not the href value on your site. If this is the case, you could try using the attribute selector [attr*=value]. This will select all elements that contain instances of that value string.

    a[href*="index.php?option=com_eshop&view=countries"] {
    display:none;
}

Upvotes: 2

Related Questions