title: Two different font sizes one line css
body: <p>How can I style one line of text in u nav bar with two different font sizes??</p>
  
  <p>In my html I have:</p>
  
  <pre><code>&lt;nav&gt;
       &lt;ul&gt;
          &lt;li&gt;&lt;a heref="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a heref="#"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a heref="#"&gt;Products&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a heref="#"&gt;Stockists&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a heref="#"&gt;Blog &lt;em&gt;(a pinch of psalt)&lt;/em&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a heref="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Where I have </p>
  
  <p><code>&lt;li&gt;&lt;a heref="#"&gt;Blog &lt;em&gt;(a pinch of psalt)&lt;/em&gt;&lt;/a&gt;&lt;/li&gt;</code></p>
  
  <p>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. </p>