Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
The :nth-child Pseudo-class in CSS
The CSS :nth-child() pseudo-class selects an element that is the nth child element of some other element. It matches elements that are the nth child of its parent.
Syntax
The following is the syntax for the :nth-child pseudo class −
:nth-child(){
/*declarations*/
}
Select the nth child in a form
Let?s see an example for the CSS :nth-child() Pseudo class. First, set a form using the <form> −
<form>
<fieldset>
<legend>CSS :nth-child() Pseudo Class</legend>
<div id="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div><br>
</fieldset>
</form>
Style the 1st child
Using the nth child selector, we are styling the 1st child n is 1 i.e. nth-child(1) −
.child:nth-child(1){
background-color: #FF8A00;
}
Style the 2nd child
Using the nth child selector, we are styling the 2nd child n is 2 i.e. nth-child(2):
.child:nth-child(2){
background-color: #F44336;
}
Style the 3rd child
Using the nth child selector, we are styling the 3rd child n is 3 i.e. nth-child(3) −
.child:nth-child(3){
background-color: #C303C3;
}
Style the 4th child
Using the nth child selector, we are styling the 4th child n is 4 i.e. nth-child(4) −
.child:nth-child(4){
background-color: #4CAF50;
}
Style the 5th child
Using the nth child selector, we are styling the 5th child n is 5 i.e. nth-child(5) −
.child:nth-child(5){
background-color: #03A9F4;
}
Style the 6th child
Using the nth child selector, we are styling the 6th child n is 6 i.e. nth-child(6) −
.child:nth-child(6){
background-color: #FEDC11;
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<title>CSS :nth-child() Pseudo Class</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
box-sizing: border-box;
}
input[type="button"] {
border-radius: 10px;
}
.child{
display: inline-block;
height: 40px;
width: 40px;
color: white;
border: 4px solid black;
}
.child:nth-child(1){
background-color: #FF8A00;
}
.child:nth-child(2){
background-color: #F44336;
}
.child:nth-child(3){
background-color: #C303C3;
}
.child:nth-child(4){
background-color: #4CAF50;
}
.child:nth-child(5){
background-color: #03A9F4;
}
.child:nth-child(6){
background-color: #FEDC11;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS :nth-child() Pseudo Class</legend>
<div id="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div><br>
</fieldset>
</form>
</body>
</html>
Select the nth child in an unordered list
Let?s see another example of the CSS nth-child() Pseudo class. First, set an unordered list using the <ul> −
<ul> <li>Eden Gardens, Kolkata, India</li> <li>Melbourne Cricket Ground, Melbourne, Australia</li> <li>DY Patil Sports Stadium, Navi Mumbai, India</li> </ul>
Style the 2nd child
Using the nth child selector, we are styling the 2nd child n is 2 i.e. nth-child(2) −
li:nth-child(2) {
background-color: blue;
font-family: "Brush Script Std", serif;
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
* {
font-size: 1.1em;
list-style: circle;
}
li:first-child {
background-color: seashell;
font-family: cursive;
}
li:nth-child(2) {
background-color: blue;
font-family: "Brush Script Std", serif;
}
li:last-child {
background-color: springgreen;
font-family: "Gigi", Arial;
}
</style>
</head>
<body>
<p>Famous Cricket Stadiums</p>
<ul>
<li>Eden Gardens, Kolkata, India</li>
<li>Melbourne Cricket Ground, Melbourne, Australia</li>
<li>DY Patil Sports Stadium, Navi Mumbai, India</li>
</ul>
</body>
</html>
180 Views
