Selector de CSS que incluye pseudo clase first-child y dropcap

Necesito formatear HTML similar a la siguiente. Básicamente, una cita es opcional , y necesito dejar caer la primera letra del párrafo del cuerpo.

Genius begins great works; labor alone finishes them.-- Joseph Joubert

Life is like a box of chocolates.

...

...

Mi CSS se ve así:

 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; } 

No funciona actualmente cuando se introduce la cita. AFAIK No puedo seleccionar el primer hijo P del artículo que no es clase “quote”. Usaré jQuery si no puedo resolver esto, pero por ahora estoy buscando una forma de hacerlo CSS solamente.

¡Gracias por adelantado!

Si está bien con el uso de selectores de CSS3, intente utilizarlos (agrupados):

 /* 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; } 

Vea la demostración de jsFiddle

De lo contrario, creo que tendrás que jugar con algunas anulaciones para obtener el efecto deseado.

Alguna explicación

La pseudoclase de negación :not() siempre se procesa independientemente de todos los demás tipos, ID, clases y pseudoclases en el selector compuesto. Esto es independientemente de cómo lo organices con tus otros selectores.

Para decirlo de otra manera: no puede usar :not() para eliminar, o filtrar, los elementos que coinciden con lo que está en la negación, de una selección que coincida con el rest del selector simple. También significa que el conjunto de los elementos que coinciden con las pseudo-clases :*-child() y :*-of-type() no se ve afectado por :not() .

Entonces, el primer selector de arriba,

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

funciona más o menos así:

  1. Encuentra cada elemento p

    • Si no se encuentra, ignore.
  2. Si se encuentra, compruebe si este p es el :first-child y si es :not(.quote) .

    • Si no es el primer hijo, ignóralo.
    • Si tiene la clase de quote , ignora.
  3. Si coincide con ambas pseudo-clases, verifique si este p es un elemento secundario del article .

    • Si no, ignora.
  4. Si es así, toma su :first-letter .

  5. Aplicar reglas

El segundo selector, por otro lado, es relativamente sencillo:

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

Todo lo que hace es tomar la p que viene justo después del primer hijo del article si es una p.quote , y aplicar reglas a su :first-letter .

¿Por qué no usas o

para la cita? entonces puedes usar

 p:first-of-type:first-letter 
  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; }