I am a new programmer working on a project and I want to be able to change the first letter of the first <p> under a <div> with an id. at this point my code looks like this:
#content>p:first-letter {
font-size: 32px;
}<div id="content">
<h2 role="heading">This demonstrates absolute positioning</h2>
<p>Static positioning is the default and relative is much like static but the difference is the box with relative can be offset from its original position with the properties top, right, bottom, left.</p>
<p>As we can see with this demonstration of absolute positioning, the navigation to the left is placed out of the normal flow of the page and delivers it to a world all on its own. It can be placed anywhere on the page we want it to be.</p>
</div>The result looks like this:
Both paragraphs have the large first letter
I’ve tried pretty much every variation of adding :first-child into the code and I haven’t been able to get it to work.
>Solution :
Add :first-of-type to the mix:
#content>p:first-of-type:first-letter {
font-size: 32px;
}<div id="content">
<h2 role="heading">This demonstrates absolute positioning</h2>
<p>Static positioning is the default and relative is much like static but the difference is the box with relative can be offset from its original position with the properties top, right, bottom, left.</p>
<p>As we can see with this demonstration of absolute positioning, the navigation to the left is placed out of the normal flow of the page and delivers it to a world all on its own. It can be placed anywhere on the page we want it to be.</p>
</div>