In the two examples below, we'll show how to add a drop cap on the first paragraph of an article. In the first example the first paragraph is directly below the title. The second example is slightly more complex as there is a summary div
element, that also includes a p
element. We don't want this selected as it isn't part of the article proper. To do this we can use the selector div.article > p:first-of-type::first-letter
. This selects the first p
element that is a direct desendent of the article div
.
Article with no elements after the title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus in odio sit amet metus elementum rhoncus. Praesent eget orci. Donec adipiscing, lectus vitae luctus gravida, nunc nulla accumsan purus, eget iaculis ante urna sit amet urna. Vivamus interdum convallis risus. Aliquam nibh massa, cursus id, accumsan eu, ornare in, ante. Nulla ut orci. Sed malesuada dui eu metus. Nulla facilisi. Mauris velit tellus, facilisis a, sagittis ac, vestibulum ac, enim. Nam a dui ac quam aliquam facilisis. Nulla ipsum. Quisque mauris. Duis scelerisque augue vel nulla. Etiam adipiscing tellus sed massa. Curabitur nec tellus. Sed vestibulum blandit nibh.
Quisque suscipit, tellus at auctor dapibus, nisi felis gravida sapien, id gravida justo lacus vitae augue. Sed pede tortor, semper eu, facilisis porttitor, suscipit in, nibh. Nam nec justo ac felis viverra rutrum. Morbi convallis, purus pharetra hendrerit rhoncus, diam metus vulputate diam, vel pellentesque magna lacus ut augue. Suspendisse sit amet magna. Quisque imperdiet, sem et pellentesque vulputate, nunc nunc pellentesque diam, nec volutpat felis libero vel tellus. Etiam ut magna a est ullamcorper semper. Proin luctus. Aliquam scelerisque mi id nibh. Morbi non risus eu mauris tristique consequat. Donec porta fermentum augue. Donec euismod malesuada dolor. Phasellus non leo. Nulla ac dolor. Integer blandit ultricies arcu.
Article with a summary after the title
This is a summary before the main article. It includes a p
element, but it shouldn't have a drop cap, as it isn't a direct desendent of the article div
element. The p
below should have a drop cap as it is the first direct desendent. The latest WebKit (at the time of writing) seems to have a bug with this.
Fusce vulputate tincidunt mauris. Nulla aliquet. Morbi pede massa, dapibus at, varius tristique, porta id, lacus. Phasellus eget leo. Proin dictum turpis. Donec diam elit, adipiscing ut, egestas non, consectetuer condimentum, quam. Nulla aliquam tempor tellus. Duis nec lacus. Maecenas id nisl. Praesent mattis elementum sem. Donec sed libero. Praesent vitae ipsum. Mauris a elit. Ut ut ligula. Sed tortor orci, molestie sit amet, tempor at, molestie a, dolor. Etiam vel ante.
Nunc posuere purus sit amet turpis. Morbi cursus commodo mi. Praesent vestibulum consectetuer elit. Vestibulum a elit. Nulla et ligula non neque gravida placerat. Nullam euismod, erat et dictum consequat, mauris felis eleifend nulla, eu rhoncus lacus lorem quis mi. Morbi sed eros. Aliquam eros turpis, rhoncus ut, pretium sed, ornare in, libero. Pellentesque vitae pede. Ut quis felis id sapien venenatis tempor. Cras a diam. Maecenas cursus fermentum est. Proin congue pharetra risus. Cras tincidunt justo. Mauris vel sem sagittis sapien porta gravida. Vivamus eu nisl. Donec dictum ante nec pede. Phasellus diam sem, euismod sed, dictum in, egestas non, nibh. Duis auctor elementum arcu. Praesent purus.