First type of not working

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;
}

why don’t you try first child?

 ul:first-child(){ color:......}
1 Like

it doesn’t work i try it also

Slight mistake, your current selector picks all <a> elements that are the first-of-type of their parent elements. Which is true for all your <li><a> elements. Instead, you want the first <li> and the <a> within:

li:first-of-type a {
    color:rgb(255,88,158);
}

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.