css selector: primera letra del primer párrafo dentro de un div

Question

<div> 
<p> 
    Once upon a time.. 
</p> 
<p> 
    A beautiful princess.. 
</p> 
</div> 

¿Cómo puedo seleccionar (en mi CSS) la primera letra del primer párrafo dentro de este div?

Gracias

Luca

Answer 1

div p:first-of-type:first-letter { font-weight: bold; } 

Answer 2

Puede utilizar el pseudo-elemento CSS :first-letter para aplicar estilo a la primera letra de un elemento en bloque.

Answer 3

Sí, en realidad es muy simple:

div p:first-letter 

Answer 4

CSS: first-letter Selector

div p:first-letter{ 
color:blue; 
} 

Working example HERE

Nota: Las siguientes propiedades se pueden utilizar con: primera letra

propiedades de fuente, propiedades de color, propiedades del fondo, propiedades de los márgenes, propiedades de relleno, propiedades de borde, text-decoration, vertical-align (sólo si flotador es 'none'), text-transform, line-height, flotador, clara

Answer 5

Bueno, yo añadiría al menos una clase de elemento que desea que el estilo de primera carta a aplicarse a. Estoy seguro de que puedes hacer una regla css para el primer párrafo del primer div; pero si tiene otro div con un párrafo al principio, entonces se aplicará a todos ellos. En otras palabras, sin utilizar una clase/ID en su selector, se aplicará a la primera letra del primer párrafo de CADA DIV (que podría no ser el comportamiento que está buscando). Por lo que recomiendo esto:

<div> 
<p class="FirstLetter"> 
    Once upon a time.. 
</p> 
<p> 
    A beautiful princess.. 
</p> 
</div> 

Y luego, en el CSS:

.FirstLetter:first-letter { 
    // styling rules here 
} 

Pero si mi intuición es incorrecta y que sepa con certeza que esto es lo que estás buscando, entonces @Demian La respuesta de Brecht debería estar bien.

Answer 6

En algunos casos puede que tenga un encabezado o algunos otros elementos de tipos antes de la <p> Por ejemplo:

<div>  
<h1>My Great Title</h1> 
<p> 
In my younger years I was a great man, but all that changed when I saw... 
</p> 
<p> 
I struck him for shaming my name, my family, my life. It was a shameful... 
</p> 
</div> 

lo tanto, en este caso, p:first-child no va a funcionar por alguna razón, al menos no en Chrome o Safari.

Así que en vez querrá utilizar esto:

div p:first-of-type:first-letter{ 
/* add your awesome code here */ 
} 

Gracias por su tiempo.

first-of-type

Answer 7

Puede dirigirse directamente a la primera letra de todo el div:

div:first-letter { 
    color: red; 
} 

demo: https://codepen.io/anon/pen/gRoypa