Selectores de primera

facebook-svg gplus-svg twitter-svg

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.

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.

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.

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 {. . .

Enlaces útiles

- Un ejemplo práctico: "Eric Gill tipógrafo y escultor".