FAQ list with CSS :nth-child

On the Indiemondo website i’m bulding these days we needed a simple FAQ which could be edited from the Wordpress backend.

I considered  to make some kinda custom post type or by doing with custom fields on the page in order to style the A and the Q differently, but it all seemed a bit overkill for a simple list.

So in the end I ended up doing it by using CSS :nth-child. Knowing that the Q’s and A’s would just be a list this seemed like the obvious choice.

The HTML is a simple list

[code]

<h1>FAQ</h1>
<ul>
<li>Lorem Ipsum</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem Ipsum</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem Ipsum?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem Ipsum</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem Ipsum</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
</ul>

[/code]

Some basic styling on the <li> elements just to remove the bullets and positions them relative – which will make sense in a second.

[code]

ul li{
list-style:none;
position: relative;
}

[/code]

And the styling of the odd and even list items – the odd ones will be our Q’s and the even our A’s. For both Q’s and A’s I have added the :before pseudo element containing a ‘?’ or an ‘!’ with a bit of styling and pushing them of to the right with absolute positioning – which is why I gave the list items a position relative earlier.

[code]

ul li:nth-child(2n+1){
font-weight: bold;
margin-bottom: 5px;
}

ul li:nth-child(2n+1):before{
background-color: #e3e3e3;
border: 2px solid #ccc;
-moz-border-radius:3px;
border-radius:3px;
content:’?’;
display: block;
font-weight: bold;
font-size: 16px;
height: 16px;
line-height: 16px;
position: absolute;
left:-25px; top:-2px;
text-align: center;
width: 16px;
}

ul li:nth-child(2n+2){
margin-bottom: 13px;
}
ul li:nth-child(2n+2):before{
background-color: #e3e3e3;
border: 2px solid #ccc;
-moz-border-radius:3px;
border-radius:3px;
content:’!’;
display: block;
font-weight: bold;
font-size: 16px;
height: 16px;
line-height: 16px;
position: absolute;
left:-25px; top:0px;
text-align: center;
width: 16px;
}

[/code]

You could put in an image instead f the ‘?’ and ‘!’ if you wanna spice it up a bit.