Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Use the <a href="http://www.w3.org/TR/CSS2/selector.html#pattern-matching" rel="nofollow noreferrer">CSS child selector <code>&gt;</code></a>.</p> <blockquote> <blockquote> <p><strong>E > F</strong> - Matches any F element that is a child of an element E.</p> </blockquote> </blockquote> <p><kbd><a href="http://jsfiddle.net/mathijsflietstra/hdNDh/1/" rel="nofollow noreferrer"><strong>jsFiddle</strong></a></kbd></p> <pre><code>.div &gt; p:first-letter { font-size:40px; } </code></pre> <p><strong>Edit:</strong> It seems I misunderstood your question at first, if you need the first letter of the <code>div</code> only, simply set the pseudo-class on the <code>div</code> instead of on the <code>p</code>.</p> <p><kbd><a href="http://jsfiddle.net/mathijsflietstra/hdNDh/6/" rel="nofollow noreferrer"><strong>jsFiddle</strong></a></kbd></p> <pre><code>.div:first-letter { font-size:40px; } </code></pre> <p><strong>Edit2:</strong> As mentioned in the comments below, for this to work in FF you need:</p> <pre><code>.div &gt; p:first-child:first-letter { font-size:40px; } </code></pre> <p><kbd><a href="http://jsfiddle.net/hdNDh/8/" rel="nofollow noreferrer"><strong>jsFiddle</strong></a></kbd></p> <p>This seems strange/weird behaviour, so I have had a bit of a look around and it seems that Firefox is more particular about the <code>:first-letter</code> pseudo-class than other browsers. One example is that it doesn't <a href="https://stackoverflow.com/a/12753879">count <strong>special characters</strong> to be <strong>letters</strong></a>, and therefore won't apply styles to them. </p> <p>Results from testing a little bit just now: Firefox <strong>doesn't count</strong> the <em>first letter of the first child element</em> to be the same as <em>the first letter encountered within itself including child elements (even when there is no preceding text)</em>, whereas Chrome <strong>does count</strong> <em>the first letter of the first child element</em> to be the same as <em>the first letter encountered within itself including child elements (when there is no preceding text)</em>.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload