w3.unpo<code>todo

w3.unpocodetodo.info

La primera letra (::first-letter)

El selector ::first-letter es un pseudo-elemento, o sea actúa como si un nuevo elemento fuera insertado en el documento. En el caso de ::first-letter es como si la primera letra apareciera dentro de un elemento span.

<span class="primera-letra">P</span>rimera letra. . .

Esto nos permite darle un  formato especial, por ejemplo transformando la primera en letra capitular

Solo unas cuantas propiedades pueden ser utilizadas para dar estilo a la primera letra: font-, background-, margin-, padding-, border-, color y text.

#primeraLetra p:first-child::first-letter {
  color: darkorange;
  font-weight: bold;
  font-size: 5em;
  float: left;
  line-height: 50%;
  margin: 0 .1em .1em 0;
}

Arthur Eric Rowton Gill conocido como Eric Gill fue un tipógrafo y escultor inglés, conocido por su aportación en el campo de la tipografía, donde creó su famosa familia de tipos Gill Sans.

¡OJO! El selector ::first-letter funciona solo si el elemento padre es un elemento block ( display: block | inline-block | table-caption | table-cell ). En otras palabras no funciona si el elemento es un elemento inline.
También hay que decir que el selector ::first-letter tiene un comportamiento imprevisible si la primera letra va acompañada de glifos.

See the Pen mCqHb by Matt Andrews (@matthew-andrews) on CodePen.

Un comentario más: Los dos puntos dobles de ::first-letter fueron introducidos en el CSS3 como un intento de hacer una distinción entre las :pseudo-clases y los ::pseudo-elementos. Por suerte no pasa nada si no ponemos los dos puntos dobles delante de los pseudo-elementos ( ::first-letter), ya que la mayoría de los navegadores entienden el formato antiguo introducido en el CSS2 ( :first-letter). Es más: IE8 parece no entender los dos puntos dobles ( ::first-letter), pero sí entiende los dos puntos ( :first-letter).

La primera línea (::first-line)

El selector ::first-line es otro pseudo-elemento utilizado para dar formato a la primera línea de texto. Exactamente como en el caso de ::first-letter, funciona solo si el elemento padre es un elemento block ( display: block | inline-block | table-caption | table-cell ).

Las propiedades que podemos utilizar para dar estilo a la primera línea de texto son, como es normal, propiedades relacionadas con las fuentes ( color, estilo, tamaño, espaciado, sombras . . . etc ) y  propiedades relacionadas con el background.

¡OJO! las propiedades text-transform, margin-left o text-indent no hacen absolutamente nada ya que el CSS las ignora. Veamos un ejemplo.

#primeraLinea p:first-child::first-line {
  font-variant: small-caps;
  font-size: 120%;
  line-height: 120%;
}

Arthur Eric Rowton Gill conocido como Eric Gill fue un tipógrafo y escultor inglés, conocido por su aportación en el campo de la tipografía, donde creó su famosa familia de tipos Gill Sans.
Gill empezó a estudiar en la escuela de Arte de Chichester a la edad de 17 años, luego continuó sus estudios en la Central School of Arts and Crafts en Londres, donde fue alumno del tipógrafo y calígrafo Edward Johnston. Gill solía hacer trabajos arquitectónicos y de escultura además de crear portadas para diversos libros con base al grabado en madera.

Pruebe redimensionar el div del ejemplo.

El primer hijo ( :first-child )

El selector :first-child es una pseudo-clase que señala cualquier elemento que es el primer hijo de su padre. ¡OJO!: siendo una pseudo-clase y no un pseudo-elemento no utilizamos los dos puntos dobles. En el ejemplo anterior hemos dado formato a la primera línea (::first-line) del primer párrafo (:first-child), ya que no queremos que todos los párrafos tengan la primera línea en small-caps.

p:first-child::first-line {. . .

El primero de su tipo (:first-of-type)

Imaginemos que en el ejemplo anterior, delante del primer párrafo hubiera una pequeña imagen u otro elemento cualquiera. En este caso este otro elemento sería "el primer hijo" ( :first-child ) y no el párrafo que queremos modificar. En este caso para apuntar al primer párrafo tenemos que utilizar el selector :first-of-type.

p:first-of-type::first-line {. . .