Two different font sizes one line css

Question

How can I style one line of text in u nav bar with two different font sizes??

In my html I have:

<nav>
     <ul>
        <li><a heref="#">Home</a></li>
        <li><a heref="#">About</a></li>
        <li><a heref="#">Products</a></li>
        <li><a heref="#">Stockists</a></li>
        <li><a heref="#">Blog <em>(a pinch of psalt)</em></a></li>
        <li><a heref="#">Contact</a></li>
      </ul>
</nav>

Where I have

<li><a heref="#">Blog <em>(a pinch of psalt)</em></a></li>

I want Blog to be 35px and (a pinch of psalt) to be say 15px. I have used child selectors to target each of the nav elements to style for colour, font size etc but am unsure of how to target two separate elements on this one line in my css.

Answer 1

Just .nav ul li a and .nav ul li a em . If this is what you are looking for

Answer 2

Add a <span> to your HTML and give it a class which will allow you to target it with CSS. For example:

<li><a heref="#"><span class="big">Blog</span> <em>(a pinch of psalt)</em></a></li>

And CSS:

nav li .big {
    font-size: 35px;
}

You already have an <em> tag around the remaining text (or you can target nav li a with a "default" text size), so that's the only HTML you will need to add. Just keep in mind that you should be consistent.