How to apply css only for first span

Trying to apply CSS

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.content>span:first-child{
  color: red;
  font-size: 12px;
  font-weight: bold;
}

<!-- language: lang-html -->

<span class="content">
       <svg xmlns="http://www.w3.org/2000/svg">
       <use xlink:href="assets/icons.svg#back-button"></use>
    </svg>
     <span> Lorem ipsom </span>
<!-- only this span font color should be red -->

<span>
       <span> </span>
</span>
</span>

<!-- end snippet -->

for only the first span. I have tried but it is not working. If anyone knows please help to find the solution.

Demo: https://stackblitz.com/edit/angular-svg-use-gvmekn?file=src%2Fapp%2Fapp.component.html

use the :first-of-type pseudo-class

> :first-of-type
>
> The :first-of-type CSS pseudo-class represents the first element of its type among a group of sibling elements.
>
> https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

span.content > span:first-of-type {
  color: red;
}

<!-- language: lang-html -->

<span class="content">
  <svg viewBox="0 0 10 2" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="0" x2="10" y2="0" stroke="black" />
</svg>

  <span> Lorem ipsom </span>
  <!-- only this span font color should be red -->

  <span>
    Child
   <span> Inner child </span>
  </span>
</span>

<!-- end snippet -->

use adjacent sibling combinator

> +
>
> The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.
>
> https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

svg+span {
  color: red;
}

<!-- language: lang-html -->

<span class="content">
  <svg viewBox="0 0 10 2" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="0" x2="10" y2="0" stroke="black" />
</svg>

  <span> Lorem ipsom </span>
  <!-- only this span font color should be red -->

  <span>
    Child
   <span> Inner child </span>
  </span>
</span>

<!-- end snippet -->

You can use first-of-type so something like:

.content > span:first-of-type {
    color:red;
}

The problem is that the :first-child selector only applies if the span you're after is the first child of .content.

In your case the first child is an svg tag, hence why it's not working.

There are 3 ways of getting around this:

1. Make the selector .content > span:nth-child(2). This'll work in the above but will again break if you ever put additional elements between the span in question and your svg.

2. .content > span:first-of-type. This seems to be what you're after, i.e. the first span that's the child of .content.

3. span.some-meaningful-classname - This gives you the flexibility to choose exactly which spans to apply the class to by adding classname="some-meaningful-classname" to your span.

Up to you which to go with, depending on your requirements.

Also, there's a good reference to CSS selectors here: https://www.w3schools.com/cssref/css_selectors.php

You can do it by just giving the span a class like the following

Old:

<span> Lorem ipsom </span>

New:

<span class="firstspan"> Lorem ipsom </span>

(Edit: Sorry forgot to mark the <span> as code so it did not display correctly)

next you can add the class name to the css file like this:

.firstspan {
  /* this is a example of code that will make the text red*/
  color: red;
  font-size: 12px;
  font-weight: bold;
}

I hope this helps.

Because the .container is also a span, the declarations overlap each other.

To do this, you just need to target the nth child, like span:nth-child(2) or whichever span you want by nth-child('child No.'). Here is the solution:

HTML:

<span class="content">
       <svg xmlns="http://www.w3.org/2000/svg">
       <use xlink:href="assets/icons.svg#back-button"></use>
    </svg>
     <span> Lorem ipsom </span>
<!-- only this span font color should be red -->

<span>
       <span> </span>
</span>
</span>

CSS:

span:nth-child(2) {
        color: red;
        font-size: 12px;
        font-weight: bold;
      }