problemas con los pseudo-elemento :first-line y :first-letter

Hola!

Sobre ::first-letter (con doble dos puntos es el estándar), eso ocurre, según la norma CSS, porque el div no tiene caracteres. Si tuviera, entonces podrías aplicar estilos distintos al div y al p. Lo que hace ::first-letter es buscar la primera letra de un elemento, pero en vista de que div no tiene letras, entonces no hay contenido donde aplicar los estilos.

Lo mismo ocurre con ::first-line: se aplica al contenido directo del elemento, no de los hijos.

Ten en cuenta que para los estilos CSS, los elementos sí importan. Nosotros (las personas) entendemos a qué nos referimos, pero los computadores son estructurados, por ende, si la información no está escrita como este espera, entonces no la entiende.

aqui te pongo una captura de pantalla de internet explorer 11 y mira como lo aplica a esa primera linea del div es decir, al primer parrafo, pero lo curioso que en la hoja de estilos sale como tachado ese estilo

No es que librosweb esté equivocado, sino que IE es quién mal interpreta el contenido. Lo correcto es que sólo se apliquen los estilos al texto directo de la etiqueta|clase|id al cual se le aplicaron. Por esta razón, entre otras, es que siempre recomiendo hacer la vista previa en los navegadores más utilizados, no sólo en IE. Si el escritor de librosweb hubiese hecho las pruebas en otros navegadores, se hubiera dado cuenta que las reglas no funcionan en todos igual.

Si tomas en cuenta el estándar CSS, usando tu ejemplo, el div no tiene líneas, sino hijos. Una etiqueta no necesariamente contiene texto, por eso es que sólo se aplica al contenido directo y no a los hijos.

IE procesa más contenido que los demás navegadores, pues además de verificar que el elemento tenga texto directamente bajo él, debe verificar los hijos hasta encontrar la primera línea con texto (que podría ser después de N elementos).

En resumen, la regla es lo que dice:

first-letter: se aplica sólo al texto de la primera letra del elemento directo.
first-line: se aplica sólo a la primera línea de texto del elemento directo, no de los sub-elementos.

Recuerda que todos los elementos que soporten texto tienen un sub-nodo llamado text. Este nodo no es literal, o sea, uno no lo escribe como <p><text>Lorem....</text></p>, pero para el navegador sí existe.

Hola de nuevo muchas gracias por tu clara explicación perfecto ahora comprendo todo mucho mejor. Solo me han quedado dos dudas, si puedes aclarármelas.

Cuando comentaste esto:
En resumen, la regla es lo que dice:

first-letter: se aplica sólo al texto de la primera letra del elemento directo.
first-line: se aplica sólo a la primera línea de texto del elemento directo, no de los sub-elementos.

Se podría decir también con first-letter esto:
:first-letter se aplica sólo a la primera letra de la primera línea de texto del elemento directo, no de los sub-elementos.
¿Sería lo mismo verdad?

Y lo otro si puedes explicarme un poco esto que escribiste y que tiene que ver con el tema:

Recuerda que todos los elementos que soporten texto tienen un sub-nodo llamado text. Este nodo no es literal, o sea, uno no lo escribe como <p><text>Lorem....</text></p>, pero para el navegador sí existe.

En resumen, la regla es lo que dice:

first-letter: se aplica sólo al texto de la primera letra del elemento directo.
first-line: se aplica sólo a la primera línea de texto del elemento directo, no de los sub-elementos.

Se podría decir también con first-letter esto:
:first-letter se aplica sólo a la primera letra de la primera línea de texto del elemento directo, no de los sub-elementos.
¿Sería lo mismo verdad?

Eso mismo, pero aplicado a los nodos de texto, nada más :P (lee lo que sigue).

Y lo otro si puedes explicarme un poco esto que escribiste y que tiene que ver con el tema:

Recuerda que todos los elementos que soporten texto tienen un sub-nodo llamado text. Este nodo no es literal, o sea, uno no lo escribe como <p><text>Lorem....</text></p>, pero para el navegador sí existe.

¿Qué es un nodo?

En el contexto HTML (en otros contextos significa algo similar, pero representa otras cosas), y de los documentos en general, un nodo define la estructura del documento y los nombres de cada uno de los elementos y atributos. Para no complicarse, un nodo, en este caso, es simplemente cualquier elemento HTML, incluyendo los atributos (id, class, name, type, etc.) y las etiquetas de cierre/apertura de cada elemento.

Ahora, un nodo de texto es simplemente eso: un texto dentro de un elemento X (donde X puede ser un div, p u otro).

En el siguiente ejemplo, el texto es el nodo de texto:

<p class="test">Lorem ipsum dolor...</p>

También están los nodos p y el sub-nodo class. El uso más común, sin usar librerías, es a través de Javascript con createTextNode:

var element = document.createElement('div');
var text = document.createTextNode('Lorem ipsum...');
element.appendChild(text);

Que crearía una estructura así:

<div>
    Lorem ipsum...
</div>

Lo puedes añadir a cualquier otro elemento, no solo a uno creado a través de JS.

jQuery lo hace aún más evidente al proporcionar una función llamada text (asumiendo que el elemento tenga texto):

jQuery('#un-elemento').text;

Hay más formas de acceder a este "pseudo" elemento, como la consola del navegador (console.log(jQuery('#un-elemento'))).

Espero que me haya explicado bien :P

muchas gracias skaparate todo entendido :)