CODEWITHSUNDEEP
htmlcss
Bhawna
Bhawna

Reputation: 705

CSS :first-letter not working

Need to show first letter bigger than other letters.

Fiddle: https://jsfiddle.net/mc165upk/1/

But background should be shown with line height.

css: 

.main-heading p {
    padding: 0px 10px;
    display: inline;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    line-height: 91px;
    background: #faf98e;
    font-size:72px;
}
.t1-result-topheading p:first-letter { font-size: 108px; }

Upvotes: 1

Views: 2573

Answers (6)

Lloyd Dominic
Lloyd Dominic

Reputation: 808

  1. The "parent" element of this: .t1-result-topheading p:first-letter { ... } points to a non-existing element (as what is written on your code, on your fiddle). There is no such element as .t1-result-topheading, and therefore will not apply the CSS rule.

  2. Use display: inline-block as this will let the element have a width and a height.

    As what w3schools have said:

    inline-block elements are like inline elements but they can have a width and a height.

Therefore, your code should be:

.main-heading p {
    padding: 0px 10px;
    display: inline-block;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    line-height: 91px;
    background: #faf98e;
    font-size:72px;
}
.main-heading p::first-letter { font-size: 108px; }
<div class="main-heading">
<p>How much should you pay for a video campaign?</p>
</div>

Upvotes: 2

Sahil Dhir
Sahil Dhir

Reputation: 4250

The :first-letter as defined in the spec http://www.w3.org/TR/CSS2/selector.html#first-letter only applies to a block level element. So if you want to use ::first-letter selector you have to make the element display:inline-block;.

Also there was error in your css .t1-result-topheading p:first-letter { font-size: 108px; } was not available in your html code , so fixed that as well.

Working snippet:

.main-heading p {
  padding: 0px 10px;
  display: inline-block;;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  line-height: 91px;
  background: #faf98e;
  font-size: 72px;
}

.main-heading p::first-letter{ color:red;}
<div class="main-heading">
  <p>How much should you pay for a video campaign?</p>
</div>

EDIT

The Jquery solution if you want to use display:inline only.

$('p').html(function (i, html)
{
    return html.replace(/^[^a-zA-Z]*([a-zA-Z])/g, '<span class="First--letter">$1</span>');
});
.main-heading p {
  padding: 0px 10px;
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  line-height: 91px;
  background: #faf98e;
  font-size: 72px;
}

.First--letter{ color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-heading">
  <p>How much should you pay for a video campaign?</p>
</div>

Upvotes: 3

Bal mukund kumar
Bal mukund kumar

Reputation: 363

use this link for understanding the first-letter [https://www.w3schools.com/cssref/sel_firstletter.asp][1]

.t1-result-topheading p::first-letter { font-size: 108px; }

Upvotes: 0

Karin
Karin

Reputation: 8600

According to the docs, :first-letter will only work for block-level elements. Since you explicitly set your paragraph to be display: inline;, :first-letter will not work. You can fix it by setting display: block; or display: inline-block;.

There was another error in your fiddle in that .t1-result-topheading was not a parent class in the HTML for that paragraph, so the style wouldn't be applied anyway.

Edit: Since you want to maintain spaces between the lines, you can accomplish this by wrapping your text in a span (inline by default), applying the background color to the span, and using :first-letter on the paragraph (which will be block-level by default).

.main-heading span {
  padding: 0px 10px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  line-height: 91px;
  background: #faf98e;
  font-size: 72px;
}

p:first-letter {
  font-size: 108px;
}
<div class="main-heading">
  <p><span>How much should you pay for a video campaign?</span></p>
</div>

Upvotes: 2

Momin
Momin

Reputation: 3320

CSS ::first-letter Selector

p::first-letter {
   font-size: 200%;
   color: #8A2BE2;
}

Upvotes: 0

LKG
LKG

Reputation: 4192

Update css code below

.main-heading p {
  display: inline-block;
}

Upvotes: 1

Related Questions