Вопрос

Отрабатывая различные сценарии, в которых псевдоклассы и селекторы 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 { ... }

вести себя должным образом.Есть ли какая-то причина, по которой пустой абзац должен быть там?Можете ли вы изменить интервал между первым абзацем, чтобы учесть отсутствие пустого абзаца?

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top