<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>
    // console.log(document.body.firstElementChild);
    // <nav id="navbar">
        // <li>home</li>
        // <li>about us</li>
        // <li>contact us</li>
    // </nav>
    
    // console.log(document.body.firstElementChild.firstElementChild);  // home
    // console.log(document.body.firstElementChild.firstElementChild.firstElementChild);    // null
                    
    // const firstElementColor = document.body.firstElementChild.firstElementChild.firstElementChild;
                    
    const firstElementColor = document.body.firstElementChild.firstElementChild;
    firstElementColor.style.color = "orange";
</script>

Problem 30. Create a navbar and change the color of its first element to red.

Output: