Using Nth Child Selector in CSS And Jquery

CSS3 provides “Nth Child” selector for element selection.

In this Demo, “We will see the use of Nth selector in CSS3 and Jquery“.

JavaScript/Jquery Array Index starts from ZERO(0), But CSS3 indexing starts from ONE(1). This cause the problem of selecting an element.For example, when you select 1st element in Jquery it will select the 2nd element while in CSS3 it will select the 1st element.

The HTML markup used for this demo is as below,

<ol>
    <li>sandeep</li>
    <li>sandeep</li>
    <li>sandeep</li>
    <li>sandeep</li>
    <li>sandeep</li>
    <li>sandeep</li>
    <li>sandeep</li>
    <li>sandeep</li>
    <li>sandeep</li>
    <li>sandeep</li>
</ol>

In CSS3 we can select the 2nd element by passing 1 as parameter.

$("ol li:eq(1)").css("backgroundColor", "#ff0");

In CSS we can select the 4th element as below,

ol li:nth-child(4) {
    color:blue;
}

In CSS3 we can select the 2nd element from the rear/last end.

ol li:nth-last-child(2) {
    color:orange;
}

In CSS we can select even and odd elements

ol li:nth-child(even) {
   font-style:italic;
   font-size:20px;
}
ol li:nth-child(odd) {
   font-style:normal;
   font-size:10px;
}

In CSS we can pass expression to select elements like (1,4,7…),

ol li:nth-child(3n+1) {
  background:pink;
}

The fiddle demonstration output is as below(http://jsfiddle.net/techblogger/w8YgL/1/),

Nov 20, 2013Sandeep

Related

Sandeep

A passionate Blogger and Developer.Love to code for web application using JavaScript.At present I am exploring the Web Component Specification.

11 years ago css, jquery765