pseudo classes.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>My First website</title>
    <link rel="stylesheet" href="style.css">
    <style>
        a:link {
            color: lawngreen;
        }

        a:visited {
            color: gray;
        }

        a:hover {
            color: tomato;
        }

        a:active {
            color: yellow;
        }

        button:hover {
            background-color: lightgray;
        }

        /* li:nth-child(1){
    background-color: yellow;
} */
        /* li:nth-child(even){
    background-color: skyblue;
}

li:nth-child(odd){
    background-color: powderblue;
} */
        li:nth-child(5n+1) {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <!-- pseudo class -   a keyword added to a 
    selector that specifies a special state 
of the selected element(s) -->

    <a href="https://www.google.com"> Google.com</a>
    <button>Click Me</button>
    <ul>
        <li>This is element #1</li>
        <li>This is element #2</li>
        <li>This is element #3</li>
        <li>This is element #4</li>
        <li>This is element #5</li>
        <li>This is element #6</li>
        <li>This is element #7</li>
        <li>This is element #8</li>
        <li>This is element #9</li>
        <li>This is element #10</li>
    </ul>
</body>

</html>