css - CSS3は、「of-type」を使用せずに、いくつかのコンテナ要素内の最初の段落をターゲットにします

Question

「：nth-​​of-type」疑似セレクターを使用せずに、このコードの最初の段落の最初の文字のスタイルを設定するにはどうすればよいですか？

<div id="content-wrapper">
<div id="breadcrumbs">
<ul>
<li><a href="">Link</a></li>
</ul>
</div>
<article>
<section>
<h2>Page Name</h2>
<h3>Title</h3>
<p>Here, i'd like to style the first letter here</p>
</section>
</article>
</div>

Answer 1

古いバージョンのIEをサポートしようとしている場合は、最初の文字を<span>タグで囲み、そのようにスタイルを設定する必要があります。

<p><span class="letter">H</span>ere, i'd like to style the first letter here</p>

または、コンテンツが動的である場合は、jQueryを使用して最初の文字をでラップする<span>と、スタイルが適用されます。

text = $('p').html();
first = $('<span>'+text.charAt(0)+'</span>').addClass('letter');
$('p').html(text.substring(1)).prepend(first);

お役に立てれば。