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

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

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

спасибо

лука

11
css css-selectors html

7 ответов

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

в некоторых случаях у вас может быть заголовок или некоторые другие типы элементов перед <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 */
}

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

первый тип

6

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

1

Ну, я бы добавил по крайней мере класс к элементу, к которому вы хотите применить стиль первой буквы. Я уверен, что вы можете сделать правило 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 должен делать хорошо.

0

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

div p:first-letter
-1

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

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

рабочий пример здесь

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

свойства шрифта , цветовые характеристики, свойство background, маржа свойства, свойства padding , свойства границы, оформление текста, вертикальное выравнивание (только если float - "нет")), преобразование текста, высота строк, плыть, ясно!--2-->

-1

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

div:first-letter {
    color: red;
}

демо:https://codepen.io/anon/pen/gRoypa

-1