Why would CSS ignore selector under attribute

Question

I have a button: <button class="outline">Outline</button> which I want to set the outline on, but all of the other buttons should not have outline.

If give it a class b1 and do:

[dir="ltr"] .b1 {
    border: 0;
}
[dir="ltr"] .b1.outline {
    border-width: 1px;
}

It does not have an outline.

However, if give it a class b2 and do:

.b2 {
  border: 0;
}
.b2.outline {
  border-width: 1px;
}

It does have an outline!

Codepen to see for yourselves: https://codepen.io/anon/pen/gRMBdZ

Why does that happen?

Answer 1

This has to do with specifity and the use of border: 0;. The specificity of the two sets of selectors applies border: 0; in a different order than one another. border is a shorthand property used to apply border-width, border-style and border-color. Applying 0 or none will remove the styles for all of those properties.

In your CodePen you have button.outline which is playing a role in the visibility of the button's border.

Your first set is applied in this order:

1. button.outline - border-style and border-color properties applied
2. [dir="ltr"] .b1 - border properties removed with border: 0;
3. [dir="ltr"] .b1.ouline - border-width applied, no color or style

Border is not visible even though there is a width because the rest of the border properties do not have values that would make it visible, like color and style.

---

Your second set is applied in this order:

1. .b2 - border properties removed with border: 0;
2. button.outline - border-style and border-color properties applied
3. .b2.ouline - border-width applied

Border is visible because we have border properties that make it visible, i.e. width, color, style.