-1

Is there a way in (pure) CSS to inherit color from earlier defined code? In this example the inherit listens to the ul li parent and takes the red color, is there a way to take the blue color here?

I tried unset and inherit but both listens to ul li and initial makes the link color black.

Note: I am trying to achieve this without actually adding new classes or hardcoding the # color code.

Example:

ul li {
    color: red;
}

ul li a {
    color: inherit;
}

a {
    color: blue;
}
<ul>
    <li>
        <a>Link</a>
    </li>
</ul>

I am trying to get the Bootstrap color for a

TylerH
  • 20,799
  • 66
  • 75
  • 101
Blank
  • 540
  • 2
  • 21
  • `a` is not a parent, but a descendant, so I'm not sure what you mean by 'older' parents. It's not clear what you mean either by 'trying to get the Bootstrap color for `a`'. Why not just look make a link in a demo and add the Bootstrap library and see with browser dev tools what color it sets? – TylerH Jan 03 '23 at 14:24
  • @TylerH how do I revert the color state to blue is the question, older parent in this case is the blue state of a – Blank Jan 03 '23 at 14:25
  • Remove the `ul li a { inherit }` line, since you don't want it, apparently. Or make the `a` selector equal or higher specificity than it. – TylerH Jan 03 '23 at 14:32
  • I can't simply delete it.. I still use it generally. This is only needed for 1 specific place in a page. – Blank Jan 03 '23 at 14:48
  • If it's only needed in one place, I say use an ID and be done with it. Once you have a selector targeting a unique element, you should be able to use the `color: initial` property value. – TylerH Jan 03 '23 at 15:09

1 Answers1

-1

You should play a little with the CSS specificity there. There the anchor tag has the specificity of 0, 0, 3

ul li a {
    color: inherit;
}

but here the specificity of the anchor tag is 0, 0, 1

a {
    color: blue;
}

so If you want to change all of the anchor tags color to blue, then you should either increase a specificity for the anchors like:

html ul li a {
    color: blue;
}

or just copy and paste that line of code again like this:

ul li {
    color: red;
}

ul li a {
    color: inherit;
}

a {
    color: blue;
}

ul li a {
    color: blue;
}

that way, if the specificity is the same, then the last style will be used.

cs.matyi
  • 1,204
  • 1
  • 11
  • 21