If there are two child elements nested within a div with an ID, how do you select the first child an-CodePudding

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.

CodePudding user response：

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>

CodePudding user response：

This will work in your example cpde

#content {
  font-size: 14px;
}
#content *:first-child   p::first-letter {
  font-size: 32px;
  color: blue;
}

<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>