Trying to hide a button, it's text and icon when link not present

user_5852490 0
Viewed 255

I'm trying to hide a button when the link within the button is not found or the link value is "none". With the code below I'm seeing the text and link have been removed but part of the button is still visible. This is what I'm seeing

div.trailer button a[href="None"] {
  display: none;
}

div.trailer button a[href^="http:"] {
  display: block;
}
<div class="trailer"><button type="button" class="btn btn-primary"><a href="none" target=”_blank”><i class="fab fa-youtube"></i>Trailer</a></button></div>

I dont know where I'm going wrong.

css html
3 Answers

In order to achieve what you want, you need to be able to hide the button based on its child's (a element) attribute.

Unfortunately, this is not possible with just CSS because according to Wikipedia, selectors are unable to ascend.

You can implement what you want to do with a simple JavaScript though:

document.querySelectorAll('a[href="none"]').forEach(el =>
  el.parent.classList.add('hidden')
);

And then add a .hidden CSS.

user_39302470

As technophyle said, you can't modify the parent element of the anchor using css so when the anchor gets hidden, you're left with the button. However, if you remove the button and make the anchor look like a button it should work well. And of course make the href's match. You have the selector as "None" and the href on the anchor as "none". Here it is with that corrected and with style added to the anchor:

div.trailer a[href="none"] {
  display: none;
}

div.trailer a[href^="http:"] {
  display: block;
  background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%);
  background-repeat: repeat-x;
  border-color: #ccc;
  color: #333;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
}
<div class="trailer"><a href="none" target=”_blank”><i class="fab fa-youtube"> 
</i>Trailer</a></div>

user_18872130

  1. fix your html structure, have link inside a button is not correct and some browsers have problem with! make it like a normal link tag and give the style of a button to your element

  2. Maybe it's good idea to keep hide all links and show the only ones that has correct href format, like what you did !

    div.trailer a { display:none; }

    div.trailer a[href^='href:']{ display:block; }

user_67781410
Related