CSS-селектор, включающий псевдокласс first-child и dropcap

Question

Мне нужно отформатировать HTML, как показано ниже. По сути, цитата необязательна , и мне нужно оставить первую букву абзаца с текстом.

<article>
 <p class="quote"> <!-- quote is optional -->
   Genius begins great works; labor alone finishes them.-- Joseph Joubert
 </p>
 <p> <!-- "L" is a dropcap -->
  Life is like a box of chocolates.
 </p>
 <p>...</p>
 <p>...</p>
</article> 

Мой CSS выглядит так:

article > p:first-child:first-letter
{
 float: left;
 font-family: Georgia, serif;
 font-size: 360%;
 line-height: 0.85em;
 margin-right: 0.05em;
}
p.quote {
 font-weight: bold;
}

Это не работает в настоящее время, когда цитата введена. AFAIK Я не могу выбрать первый дочерний элемент статьи P, который не является классом "quote". Я буду использовать jQuery, если не смогу понять это, но сейчас я ищу способ сделать это только с помощью CSS.

Заранее спасибо!

Answer 1

Если вы в порядке с использованием селекторов CSS3, попробуйте использовать эти (сгруппированные вместе):

/* Select the first child if it's not a .quote */
article > p:not(.quote):first-child:first-letter, 
/* Or, if the first child is a .quote, select the following one instead */
article > p.quote:first-child + p:first-letter
{
 float: left;
 font-family: Georgia, serif;
 font-size: 360%;
 line-height: 0.85em;
 margin-right: 0.05em;
}

См. Демонстрационную версию jsFiddle

В противном случае, я думаю, вам придется поиграть с некоторыми переопределениями, чтобы получить желаемый эффект.

Некоторое объяснение

Псевдокласс отрицания :not() всегда обрабатывается независимо всех других типов, идентификаторов, классов и псевдоклассов в составном селекторе. Это независимо от того, как вы расположите его с другими селекторами.

Другими словами: вы не можете использовать :not(), чтобы удалить или отфильтровать элементы, которые соответствуют тому, что находится в отрицании, из выбора, соответствующего остальной части простого селектора. Это также означает, что на набор элементов, соответствующих псевдоклассам :*-child() и :*-of-type(), :not().

не влияет.

Итак, первый селектор сверху,

article > p:not(.quote):first-child:first-letter

работает примерно так:

1. Найти каждый элемент p.

   • Если не найдено, игнорировать.
     
     

2. Если найдено, проверьте, является ли это p :first-child и , если это :not(.quote).

   • Если это не первый ребенок, игнорируйте.
   • Если он имеет класс quote, игнорировать.
     
     

3. Если он соответствует обоим псевдоклассам, проверьте, является ли этот p дочерним по отношению к article.

   • Если нет, игнорировать.
     
     

4. Если так, возьмите его :first-letter.

5. Применить правила.

Второй селектор, с другой стороны, относительно прост:

article > p.quote:first-child + p:first-letter

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

Answer 2

 p.dropCap:first-child:first-letter {
float: left;
color: #903;
font-size: 75px;
line-height: 60px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
font-family: Georgia;
}

Answer 3

Почему вы не используете <q> или <blockquote> для цитаты?тогда вы можете использовать

p:first-of-type:first-letter