Style first character of second paragraph with css

Question

 <div class="ex1">
      <div>
        <p></p>
        <p>Exmaple 1</p>
        <p>Exmaple 2</p>
      </div>
    </div>

i can't select first character in "Exmaple 1" with css and i finding solution

Thanks for support

Answer 1

If you are talking about styling the first letter, then use :first-letter pseudo-element

.ex1 p:first-letter{
  color:red;
  font-size:2em;
}

<div class="ex1">
  <div>
    <p>Example 1</p>
    <p>Example 2</p>
  </div>
</div>

---

If you want to only apply it in the first p then also use :first-of-type

.ex1 p:first-of-type:first-letter{
  color:red;
  font-size:2em;
}

<div class="ex1">
  <div>
    <p>Example 1</p>
    <p>Example 2</p>
  </div>
</div>

---

Finally, if you just want to target the second element then use :nth-child(2) or the second p then :nth-of-type(2)

.ex1 p:nth-child(2):first-letter{
  color:red;
}
.ex1 p:nth-of-type(2):first-letter{
    font-size:2em;
}

<div class="ex1">
  <div>
    <p></p>
    <p>Example 1</p>
    <p>Example 2</p>
  </div>
</div>