0

blue should be blue without adding ids to elements, without using JavaScript and without knowing the parent #ids, as they can change at a future date, while allowing JavaScript to set style attributes that apply correctly.

custom-tag {
  color: blue; 
  /* 
   * the above should have the specificity of exactly 2×ids + 1×tag
   */
}


/*  later loaded CSS, which is not controllable... */

#one custom-tag, #two custom-tag {
  color: red;
}
<div id="one">
  <custom-tag>blue</custom-tag>
  <custom-tag style="color:orange">orange</custom-tag>
</div>

<div id="two">
  <custom-tag style="color:green">green</custom-tag>
  <custom-tag>blue</custom-tag>
</div>
tao
  • 82,996
  • 16
  • 114
  • 150
  • 2
    See also [Can type selectors be repeated to increase specificity?](https://stackoverflow.com/questions/28299817/can-type-selectors-be-repeated-to-increase-specificity), [Programmatically set CSS selector specificity](https://stackoverflow.com/questions/44219057/programmatically-set-css-selector-specificity) – BoltClock Mar 21 '18 at 15:34
  • @BoltClock I just read the one you linked. Not an exact duplicate, but close enough to mark as such. I'll leave mine in, since my friend wasn't able to find the other one. I'm sure it will help indexing. – tao Mar 21 '18 at 15:49

2 Answers2

2

Increase selector specificity without the need of parents, using :not() + non-existing selectors of desired specificity:

any-tag:not(#bogus_id):not(#bogus_id) {
  color: blue; 
}

#one any-tag, #two any-tag  {
  color: red;
}
<div id="one">
  <any-tag>blue</any-tag>
  <any-tag style="color:orange">orange</any-tag>
</div>

<div id="two">
  <any-tag style="color:green">green</any-tag>
  <any-tag>blue</any-tag>
</div>
tao
  • 82,996
  • 16
  • 114
  • 150
0

You can also stack up the selectors like this:

.selector.selector

which will increase the specificity.

You can also stack them more than twice.

Works in all browsers.

Misha Reyzlin
  • 13,736
  • 4
  • 54
  • 63
  • 2
    Note that you cannot do this with a type selector (as shown in the question). You can, however, use :not() as described [here](https://stackoverflow.com/questions/28299817/can-type-selectors-be-repeated-to-increase-specificity). – BoltClock Mar 21 '18 at 15:35