text in <span> is not inheriting styles from class - html

Question

I wonder if someone can help me or point me in the right direction so I can resolve my problem.
I have a list which has got class assigned
<ul class="link-list nav">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
The link-list nav looks as below:
.link-list {
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
font-size: 12px;
}
.link-list > li {
display: inline-block;
}
.link-list > li > a {
display: block;
padding: .9em 1.6em;
/*margin: top right bottom left;
border: 1px solid white;*/
text-decoration: none;
color: white;
}
.link-list > li > a:hover { /* :hover, :focus, :blur */
color: pink;
}
.link-list.nav > li > a {
font-weight: bold;
}
So now the list is being formatted as it should be
Correct colors:
but when I am trying to make the first item of the list bigger by embedding span tags and changing above code to:
<ul class="link-list nav">
<li><span style="font-size: large">Menu 1</span></li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
The font become bigger but also all other formatting disappear
Incorrect colors:
I have been experimenting with defining another class which would inherit from link-list nav but unsuccessfully. Any suggestions please?
Thanks in advance,
Regards Tom.

Answer 1

you can put the span as child of a given your CSS (you are using the direct child selector >).
or
you can just use CSS selector first-child in li
or
or simply removing the >, making it a child (not direct one).
.link-list {
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
font-size: 12px;
}
.link-list > li {
display: inline-block;
}
.link-list > li > a {
display: block;
padding: .9em 1.6em;
/*margin: top right bottom left;
border: 1px solid white;*/
text-decoration: none;
color: red;
}
.link-list > li > a:hover {
/* :hover, :focus, :blur */
color: pink;
}
.link-list.nav > li > a {
font-weight: 700;
}
/* use this */
.link-list.nav > li > a span {
font-size: 20px
}
/* or use this */
.link-list.nav > li:first-child > a {
color: blue
}
<ul class="link-list nav">
<li><span>Menu 1</span>
</li>
<li>Menu 2
</li>
<li>Menu 3
</li>
<li>Menu 4
</li>
</ul>

Answer 2

The selectors no longer match because the <a> is no longer a child of the <li>.
Use a descendant combinator (a space) instead of a child combinator (a >).
Alternatively, put the span inside the innermost element so that it doesn't disrupt the child combinators.
Alternatively, and probably the best option, don't add an extra element at all. You want to style all the text there, so apply your CSS to the whole element.

Answer 3

Thank you Quentin and dippas for your swift responses.
Out of both solutions, I have gone for creating:
.link-list.nav > li > a span {
font-size: 20px
}
and changing
<li><span>Menu 1</span>
to
<li><span>Menu 1</span>
This resolved my problem completely.
Clearly I need to reach out to articles about inheriting.
Thanks again and take care guys!