CODEWITHSUNDEEP
htmlcss
Appu Mistri
Appu Mistri

Reputation: 843

How do I hide an element based on partial HREF?

I am trying to hide some specific adds on my page based on their href property(using CSS). I scrolled through some of the answers which tells about hiding an element based on its href value. But, the element here is quite dynamic and keeps changing every time I load the page. Is there any way to hide an element/anchor based on its partial href value ?

Below is the HTML code that I am trying to hide.

Code: 

<div id="union-ad" class="union-banner">
<a href="http://someURL?Dynamic_Id's">
</div>

This is what i have been trying so far.

   <style type="text/css">
   a[href='someURL']{ display: none }
   </style>

Upvotes: 3

Views: 4344

Answers (4)

CMedina
CMedina

Reputation: 4222

You can use *. This finds the string partial someURL anywhere in the element's href attribute. 

a[href*="someURL"]{ display: none }

Demo: 

a[href*="someURL"]{ 
    display: none;
}
<div id="union-ad" class="union-banner">
    <a href="http://someURL?Dynamic_Id's"> my Link </a>
    <a href="http://some?Dynamic_Id's"> other Link </a>
</div>

JSFiddle

Upvotes: 3

TheThirdMan
TheThirdMan

Reputation: 1522

You have two different choices of substring selectors, which you should select between based on the nature of the URL.

If your URL always starts with the same set of characters, including the protocol specification, then ^= is the best choice - it will only match elements which href-attribute begins with the given set of characters. This will pretty much eliminate the chance of randomly hiding other links because they randomly contain your selector.

a[href^='http://someURL'] {
  display: none;
}

However if you're entirely unsure about the consistency of the URL and only know a certain part in the middle, use *=, which will match elements that contain at least one instance of the set of characters given.

a[href*='someURL'] {
  display: none;
}

Upvotes: 1

patrickcipot
patrickcipot

Reputation: 307

Yes, there's a CSS selector for that.

a[href~=someURL] { display: none }

Upvotes: -1

Wes Foster
Wes Foster

Reputation: 8900

Use a substring selector:

a[href^="http://someURL"] {
  display: none;
}
<a href="http://otherURL.com?hey">You CAN see me.</a>
<a href="http://someURL.com?hey">You can't see me!</a>

Upvotes: 3

Related Questions