Css селектор: первая абзац первая буква внутри div

Ответ 1

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

Ответ 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 */
}

Спасибо за ваше время.

first-of-type

Ответ 3

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

Ответ 4

Ну, я бы добавил, по крайней мере, класс к элементу, который вы хотите применить к стилю с первым письмом. Я уверен, что вы можете сделать правило css для первого абзаца первого div; но если у вас будет другой div с абзацем в начале, тогда он будет применяться ко всем из них. Другими словами, без использования класса /id в вашем селекторе, он будет применен к первой букве первого абзаца КАЖДЫЙ 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 должен преуспеть.

Ответ 5

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

div p:first-letter

Ответ 6

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

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

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

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

свойства шрифта, цветовые свойства, фоновые свойства, свойства поля, дополнительные свойства, свойства границы, текст-отделка, vertical-align (только если float равен "none" ), текст-преобразования, высота линии, плавать, ясно

Ответ 7

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

div:first-letter {
    color: red;
}

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