Bootstrap: Too strong selectors

[joneff]

The following selector Is a notch too strong (0, 2, 1) and overrides normal class names:

https://github.com/twbs/bootstrap/blob/6dd3d91768227a7ac03a63f8e47eacae99be8892/scss/_reboot.scss#L208-L220

It could be

a[name]:not([href]):not([tabindex]): {
  color: inherit;
  text-decoration: none;


  @include hover-focus {
    color: inherit;
    text-decoration: none;
  }


  &:focus {
    outline: 0;
  }
}

Note: Updated snippet to better reflect the purpose of the styling i.e. named anchors. Original selector was a:not([href]):not([tabindex]):not([class])

[prateekgoel]

I agree @joneff .
Can I submit a PR to this in case you're not working on this?

[joneff]

It's all yours.

[prateekgoel]

Thanks @joneff

[mdo]

What about anchors without a name attribute? Also, apparently name is obsolete in HTML 5 per the MDN docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a.

[prateekgoel]

Yes, you are right @mdo. Can we use something like a:not(:link):not([tabindex])? However, this seems less specific and may be overwritten by other CSS.

[joneff]

@mdo, yes named (as in a[name]) anchors are obsolete, but are still widely used. The rest of cases use id attribute on the nearest element. In the case of github issue comments, per say, the naming is done with ID attribute on div elements.

For those who use the standard approach i.e. <element id="some_id">...</element> the current selector is not an issue. However, those who have <a class="my-class">...</a>, the current selector is quite strong.

As an example of such links, if you have a slider widget with the slider part and two buttons for changing the value, you don't need tabindex nor href attribute on those because, per spec, you can only focus the widget itself and it manages the focus on its child items.

To me, assuming that anyone using named anchors is doing so by using the name attribute and not the id attribute has much smaller impact than assuming that anyone not having href or tabindex attribute is using named anchor and in terms forcing them to do something about the color and / or text decoration.

[XhmikosR]

Definitely against name personally. We ought to support proper markup and not obsolete stuff.

[joneff]

@XhmikosR, if that's the case, then I am not sure why the above code exists anyway :) Using named anchors with id attribute negates the need for the snippet.

[mdo]

Context is in the issue that code resolved: https://github.com/twbs/bootstrap/issues/19402.

[XhmikosR]

I think the current implementation, which is what GitHub is using too judging from @mdo's linked issue, seems fine.

Anyway, just my 2 cents.

[prateekgoel]

Okay. So, I will close the PR for this.

[prateekgoel]

I think this issue can be closed now.

[bmaehr]

I'm not sure why this is happening but this change creates a problem for our application.

We have an application using https://github.com/vsymguysung/ember-cli-summernote 1.5.0 and after upgrading to 1.5.1 some styles from the application have changed.

The reason is, that in the CSS used by the browser there is
a:not([href]):not([tabindex]) {
color: inherit;
}
quite far on the top of the list. It overrides a
.btn-primary {
color: #fff;
}
which is further down and the color black is used instead of white.

Also other visual problems occur after upgrading the version.

[orionseye]

Who had this idea anyway? supposed that a frameworks makes (my) life easier

[willimaese]

I have the same issue as @bmaehr .
"a:not([href]):not([tabindex]), a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover" selector is too strong and overrides our app styles.

[imoark]

Same issue as @bmaehr
Can confirm that a:not([href]):not([tabindex]) is basically too strong, that it overrides a class selector.
Any good workaround??

[Spawnrad]

Same issue :( the overwritten is too strong

[bmaehr]

A link requires the href="" attribute.

As far as I know there is no HTML standard which defines href as mandatory.

The examples above do not have a href="" but adding it fixes the problem.

Have you ever thought, that an application not only uses bootstrap but also other libraries where it is not so easy to just add something?

[ffoodd]

You probably want to read @mdo's last comment above for context.

Links without href are valid HTML— however those are considered placeholder links, not hyperlinks.

Styling both differently is considered a best practice, since they do not behave the same. Placeholder links litteraly do nothing and should not look like hyperlinks.

Would you have any valid use case demonstrating this could be wrong?