bootstrap: Placeholder links (e.g. ...) shouldn't be styled as hyperlinks.

I honestly think this CSS snippet a:not([href]) {} is a quite bad approach, as it will cause issues with override styling down the line, and the only way to override it, is to specify exactly the same name pattern like a.myclass:not([href]) { [my new color] } and a.myclass:not([href]):hover { [my new color] } or use the horrible bad !important attribute.

I think it’s better to remove the HREF attribute on actions that triggers a modal box or something similar, than using something like href=“#” or href=“javascript:void(0)”, which is way worse in a semantically correct perspective. A button would of course be the best solution, but it’s not always suitable.

With other words, this snippet causes more issues than good, and if I choose not to use a HREF attribute, I can also make sure that those specific anchors look like I want myself, instead of being forced to make ridiculous overrides of a:not([href]) {}.

So far this is the one of the only issues I can think of that has asked us to revisit this behavior. Given that, plus the higher specificity it introduces at a global level, there are no plans to change this in Bootstrap at this time.

As identified by @abstractic, this is causing us issues, we are having to exclude _reboot.scss in our projects to get links/buttons to style correctly as not all of them have [href]. Overwriting the property, or even using a global a selector does not provide a fix.

For us, links are often made using the ui-sref="angular.route" or ng-click="function()" attributes and certainly do not always contain the href attribute.

We have no issue with it being by default un-styled if no link is present, but it should be configurable or improved, as I can fore-see quite a lot of people having similar issues to us.

It’s very possible I missed something, but why not :link to select <a> elements with working hrefs? That way it only has the specificity of one “class”, which .btn and friends should be able to override.

Small demo: http://codepen.io/tigt/pen/c032fa19010074d7fce6b8ed5de85809?editors=1100

:link {
  color: $link-color;
  text-decoration: $link-decoration;

  @include hover-focus {
    color: $link-hover-color;
    text-decoration: $link-hover-decoration;
  }

  &:focus {
    @include tab-focus();
  }
}

We worked through this at GitHub to avoid the shitshow that @patrickhlauke mentioned. Here’s how we handle it in our Markdown styles:

  // Anchors like <a name="examples">. These sometimes end up wrapped around
  // text when users mistakenly forget to close the tag or use self-closing tag
  // syntax. We don't want them to appear like links.
  // FIXME: a:not(:link):not(:visited) would be a little clearer here (and
  // possibly faster to match), but it breaks styling of <a href> elements due
  // to https://bugs.webkit.org/show_bug.cgi?id=142737.
  a:not([href]) {
    color: inherit;
    text-decoration: none;
  }