Specificity and Direct Targeting

Question

I'm running loops between my understanding of specificity and targeting an element. I understand the base concept of specificity and read numerous articles on how to calculate specificity using a,b,c,d, where d is the lowest specificity and a is the highest.

I'm losing scope of where specificity comes into practice. In the snippet below, even though some specificity rules are "higher" than others, lower specificities are applied, e.g.

/* 0001 */

span {
  color: red;
}


/* 0001 */

p {
  color: blue;
}


/* 0010 */

.main {
  color: orange;
}


/* 0100 */

#h4-id {
  color: limegreen;
}


/* 0002 */

div h4 {
  color: purple;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body class='main'>
  <h3>this should be orange</h3>

  <div id='h4-id'>
    <h4>ID Selector</h4>
  </div>

  <p>
    text inside paragraph
    <span>hello world</span>
  </p>
</body>

</html>

There is a div with the ID h4-id. The rule sets all text to limegreen.

There is another selector with lower specificity div h4, this rule "wins" and the declarations in that rule is applied.

I believe the reason is that it is a "direct" target.

Here is another example:

  /* 0002 */

p span {
  /*     font-size: 200px; */
  text-decoration: underline dotted red;
  font-style: normal;
  color: teal;
  background-color: yellow;
}

/* 0001 */

span {
 background-color: teal;

}


/* 0010 */

.main {
  font-family: monospace;
  color: blue;
  font-size: 22px;
  background-color: lightgrey;
}


/*  0001 */

p {
  font-family: cursive;
  color: indigo;
  font-size: 100px;
  background-color: limegreen;
  font-style: italic;
  text-decoration: underline;

<p class='main'>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do <span>eiusmod tempor incididunt</span> ut Tristique magna sit amet purus gravida quis blandit turpis. Tellus elementum sagittis vitae et. Faucibus pulvinar <span>elementum integer enim neque</span>  volutpat ac tincidunt vitae. At tempor commodo ullamcorper a.
</p>https://stackoverflow.com/questions/ask#

In this example, once again, the lower specificity wins, but these are "direct targets" (I believe), which is why they win. The class "main" does not have higher priority over the descendant selector p span.

the .main class score is 10, all the text inside it should have the ruleset applied unless there is an ID
the p span selector is 2, the reason this wins is that it is directly targeted (even though the specificity score is lower? this is where my confusion is).

Here is one of the many types of articles and references I've been reading to solidify my knowledge of specificity

Is it correct to say, before applying specificity rules and calculating specificity, if the element is directly targeted, specificity rules do not apply and the direct target always takes precedence(like the examples I posted)? If this is the case, just for my own mental model, I'd prefer using the CSS diagram to calculate specificity as so:

false, 0, 0, 0, 0 (false means it is not a direct target, this could always be a 1 or 0 as well). Is this valid reasoning?

You are forgetting one rule: inheritance take place at the last resort and you cannot compare two selector that doesn't target the same element. Replace color with another property that isn't inherited and you will understand — Temani Afif, Aug 29 '18 at 19:16

chazsolo · Accepted Answer · 2018-08-30T12:38:05.740

I'm losing scope of where specificity comes into practice

Specificity matters when two or more competing selectors are applying styles to the same element(s) - the rule with the higher specificity wins.

Specificity does not matter when evaluating styles that are being applied to different elements, even if that style is inherited from an ancestor.

Is it correct to say, before applying specificity rules and calculating specificity, if the element is directly targeted, specificity rules do not apply and the direct target always takes precedence

No, I would say that is incorrect. I wouldn't get wrapped up in the phrase "directly targeted"... in a sense all CSS selectors are directly targeting a set of elements, yet some properties of that rule-set can cascade to descendants, like color. Inherited styles do not also inherit the specificity from the rule-set they originated from; otherwise, to change the color of a child element you'd have to match or beat the specificity every time.

For example, the text in the following snippet is red because #main (the selector) has a higher specificity than div (the selector) and the styles are applied to the same element:

#main {
  color: red;
}

div {
  color: blue;
}

<div id="main">text</div>

However, in the next example, p wins the day because the selectors are affecting different elements:

#main {
  color: red;
}

p {
  color: blue;
}

<div id="main">
  <p>text</p>
</div>

Now, take that last example and add a new, more specific selector that applies color to p:

#main {
  color: red;
}

p {
  color: blue;
}

#main p {
  color: green;
}

<div id="main">
  <p>text</p>
</div>

The text is now green because the selector #main p (0,1,0,1) is higher than the selector p (0,0,0,1) and both selectors affect the same element.

"Specificity does not matter when evaluating styles that are being applied to *different elements*, even if that style is from a cascade." In fact, cascade resolution itself happens on a per-element basis anyway. Cascading and inheritance are two distinct concepts - styles aren't said to cascade from an ancestor to a descendant, rather *inherited from* the ancestor when there is no cascaded value. — BoltClock, Aug 30 '18 at 03:20
@BoltClock thanks for pointing that out - hopefully my last edit is more accurate. — chazsolo, Aug 30 '18 at 12:38

score 0 · Answer 2 · answered Aug 29 '18 at 17:56

First, note that color is an inherited property:

When no value for an inherited property has been specified on an element, the element gets the computed value of that property on its parent element.

So, if no color property is directly applied to an element, it will inherit its value from its parent.

Now take a look at this example:

/*Rule A*/
#divId {
  color: orange;
}

/*Rule B*/
.divClass {
  color: green;
}

/*Rule C*/
div {
  color: blue;
}

<div id="divId" class="divClass">
  div 1 (id="divId" class="divClass")
  <div class="divClass">
    div 2 (class="divClass")
    <div>
      div 3
      <span> and a span</span>
    </div>
  </div>
</div>

We have 3 divs and a span. Let's break down how each one gets its color:

Div 1 is targeted by rules A, B, and C. Rule A has the highest specificity, because it uses an id selector.
Div 2 is targeted by Rules B and C. Rule B has higher specificity, because it uses a class selector.
Div 3 is targeted only by rule C.
The span is not targeted by any css rule. So it will inherit its color from its parent, div 3.

Specificity and Direct Targeting

2 Answers2