CSS 선택기 : div 내 첫 번째 단락의 첫 글자

Question

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

어떻게이 div의 첫 번째 단락의 첫 글자를 선택할 수 있습니까 ??

감사

루카

Answer 1

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

Answer 2

당신은 블록 레벨 요소의 첫 번째 문자에 스타일을 적용 할 CSS :first-letter 의사 요소를 사용할 수 있습니다.

Answer 3

예, 실제로 정말 간단합니다

div p:first-letter 

Answer 4

CSS : 첫번째 문자 선택기

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

Working example HERE

참고 : 다음과 같은 속성을 사용할 수 있습니다 : 첫 번째 글자

,

폰트 특성 색 특성 배경 속성 마진 특성 패딩 특성 테두리 속성 문자 장식, 수직 정렬 (플로트 '없음'없는 경우에만), , 텍스트 변환 라인 높이, 플로트, 명확

Answer 5

글쎄, 나는 첫 번째 문자 스타일을 적용 할 할 요소에 적어도 클래스를 추가합니다. 첫 번째 div의 첫 번째 단락에 대해 CSS 규칙을 수행 할 수 있다고 확신합니다. 하지만 처음에 단락이있는 다른 div를 사용하면 모든 항목에 적용될 것입니다. 즉, 선택기에서 class/id를 사용하지 않고 EVERY DIV의 첫 번째 단락의 첫 글자에 적용됩니다 (원하는 동작이 아닐 수 있음). 그래서 나는 이것을 추천 할 것입니다 : 당신의 CSS에서

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

그리고 다음을 :

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

하지만 내 직감이 잘못하고 당신이 당신이 다음 찾고있는 것을 확실히 알고있는 경우 @Demian 브레히트의 대답은 잘해야합니다.

이

<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 크롬 또는 적어도하지, 어떤 이유로 작동하지 않습니다 : 당신은 머리글 또는 예를 들어 <p> 전에 몇 가지 다른 요소 유형이있을 수 있습니다 어떤 경우에는

Answer 6

원정 여행.

그래서 그 대신 당신은이를 사용할 수 있습니다 :

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

이 시간 내 주셔서 감사합니다.

first-of-type

Answer 7

직접 전체 사업부의 첫 글자를 타겟팅 할 수 있습니다 :

div:first-letter { 
    color: red; 
} 

데모 : 이것에 대한 https://codepen.io/anon/pen/gRoypa