Select a text element for styling

Question

I have this situation:

    <a href="...">
      <span>
         <svg>...</svg>
         A label
      </span>
    </a>

How can I select the "A label" text element (being the second child of the span element) in order to style it?

Is is possible somehow?

is label a `` or is it just text that says "Label"? think about that — soulshined, Dec 02 '19 at 21:13
simply style the span element since it's the only text there — Temani Afif, Dec 02 '19 at 21:15
it's not a text, so if you will apply coloration, font, etc it won't get affected — Temani Afif, Dec 02 '19 at 21:26
so you need to say this in the question because display:none isn't a visual style ... see the duplicate for a solution — Temani Afif, Dec 02 '19 at 21:29

score 2 · Answer 1 · answered Dec 02 '19 at 21:14

2

Set styles for the span element, and unset for its children:

.aSpan{
   color: red;
}

.aSpan > *{
   color: initial;
}

<a href="#">
  <span class="aSpan">
       <div>Not this</div>
         This
      </span>
</a>

answered Dec 02 '19 at 21:14

symlink

1 Answers1