Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-11-30T17:28:35.207Z
Answers.LastActivityDate: 2015-11-30T17:28:35.207Z
Answers.UserDisplayName: carlcs
Answers.Body: <p>Thanks to Lindsey D, using a Rich Text field results in issues with :first-letter. Use a plaintext field instead. </p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-11-30T17:12:10.887Z
Answers.LastActivityDate: 2015-11-30T17:12:10.887Z
Answers.UserDisplayName: cbad
Body: <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>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-11-30T05:38:28.777Z
Comments.Text: What kind of field is `body`? If it's a rich text field, then your first character is likely a `<`, not a letter.
Comments.UserDisplayName: Lindsey D
Tags: <entries><css>
Title: craft.entries and :first-letter
ThreadText: # 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
  <p class='dropcap'>{{ entry.body }}</p>
  
  ```
  
  The first letter isn't dropped, but if I change the html to:
  
  ```
  <p class='drop cap'>This is {{ entry.body }}</p>
  
  ```
  
  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 `<p>` tags. So you would have to use an additional `<div>` element and apply the dropcap styles to the first `<p>` tag within that `<div>` using the [`first-of-type`](https://developer.mozilla.org/en/docs/Web/CSS/%3Afirst-of-type) pseudo-class.
  
  ```
  <div class='dropcap'>
      {{ entry.body }}
  </div>
  
  ```
  
  ```
  .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 username_1, using a Rich Text field results in issues with :first-letter. Use a plaintext field instead.
  
  
  ---
  
  