CSS3 구조적 의사 클래스 스태킹

StackOverflow https://stackoverflow.com/questions/1829174

  •  11-09-2019
  •  | 
  •  

문제

CSS3 의사 클래스와 셀렉터가 유용 할 수있는 다양한 시나리오를 연습하는 동안, 나는 내가 알아낼 수없는 것을 가로 질러 달렸다!

상황이 여기 있습니다. 나는 수정하고 싶다 :first-of-type::first-letter 텍스트 블록에 대한 첫 번째 비 인식 단락의. 의사 급이 쌓일 수 있는지 확신 할 수 없습니다. 여기에 내가 생각해 낸 것 (물론 작동하지 않습니다)

.article-body > p:not(:empty):first-of-type::first-letter { ... }

다음 마크 업이 주어지면 :

<div class="article-body">
    <p></p>
    <p>The "T" in this paragraph should be the one affected.</p>
</div>

내가 생각해 낼 수있는 유일한 추측은 의사 클래스 (예 : 아님과 : 최초 유형)를 서로 쌓을 수 없다는 것입니다. 유사 요소를 서로 쌓을 수 있기 때문에 이상합니다.

이것이 어떻게 달성 될 수 있는지에 대한 아이디어가 있습니까?

도움이 되었습니까?

해결책

:first-of-type 첫 번째를 선택합니다 p, 이름에서 알 수 있듯이 첫 번째 비어 있지 않은 것이 아닙니다. p 당신이 원하는대로.

그들은 잘 쌓아 왔지만 :first-of-type 순전히 작동합니다 꼬리표 (즉, 유형), 앞의 복합 선택기가 아닙니다. 그래서 당신은 결국 첫 번째를 찾고 있습니다 p, 그리고 첫 번째 단락도 비어 있지 않아야합니다. 그리고 그것은 존재하지 않습니다.

빈 단락이 텍스트 전체에 나타날 수 있다고 가정하면, 당신은 첫 번째, 비 인식 단락 만 영향을 받기를 원한다고 가정하면, 나는 하나의 선택기만으로는 이것을 할 수 없다고 생각합니다. 이것은 내가 생각해 낼 수있는 최선입니다.

p:first-of-type::first-letter,
p:empty + p::first-letter { text-transform: uppercase; /* ... */ }

p:not(:empty) ~ p::first-letter { text-transform: inherit; /* reset */ }

그것은 CSS를 첫 번째 비 인식 단락 (음, 첫 번째 빈 단락에만 적용하지만 어쨌든 아무것도하지 않을 것입니다).

다른 팁

빈 단락 원인을 제거합니다

.article-body > p:first-of-type::first-letter { ... }

제대로 행동합니다. 빈 단락이 있어야 할 이유가 있습니까? 비어있는 것이없는 것을 설명하기 위해 첫 번째 단락의 간격을 변경할 수 있습니까?

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top