CODEWITHSUNDEEP
htmlcss
user3872094
user3872094

Reputation: 3351

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.

Upvotes: 0

Views: 202

Answers (6)

Mihai T
Mihai T

Reputation: 17687

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

Upvotes: 2

user6152171
user6152171

Reputation:

You can place the first letter in a separate tag, then style that tag to look different:

<span style="font-weight: bold">F</span><p>irst paragraph</p>

Getting this:

First paragraph

Upvotes: 0

shady youssery
shady youssery

Reputation: 440

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

like that:

.string p:first-child:first-letter { float: left; color: #903; font-size: 50px; line-height: 20px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia;}
.string p {margin-bottom: 0px;}
<div class="section-sect1">
  <a name="CH_00001-SEC-1"></a>
  <div class="section-title">
    <span class="section-num"></span> <span class='string'><p>Title</p></span></div>
  <div class="para">Text1
  </div>
  <div class="para">Text2
  </div>
</div>

Upvotes: 0

Shoeb Mirza
Shoeb Mirza

Reputation: 918

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

Upvotes: 0

Vishal Panara
Vishal Panara

Reputation: 766

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.

Upvotes: 0

Sanjeev Kumar
Sanjeev Kumar

Reputation: 3163

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

Check the fiddle I have updated

Upvotes: 2

Related Questions