Virginia Web Designers: Joomla, Drupal, Open-Source, CSS, and PHP Northern Virginia / Maryland / Washington DC web designers

Css’s first-child pseudo-selector

Have you ever seen news articles that display the first letter in a very large font size? On web sites this is most often achieved using a graphic. That means keeping a library of graphics for all the letters in the alphabet, which I think makes editing a little cumbersome. Luckily, CSS3 offers us the ‘first-child’ pseudo-selector.

Example;

Lorem ipsum ei cetero legendos appellantur per, indoctum iudicabit ei duo, in per ignota persius perfecto. Duo ne alii summo consequuntur, vitae suscipit gloriatur cum ei, augue atomorum vulputate ea eum. Usu eu erant mediocrem, posse bonorum voluptatum et pro. Sea iisque gubergren rationibus cu, ne mea takimata mandamus laboramus. Duo utroque sententiae interesset te, luptatum scripserit suscipiantur et pri. Dicta verear appetere vim ne, nam eu alii ridens, aeque legendos ne mei.

HTML:

<p class=”firstparagraph”>Lorem ipsum ei cetero legendos appellantur per, indoctum iudicabit ei duo, in per ignota persius perfecto. Duo ne alii summo consequuntur, vitae suscipit gloriatur cum ei, augue atomorum vulputate ea eum. Usu eu erant mediocrem, posse bonorum voluptatum et pro. Sea iisque gubergren rationibus cu, ne mea takimata mandamus laboramus. Duo utroque sententiae interesset te, luptatum scripserit suscipiantur et pri. Dicta verear appetere vim ne, nam eu alii ridens, aeque legendos ne mei.</p>

CSS:

p.firstparagraph:first-letter{

}


Reference