What is the best way to conceal an element using a partial HREF?

How can I hide specific ads on my page based on their href property using CSS? I have looked at solutions for hiding elements based on the exact href value, but the element on my page is constantly changing every time it loads. Is there a way to hide an element or anchor based on a partial href value?

Here is the HTML code that I want to hide:

Code:

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

This is what I have tried so far:

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

Answer №2

If you want to hide an element that contains the string partial "someURL" in its href attribute, you can use the selector

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

Check out this 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>

View on JSFiddle

Answer №3

When it comes to selecting substrings in URLs, you have two options to choose from based on the URL's nature.

If your URL consistently begins with the same characters, including the protocol specification, then using ^= is ideal. This selector will only match elements whose href attribute starts with the specified characters, reducing the risk of accidentally hiding other links that contain your selector at random.

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

On the other hand, if you're uncertain about the URL's consistency and only recognize a specific part in the middle, opt for *=. This selector matches elements that include at least one instance of the provided set of characters.

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

Answer №4

Ah yes, look no further because there is indeed a CSS selector for that.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I want to learn how to display the rupee symbol instead of the default dollar symbol in AngularJS for specific currency symbols

When using 'currency' in AngularJS, I noticed that a dollar symbol is displayed. How can I change this to show the required currency symbol based on different requirements? Currently, I am looking for information on how to display a rupee symbol ...

Looking to run a JavaScript command without the need for any triggering events?

Is there a way to execute the following JavaScript code without using any event and have it run at the start, onLoad of the page? function calculateDiscount() { var totalPrice = document.getElementsByClassName("Total")[0].innerHTML; var discountedPr ...

The form within the while loop is only functioning with the initial result

Within a while loop, I have a form that is being processed with ajax. The issue is that it only works on the first form and not on the others. Can someone take a look? <?php while($a = $stmt->fetch()){ ?> <form method="post" action=""> ...

Utilize information stored in a database to automatically navigate to a different webpage

I am currently working with PHP, HTML, and a mySQL database. Here are my current project requirements: Retreive specific data from the database and output it. Compare this data with predetermined values. If the data falls outside of the specified range, ...

Disable Chrome's suggestions bar on your Android phone

I'm having trouble disabling spelling suggestions for an input box and everything I've tried so far hasn't worked. I've already used attributes like autocomplete="off", autocapitalize="off", and spellcheck="off" for the input field, bu ...

Styling clickable elements in a menu using CSS

Hello everyone! I'm currently working on styling my very first website and I've run into an issue with my secondary menu. Right now, only the text is linked and I need to change it so that the entire list item acts as a link. I'm looking to ...

Update the default arrow icon in the expand/collapse navigation bar

I need help changing the downward arrow in the code below to a fontawesome icon. I'm unsure about how to: 1. Remove the default arrow on the right of the parent node. 2. Use "+/-" symbols to represent the collapse state. It seems that the onclick c ...

Angular does not display a loading indicator in the header

When handling service calls, I have implemented a loading indicator to provide feedback to the user. However, it appears that this indicator is not effectively preventing users from interacting with header items before the loading process is complete. My ...

Choose a specific field from a Django filter option

Just had a quick query: Is there a way for me to choose only one field from my filter form in Django? At the moment, I'm showcasing the entire form: <div class="container"> <form method="GET" > {{ filter.form.Precio|crispy }} ...

In jQuery, how to create a single event that applies to two different elements simultaneously, rather than individually for each element

How can I create a toggle event for 2 different TDs within my table row that will show/hide the next table row when clicked? <table> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> & ...

Instructions on filling the star icon with color upon clicking the button

Currently working on a project using codeIgniter where I have a form for rating products. I am facing an issue where, upon clicking the star button, only the border color changes to yellow while the center of the button remains white. Can someone please g ...

Struggling to align block elements correctly after changing them to inline

I've been trying to align this paragraph while keeping the navigation menu and logo in their correct positions. I attempted to make everything inline, but that didn't work. Then I experimented with the float property, which only made things worse ...

Steps to access a Windows folder after clicking on a link within an HTML page using Asp.net

I attempted to use the following code : <a href="file:///C:\Programs\sort.mw">Link 1</a> <a href="file:///C:\Videos\lecture.mp4">Link 2</a> Unfortunately, this code does not work in Google Chrome or Firefox bro ...

Anomaly in Form Validation with Semantic-UI

This time around, I am implementing Semantic-UI with React. In the past, I have successfully utilized Semantic-UI's form and form validation features in various projects without encountering any issues. However, a new problem has arisen, which I will ...

Toggle the visibility of an element with a single button click

Below is a snippet of my sample code: SAMPLE HTML CODE: <ul> <li class="item"> item 1 </li> <li class="item"> item 1 </li> <li class="item"> item 1 </li> <li class="item"> item 1 </li> <l ...

Restricting ckeditor material while pulling it from a database

Although I know there are similar questions out there, as a newbie, none of them seem to specifically address what I'm trying to achieve. I am currently working on an asp.net MVC 4 application where the content entered by the user in the ckeditor text ...

What is the best way to align my asp.NET panels in the center?

I am working with panels that have tables to organize textboxes and labels. I want to center them, but I am struggling to find the right attribute to use. I've attempted justifying them in the design view and using horizontalalign:center in HTML, but ...

Is there a way to navigate back and forward in browsers for single page applications?

Working on a Single Page Application(SPA) has led me to utilize htmlPushState and window.onpop in order to maintain browser back and forward functionality while changing CSS styles and calling backend APIs. Currently, my SPA project consists of 5 pages, b ...

Employing the Confirm() function within the onbeforeunload() event

Is there a way to prompt the user with a confirmation box before exiting a page using JavaScript? If the user clicks "OK", a function should be executed before leaving the page, and if they click "Cancel", the page should remain open. window.onbeforeunloa ...

Animating the Click Event to Change Grid Layout in React

Can a grid layout change be animated on click in React? For instance, consider the following component: import { Box, Button, styled, useMediaQuery } from "@mui/material"; import Row1 from "./Row1"; import React from "react"; ...