Укладка структурных псевдоклассов CSS3
-
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>
Единственное предположение, которое я могу придумать, это то, что псевдоклассы (т.е.;:not() и :first-of-type) не могут быть наложены друг на друга.Что странно, поскольку вы можете накладывать псевдоэлементы друг на друга и другие псевдоклассы...
Есть какие-нибудь идеи о том, как этого можно достичь?
Решение
: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 { ... }
вести себя должным образом.Есть ли какая-то причина, по которой пустой абзац должен быть там?Можете ли вы изменить интервал между первым абзацем, чтобы учесть отсутствие пустого абзаца?