If..Else Log

A little introduction

Whilst on the whole, the fundementals of CSS are fairly straightforward to understand, it's helpful to sometime explore some of the more esoteric uses. This time, let's have a look at using CSS adjacent sibling selectors and a little used CSS pseudo-element to create drop caps.

First, as a picture says more than a thousand word, let's have a look at what we're aiming for.

Adjacent Sibling Selectors

What are Adjacent Sibling Selectors or as I'll call them by the wonderful acronym, ASS (feel free to get your sniggering out of the way). ASS are a way for us to access adjacent elements so that we can selectively style them.

<h3>Title</h3>
<p>A paragraph about some stuff</p>
<p>Some more stuff to talk about</p>

Now using ASS, we can style the first paragraph without affecting the second. How do we do this? Let's take a look at the syntax.

h3 + p{
	color:red;
}

Fairly self explanatory stuff. The first element is h3, the second is p and + is the adjacent operator.

Pseudo-elements

Now that we can select the first paragraph, how do we style the first character? Quite easily actually. Using the first-letter psuedo elements. What is a pseudo-element? Well, one that is in common use and that most people are familiar with is the :hover pseudo-element.

a:hover{
	color:red;
}

Pseudo-elements (henceforth known as PE) are a way to access and style characteristics based on information that lie outside the document tree. There's no actual hover element but we're able to assess it via this PE. Likewise, to access the first character, we can use the :first-letter PE.

Putting all these together

With everything we need in place, lets gather them together to style our drop caps. What we'll do is highlight the first letter of the first paragraph following the title by increasing the font-size, and changing the colour slightly. To make sure we're only styling the content block, we'll make sure that only descendents of the .entrybody class is styled.

.entrybody h3 + p:first-letter
{
	font-size:30px;
	color:#aaa;
}

Final words

As with all techniques, there's a time and a place to use them. This post was written more as a means of introducing ASS and PE rather than as the recommended way of implementing drop caps.

-30-