Syntax* 

Welcome to Pull Digital's technology blog Syntax*.

Saving time with :first-child

There are always css issues which pop up when building a web site.  Some seem to occur time and time again. Giving a basic example, your designer has just sent you the artwork for a smashing new site, and you start to build the navigation.
 
The side nav looks like this :
 
 Screen-shot-2012-03-23-at-09-54-44.png

So you’re going to style the list items to have grey text and a dotted border at the top.  That’s all fine and dandy, but you don’t want a dotted border on the first item. Usually you would add another css class to the first item, which has a border-bottom of 0.
 
<ul>
            <li class="
no-border-please">
                 <a href="#">
2012</a>
           
</li>
            <li>

                 <a href="#">
2012</a>
            </li>
            <li>

                 < a href="#">
2012</a>
            </li>
</ul>

 
If you are using a CMS which doesn’t let you access the list items to apply individual classes, then you have issues. This is where CSS pseudo selectors come in to play.  You might have heard of the :nth-child selector?  Well this could be used to target and take off the border.  The problem here is that IE8 and below do not support it. They don't support the :last-child selector either.  But strangely enough, they do support :first-child. So, to cut a long story short, see the below CSS we have written to style the list items.
 
#nav ul li {color: #ededed; border-top: 1px dotted #000000}
#nav ul li:first-child {
border: none}
 
Using :first-child, this tells the browser to find the first list item, then take off it’s border.  It’s that simple.  And the fact that this property is supported in pretty much all browsers means you can use it safely, and cut down on needless markup.
 
Do you ever build sites where the home link is an icon instead of text like the below?
 
Screen-shot-2012-03-23-at-10-36-02.png
 
You solved it by adding a class to the first list item didn’t you? That’s fair enough, but you can do it all without adding any classes to the <li>’s
 
#nav ul li a {style the links however you like}
 
#nav ul li:first-child a {
      
background: url("../images/house.png") no-repeat left top; text-indent:-99999px
}
 
That’s pretty easy right?  This is finding the first list item, then styling its anchor tag to display the home image. Maybe you want to style the first paragraph on a page to be big, blue and in some trendy typeface?
 
#page p:first-child {color: blue; font-size: 30px; font: Trendy typeface}
 
There you are, it’s done!  But beware of one pitfall with using the :first-child selector.   Observe the following code:
 
<div id=”page”>
            <h1>
Welcome to our site</h1>
            <p>
Big, trendy intro paragraph<p>
            <p>
Standard paragraph…</p>
</div>

 
If you were to use the :first-child selector to style the first paragraph in the above html IT WON’T WORK!  And this is strange, because you would assume #page p:first-child would search through the page, find the first paragraph within the parent div and give it the styling we want.  But it doesn’t, because what the CSS actually does is find the first direct child of the parent div, which in this case is our <h1> tag.  But because we have told the css to style the <p> tag as our first child, it breaks and doesn’t do anything.  This is one big pitfall to be aware of.  If you want to style anything using :first-child, you must make sure that the element you are targeting is a direct child of the parent
 
 
This won’t work, as the <h1> is the first child of the parent
<div>
            <h1>
Heading</h1>
            <p>
Text</p>
            <p>
Text</p>
            <p>
Text</p>
</div>

 
This WILL WORK, because the <p> tag is a direct child of the parent
 
<h1>Heading</h1>
<div>
           <p>
Text</p>
           <p>
Text</p>
           <p>
Text</p>
</div>

 
 
Hopefully this makes sense :)  It is a strange little quirk, but apart from that I highly recommend using :first-child. It will save you time in the long run, and will make your html markup that little bit cleaner.

Some Of Our Clients

  • First-Central
  • Boux-Avenue
  • Conversis
  • John-Lewis
  • EY
  • Kompan
  • Living-Streets
  • Meteor
  • OSI
  • Schwarzkopf
  • GoCycle
  • SSTL
  • Chaucer-Direct
  • TurtleMat
  • UK200Group
  • ASDA
  • Vinci
  • Zoggs

We Deliver Marketing CertaintyTM

Find Out More