user3872094 user3872094 - 4 months ago 8
CSS Question

Apply CSS for first letter

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

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


CSS

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


Here is the fiddle link of the same. https://jsfiddle.net/8b5z8gb4/

Please let me know how Can I get this done.

Answer

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 siblings inside a 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