css selector: первая буква первого абзаца внутри div

Question

<div>
 <p>
  Once upon a time..
 </p>
 <p>
  A beautiful princess..
 </p>
</div>

Как выбрать (в моем css) первую букву первого абзаца внутри этого div ??

Спасибо

Luca

Answer 1

div p:first-of-type:first-letter { font-weight: bold; }

Answer 2

В некоторых случаях у вас может быть заголовок или некоторые другие типы элементов до <p> Например:

<div>    
<h1>My Great Title</h1>
<p>
In my younger years I was a great man, but all that changed when I saw...
</p>
<p>
I struck him for shaming my name, my family, my life. It was a shameful...
</p>
</div>

Так что в этом случае p:first-child по какой-то причине не будет работать, по крайней мере, не в Chrome или Safari.

Так что вместо этого вы захотите использовать это:

div p:first-of-type:first-letter{
/* add your awesome code here */
}

Спасибо, что уделили время.

первый в типа

Answer 3

Вы можете использовать псевдоэлемент CSS :first-letter, чтобы применить стиль к первой букве элемента уровня блока.

Answer 4

Вы можете напрямую указать первую букву всего div:

div:first-letter {
    color: red;
}

demo: https://codepen.io/anon/pen/gRoypa

Answer 5

Ну, я бы добавил хотя бы класс к элементу, к которому вы хотите применить стиль с первой буквой. Я уверен, что вы можете сделать правило CSS для первого абзаца первого div; но если у вас случится еще один div с параграфом в начале, то он будет применен ко всем из них. Другими словами, без использования class / id в вашем селекторе, он будет применен к первой букве первого абзаца EVERY DIV (что может не соответствовать вашему поведению). Поэтому я бы порекомендовал это:

<div>
 <p class="FirstLetter">
  Once upon a time..
 </p>
 <p>
  A beautiful princess..
 </p>
</div>

А потом в вашем css:

.FirstLetter:first-letter {
   // styling rules here
}

Но если моя интуиция неверна, и вы точно знаете, что это то, что вы ищете, тогда ответ @Demian Brecht должен подойти.

Answer 6

CSS: селектор по первой букве

div p:first-letter{
 color:blue;   
}

Рабочий пример ЗДЕСЬ

Примечание: Следующие свойства могут использоваться с: первая буква

свойства шрифта, свойства цвета, свойства фона, свойства поля, свойства отступа, свойства границы, оформление текста, выравнивание по вертикали (только если float равен 'none'), преобразование текста, высота строки, плавать, очистить

Answer 7

Да, это действительно очень просто:

div p:first-letter