azgooon azgooon - 4 months ago 6
HTML Question

text in <span> is not inheriting styles from class

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><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></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:

enter image description here

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"><a href="#">Menu 1</a></span></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>


The font become bigger but also all other formatting disappear

Incorrect colors:

enter image description here

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
  • 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><a href="#"><span>Menu 1</span></a>
  </li>
  <li><a href="#">Menu 2</a>
  </li>
  <li><a href="#">Menu 3</a>
  </li>
  <li><a href="#">Menu 4</a>
  </li>
</ul>

Comments