-1

Can anyone tell me why the last span is dotted? Why isn't it overwritten?

Forkable pen https://codepen.io/anon/pen/pqjREd

div div div * span {
  border: double;
}

div * * span {
  border: dotted;
}

div * {
  border: dashed;
}

div {
  border: none;
}
<div>
  Line 1
  <br>
  <span>Line 2</span>
  <br>
  <div>
    Line 3
    <br>
    <span>Line 4</span>
    <br>
    <div>
      Line 5
      <br>
      <span>Line 6</span>
      <br>
    </div>
  </div>

</div>

5
  • 2
    Specificity I'd suggest you look it up - specificity.keegan.st
    – Paulie_D
    Dec 12, 2018 at 17:21
  • What rule do you expect to overwrite it?
    – Alohci
    Dec 12, 2018 at 17:23
  • As an extension of @Paulie_D's comment, see the specificity calculator and the accompanying w3 specificity documentaiton...
    – War10ck
    Dec 12, 2018 at 17:25
  • div * * span doesn't make much sense
    – j08691
    Dec 12, 2018 at 17:27
  • 1
    @j08691: That matches a span that is at least a great-grandchild of a div. It's not something you'd often encounter in real-world CSS, that's for sure...
    – BoltClock
    Dec 12, 2018 at 17:48

1 Answer 1

1

Let's break this down rule by rule.

Let's assume you've now heard of the term specificity, as others have alluded to in the comments. But let's assume either that you don't know anything about it beyond that it has something to do with your problem, or that you've read the links given to you but you're having trouble applying that knowledge to this specific problem.

To start, specificity only takes into account selectors that match the element to begin with. Since a div and a span are two different things, the last rule is irrelevant, so let's get rid of that:

div div div * span {
  border: double;
}

div * * span {
  border: dotted;
}

div * {
  border: dashed;
}

Now we have three rules, two of which ask for a span specifically, and the third, any element.

The first rule, div div div * span, doesn't match the "Line 6" element, because its div ancestors only go up to three levels. There is no fourth level between the innermost div and the span, and the parent of the outermost div is not another div, but body. So the only two rules that actually match this element are:

div * * span {
  border: dotted;
}

div * {
  border: dashed;
}

Now we can talk specificity. The universal selector * has zero specificity. All of your rules have only type selectors and/or universal selectors, so calculating their specificity is fairly straightforward:

div * * span /* 2 types -> specificity = (0, 0, 2) */
div *        /* 1 type  -> specificity = (0, 0, 1) */

In conclusion, because the dotted border rule is more specific, the dashed border rule doesn't override it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.