CSS nth pseudoclasses - Part 3
Notes:
CSS - Pseudo Class Selectors (nth) - Part 3:
selector :nth-child(an+b)
{
declaration list;
}
It selects any html element targeted by the selector, if it is the (an+b)th child element in its parent html element
n : 0,1,2,3,………..
a : integer (default is 1)
b : integer (default is 0)
Ex:
p : nth-child(n) is same as p:nth-child(1n+0)
{
border : 2px dotted blue;
}
It selects any p element, if it is the nth child in its parent html element
(1n+0) : 1 * 0 + 0 == 0
(1n+0) : 1 * 1 + 0 == 1
(1n+0) : 1 * 2 + 0 == 2
(1n+0) : 1 * 3 + 0 == 3
Ex:
p : nth-child(2n) is same as p:nth-child(2n+0) is same as p:nth-child(even)
{
border : 2px dotted blue;
}
It selects any p element, if it is the 2nth child in its parent html element,
(2n+0) : 2 * 1 + 0 == 2
(2n+0) : 2 * 2 + 0 == 4
(2n+0) : 2 * 3 + 0 == 6
Ex:
p : nth-child(2n+1) is same as p:nth-child(2n+1) is same as p:nth-child(odd)
{
border : 2px dotted blue;
}
It selects any p element, if it is the (2n + 1)th child in its parent html element,
(2n+1) : 2 * 0 + 1 == 1
(2n+1) : 2 * 1 + 1 == 3
(2n+1) : 2 * 2 + 1 == 5
(2n+1) : 2 * 3 + 1 == 7
Interview Questions:
