Two different font sizes one line css

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 o开发者_高级运维n this one line in my css.

---

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

---

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.

---

On another note.

Answer to my google search for other non situations.

The below CSS class definition

font.yellow {
   color:yellow
}

works seamlessly when used like:

<p class"blue">
    blue text here
    <font class="yellow">yellow text</font>
    still blue text here
</p>