<p>Rich Text fields always return the paragraphs wrapped in <code>&lt;p&gt;</code> tags. So you would have to use an additional <code>&lt;div&gt;</code> element and apply the dropcap styles to the first <code>&lt;p&gt;</code> tag within that <code>&lt;div&gt;</code> using the <a href="https://developer.mozilla.org/en/docs/Web/CSS/%3Afirst-of-type" rel="nofollow"><code>first-of-type</code></a> pseudo-class.</p>

<pre><code>&lt;div class='dropcap'&gt;
    {{ entry.body }}
&lt;/div&gt;
</code></pre>



<pre><code>.dropcap p:first-of-type:first-letter {
  float: left;
  font-size: 4em;
  line-height: 3em;
}
</code></pre>

CC BY-SA 3.0
2015-11-30T17:28:35.207Z
2015-11-30T17:28:35.207Z
carlcs
<p>Thanks to Lindsey D, using a Rich Text field results in issues with :first-letter. Use a plaintext field instead. </p>

CC BY-SA 3.0
2015-11-30T17:12:10.887Z
2015-11-30T17:12:10.887Z
cbad
<p>I want to display the first character in a paragraph with a drop cap. It works fine with normal text or setting it with js, but when I use an entry field it doesn't pull out the first character. The code looks like this:</p>

<pre><code>// css
p.dropcap { 
float: left; 
font-size: 4em;
… 
}

// html
&lt;p class='dropcap'&gt;{{ entry.body }}&lt;/p&gt;
</code></pre>

<p>The first letter isn't dropped, but if I change the html to:</p>

<pre><code>&lt;p class='drop cap'&gt;This is {{ entry.body }}&lt;/p&gt;
</code></pre>

<p>The T is dropped as expected.</p>

<p>Any ideas on how to fix this?</p>

CC BY-SA 3.0
2015-11-30T05:38:28.777Z
What kind of field is `body`? If it's a rich text field, then your first character is likely a `<`, not a letter.
Lindsey D
<entries><css>
craft.entries and :first-letter
# craft.entries and :first-letter

(Asked by: username_0 on 2015-11-30)

I want to display the first character in a paragraph with a drop cap. It works fine with normal text or setting it with js, but when I use an entry field it doesn't pull out the first character. The code looks like this:
// css
p.dropcap { 
float: left; 
font-size: 4em;
… 
}

// html
{{ entry.body }}

The first letter isn't dropped, but if I change the html to:
This is {{ entry.body }}

The T is dropped as expected.
Any ideas on how to fix this?

**Tags:** entries, css
> **Comments:**
> **username_1**: What kind of field is `body`? If it's a rich text field, then your first character is likely a `<`, not a letter.  

---

## 2 answers

### Answer by username_2 on 2015-11-30. Score: 1

Rich Text fields always return the paragraphs wrapped in  tags. So you would have to use an additional  element and apply the dropcap styles to the first  tag within that  using the first-of-type pseudo-class.

    {{ entry.body }}


.dropcap p:first-of-type:first-letter {
  float: left;
  font-size: 4em;
  line-height: 3em;
}


---

### Answer by username_0 on 2015-11-30. Score: 0

Thanks to Lindsey D, using a Rich Text field results in issues with :first-letter. Use a plaintext field instead.


---

