<body>
    <nav id="navbar">
        <li>home</li>
        <li>about us</li>
        <li>contact us</li>
    </nav>
</body>

<style>
    html, body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        background-color: #efefef;
    }
                  
    #navbar {
        background-color: #fefefe;
        display: flex;
        height: 2rem;
    }
                  
    li {
        margin: 0 20px;
        font-size: 1.5em;
        list-style: none;
    }
</style>

<script>
    const firstElementColor = document.body.firstElementChild.firstElementChild;
    const lastElementColor = document.body.firstElementChild.lastElementChild;
                    
    firstElementColor.style.color = "green";
    lastElementColor.style.color = "green";
</script>

Problem 32. Create an element with 3 children. Now change the color of first and last element to green.

Output: