Apply CSS For First Letter

Question

I'm writing a HTML code where in the first letter has to be big and should be of 2 lines. Below is my code. HTML

Solution 1:

if you want to select only the first letter of the first .para use this

.section-sect1 .section-title + .para:first-letter {
 border: 1px solid;
 font-weight: bold;
 color: red;
}

<div class="section-sect1">
  <a name="CH_00001-SEC-1"></a>
  <div class="section-title">
    <span class="section-num"></span> Title
  </div>
  <div class="para">Text1
  </div>
  <div class="para">Text2
  </div>
</div>

because the .para divs are not the only children inside the container , you can't use :first-child or something like that. so you need to use a sibling selector like + which selects the first .para after the .section-title

Solution 2:

Use :first-letter instead of :first-of-type:first-letter

Check the fiddle I have updated

Solution 3:

You can achieve this by using the below code.

.para::first-letter{
  font-size: 20px;
}

With the use of ::first-letter You can able to detect first letter in para class, Now you can style for first letter.

Solution 4:

Your code looks cool and don't focus much. Simply delete :first-of-type from your CSS and you're done!

Baca Juga

Solution 5:

you can add first letter in class with style

like that:

.firstcharacter { float: left; color: #903; font-size: 50px; line-height: 20px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }

<div class="section-sect1">
  <a name="CH_00001-SEC-1"></a>
  <div class="section-title">
    <span class="section-num"></span> <span class='firstcharacter'>T</span>itle</div>
  <div class="para">Text1
  </div>
  <div class="para">Text2
  </div>
</div>

or you mast add test in tag p