How to apply css only for first span - css

Question

Trying to apply CSS
.content>span:first-child{
color: red;
font-size: 12px;
font-weight: bold;
}
<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>
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

Answer 1

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
span.content > span:first-of-type {
color: red;
}
<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>
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
svg+span {
color: red;
}
<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>

Answer 2

You can use first-of-type so something like:
.content > span:first-of-type {
color:red;
}

Answer 3

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:
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.
.content > span:first-of-type. This seems to be what you're after, i.e. the first span that's the child of .content.
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

Answer 4

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 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.

Answer 5

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;
}