Explore 100's Of Free Video Tutorials

Keep Learning, Keep Coding & Keep Sharing

CSS

CSS nth pseudoclasses - Part 1

Notes:

CSS - nth-pseudo classes (selectors) - Part 1:
Note: n can be a number, a keyword or a mathematical formula

selector : nth-pseudo-class-name(n)
{
declaration list;
}

1.
selector : nth-child(n)
{
declaration list;
}
It selects any html element targeted by the selector, if it is the nth child of its parent html element

Ex:
p:nth-child(2)
{
border : 2px solid red;
}
It selects any p element, if it is the 2nd child of its parent html element

2.
selector : nth-last-child(n)
{
declaration list;
}
It selects any html element targeted by the selector, if it is the nth last child of its parent html element

Ex:
p:nth-last-child(2)
{
border : 2px solid red;
}
It selects any p element, if it is the 2nd last child of its parent html element.

Interview Questions: