3

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>
1
  • is there any posiblity to add some class to this <a> tags which u want to disappear? Aug 3, 2016 at 21:23

4 Answers 4

3

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>

0
3

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

2
  • The question seems to inquire that the first part of the URL is always known, so using *= is risky, as it might as well match any random url by pure chance - whenever possible, I'd prefer ^= Aug 3, 2016 at 21:32
  • @TheThirdMan the question is about partial string href
    – CMedina
    Aug 3, 2016 at 21:34
1

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;
}
-1

Yes, there's a CSS selector for that.

a[href~=someURL] { display: none }
1
  • 1
    This will only match attributes that contain the word "someURL" surrounded by whitespace characters, so it probably won't be very useful for URLs. Aug 3, 2016 at 21:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.