Nested span in heading not working

HTML & CSS
1

I am trying to style a book title, and my code isn’t working.

I have a book title where I want the entire thing semantically to be an H2, but I want the end of the title to be styled in less dominant font like this…


<style>
li.productDetails h2{
  font-weigt: 1.4em;
  font-weight: bold;
}

li.productDetails span{
  display: block;
  font-weigt: 1em;
  font-weight: bold;
}
</style>

<body>
  <h2>Mastering MS Windows: <span>Windows 95</span></h2>
</body>

2

I think you’re missing an HTML wrapper with the class you’re using in your CSS:

<ul>
  <li class="productDetails">
    <h2>Mastering MS Windows: <span>Windows 95</span></h2>
  </li>
</ul>

else you could make your CSS selector simpler and modify your HTML accordingly

 .productDetails span {
  display: block;
  font-weigt: 1em;
  font-weight: bold;
}

<div class="productDetails">
    <h2>Mastering MS Windows: <span>Windows 95</span></h2>
</div>
3

@Andres_Vaquero,

Here is a more accurate code sample…

<style>
li.productDetails h2{
  font-size: 1.4em;
  font-weight: bold;
}

li.productDetails span#W95{
  display: block;
  font-size: 1.4em;
  font-weight: bold;
}

</style>

<body>
  <ul id="productWrapper">
    <li class="productDetails">
      <h2>Mastering MS Windows<span id="W95">Windows 95</span></h2>
    </li>
4

It works for me, however the styles are the same in both… bold and same font-size. Therefore you will not be noticing any change.

5

I don’t have the code on this notebook and typed it up and have a type-o it should be unbold 1em for the span.

Let me eye my code again because it doesn’t work even though you make it sound like I am coding it correctly

6

@Andres_Vaquero,

Here is a snippet of my actual code - it runs but the formatting does not work. :frowning:

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

  <title>z_test2.html</title>

  <style media="screen">
    body{
      background-color: #f9f9f9;
      font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
    }

    div#container{
      display: flex;
      flex-wrap: wrap;
    }

    ul{
      list-style: none;
    }
    
    li.productDetails h2{
      margin: 0;
      padding: 0.5em 0;
      font-size: 1.4em;
      font-weight: bold;
    }

    li.productDetails #123{
      display: block;
      font-size: 1em;
      font-weight: bold;
    }

  </style>
</head>

<body>
  <div id="container">

    <ul>
      
      <li class="productDetails">
        <h2>Mastering MS Windows<span id="123">Windows 95</span></h2>
    </ul>

  </div><!-- #container -->

</body>

</html>
7

I found your issue: HTML ids cannot start with a number.
Also, although not what is making it fail, you’re missing a closing </li>

8

I saw that I accidentally cut out the trailing

It can’t be a number issue, because originally I had…

li.productDetails # OS{

}

I changed it to id=“xyz” and still no dice

9

It is, trust me on this… never start an id with a number, it is illegal in HTML law :smiley: . Changing that to a proper id made the code work for me.
You might also have had that other problem you were describing, maybe a mixture of issues.

10

The last code I posted is a self-contained example.

When I run it I see…

Mastering MS WindowsWindows 95

I added the training < /li > and I changed the span ID to “xyz”.

Still doesn’t work.

11

I think maybe it is a caching issue

12

I changed to id=“andres” and it didn’t work and then it did work. :wonky:

13

sounds like you have several issues playing at once… make sure you have properly disabled the cache… Chrome has a handy setting: settings -> Network -> disable cache when dev tools is open

14

How do I do that in Firefox?

Looks like I also had back luck with names? I tried “OS”, “123”, “xyz” and they all failed - apparently they are reserved or something?

15

In Firefox: settings -> advanced -> disable HTTP cache
Make sure you keep the dev tools open for this to work

1 Like
16

Hey @UpstateLeafPeeper, someone helped me point out a few other things that I missed that may help you:

  • You will not need the id if you target your span correctly.
  • h2 default styles are already bold so the font-weight:bold in the span will do nothing.
  • Also font-size: 1em is saying that it should be 100% the size of the container’s font-size so it will have no effect.
li.productDetails h2{
  font-size: 1.4em;
  font-weight: bold;
}
li.productDetails h2 span{
  display: block;/* is working ok */
  font-size: 1em;/* does nothing -  just makes same size as parent*/
  font-weight: bold;/* does nothing - I am already bold (change to 'normal' if you don't want it bold) */
}

As for your selectors xyz, OS and 123, the only offender is 123 for the reason I explained yesterday. Why you might not have noticed a change of style in the elements is because of the reasons I told you above.

Hope that helps.

2 Likes
17

@Andres_Vaquero

Much appreciated tips!

if I ever get my site done, next year I am going to buy a bunch of HTML and CSS books and re-learn everything from the ground up, including learning how to write “smarter” CSS!!

1 Like
18

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.