it make the same color to all the element in li and i just want the first element to be color:rgb(255, 88, 158);
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav>
<a href="#"><img src="img/logo.png"></a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Work process</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Pricing Tables</a></li>
<li><a href="#">Blog Entieres</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</body>
</html>
body{
background-color:rgb(194, 72, 224);
}
nav{
height:100px;
width:80%;
background-color:white;
position:relative;
border-radius: 50px;
margin:auto;
}
nav ul{
list-style: none;
position:absolute;
left:20%;
top:20px;
}
nav ul li {
float:left;
}
nav ul li a{
text-decoration:none;
margin-left:15px;
}
li a:first-of-type {
color:rgb(255, 88, 158);
}
a img{
position:absolute;
top:30px;
left:20px;
}
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav>
<a href="#"><img src="img/logo.png"></a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Work process</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Pricing Tables</a></li>
<li><a href="#">Blog Entieres</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</body>
</html>
body{
background-color:rgb(194, 72, 224);
}
nav{
height:100px;
width:80%;
background-color:white;
position:relative;
border-radius: 50px;
margin:auto;
}
nav ul{
list-style: none;
position:absolute;
left:20%;
top:20px;
}
nav ul li {
float:left;
}
nav ul li a{
text-decoration:none;
margin-left:15px;
}
li a:first-of-type {
color:rgb(255, 88, 158);
}
a img{
position:absolute;
top:30px;
left:20px;
}