1. Pseudo Elements :before and :after with CSS 2.1

    March 3, 2011 by J.P.

    Here is a quick example of how to use Pseudo elements “:before” and “:after” with css.
    li{
    display:block;
    }
    li:before{
    content:"This is red from :before";
    color:red;
    }
    li:after{
    content:"This is blue from after";
    color:blue;
    }

    Click here for the demo page

    Category: coding, css 2.1, css/html, css/xhtmlComments (0)

  2. Pseudo CSS first-child, last-child

    September 25, 2010 by J.P.

    In CSS 2.1 the “first-child” and CSS 3 adds “last-child” pseudo-class implementation. These allow for specific stlyes to be added to beginning and ending elements. This can be extremely helpful for navigation and other common list types. The one draw back of using these pseudo-classes is ie6 will not support them. Here is a short script that can been used in the head of a page to support ie6.

    $(document).ready(function() {
    $('li:first-child').addClass('first-child');
    $('li:last-child').addClass('last-child');
    });

    In CSS 3 “:nth-child(N)” was added. Here is a great read on SitePoint with examples of “:nth-child(N)”.

    Category: CSS 3, css 2.1, css/html, jqueryTags: | Comments (0)