-1

I have a scenario to apply color to all descendants except the anchor tag <a>. 

 .texts *:not(a) {
      color: red;
    }
    <div class="texts">
      <div class="wrapper">
        sample text in this
      </div>
        <div class="wrapper">
        sample text in this
      </div>
        <div class="wrapper">
        sample text in this
      </div>
        <div class="wrapper">
        sample text in this
      </div>
        <div class="wrapper">
        <a href="#">TEST</a>
      </div>
        <div class="wrapper">
        sample text in this
      </div>
    </div>

This is working. But when i inspect i can see that the style is being applied to the anchor tag element. I am converting all the styles applied to inline later. So the color that is striked while inspecting is taken as inline. Why does that happen. See thescreenshot

melvin
  • 2,571
  • 1
  • 14
  • 37
  • "child elements (direct and indirect)" — Children are children, there is no such thing as an "indirect" child. The terms you are looking for a *children* and *descendants*. – Quentin Apr 10 '19 at 09:05
  • @Quentin Ok. How can i modify my requirment ? – melvin Apr 10 '19 at 09:08
  • 1
    Replace the phrase "child elements (direct and indirect)" with "descendants" – Quentin Apr 10 '19 at 09:08

2 Answers2

4

The color style is not being explicitly applied to your anchor element.

The default value for color is inherit, so even though you have excluded anchors from your selector, it'll still inherit the colour from its parent, div.wrapper.

FYI; your inspector actually states this:

enter image description here

George
  • 36,413
  • 9
  • 66
  • 103
  • Is there a solution to this ? Because when i convert this style as inline, red color is applied to anchor tag – melvin Apr 10 '19 at 08:59
  • This is by design, so it's not exactly a *problem* as such. You can change the `color` style of your anchor tags to anything you'd like to prevent inheriting, e.g. `.texts .wrapper a{ color: green; }`. – George Apr 10 '19 at 09:03
  • I want the default color of link. Is there any way i can prevent anchor tag from being style applied ? – melvin Apr 10 '19 at 09:04
  • @melvin — You **have** the default colour of the link. You can tell that because the browser stylesheet rule (with the selector `a:-webkit-any-link`) is overriding the inherited colour (which is crossed out). – Quentin Apr 10 '19 at 09:08
  • But when i convert it to inline, red color is applied to link – melvin Apr 10 '19 at 09:09
  • @melvin — Then something is wrong with the way you convert to inline. – Quentin Apr 10 '19 at 09:09
  • Set color of the tag to initial – RadekF Apr 10 '19 at 09:12
  • 1
    @George Thanks for your time – melvin Apr 10 '19 at 09:13
0

because the anchor is not a child of .texts

check this out

<div class="texts">
  <div class="wrapper">
    sample text in this
  </div>
    <div class="wrapper">
    sample text in this
  </div>
    <div class="wrapper">
    sample text in this
  </div>
    <div class="wrapper">
    sample text in this
  </div>
    <div class="wrapper">
    <a href="#">TEST</a>
  </div>
    <div class="wrapper">
    sample text in this
  </div>
  <a href="#">TEST2</a>
</div>

.texts *:not(a) {
  color: red;
  font-size: 20px;
}

the css is not applied to the test2 child anchor :)

KLeoS
  • 71
  • 1
  • 11