Блог

Главная - Вопросы по программированию - селектор css: первая буква первого абзаца внутри div

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

#css #html #css-selectors

#css #HTML #css-селекторы

Вопрос:

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

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

Спасибо

Luca

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

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

первый в своем роде

Комментарии:

1. Спасибо за это. : первый по типу определенно лучше в подобной ситуации.

Ответ №3:

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

Ответ №4:

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

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

Ответ №7:

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

 div:first-letter {
    color: red;
}

демонстрация: https://codepen.io/anon/pen/gRoypa