tut27.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Attribute and nth child pseudo selectors</title>
    <style>
        .container {
            display: block;
            width: 233px;
            margin: auto;
        }

        input {
            display: block;
        }

        input[type='text'] {
            padding: 23px;
            border: 2px solid red;
        }

        a[target] {
            font-size: 44px;
            color: violet;
        }

        a[target='_self'] {
            font-size: 14px;
            color: rgb(13, 22, 151);
        }

        input[type='email'] {
            color: yellow;
            border: 4px solid black;
        }

        /* This will apply css for third child */
        /* li:nth-child(3){
        color: cyan;
    }

    li:nth-child(2n+0){
        color: red;
    } */

        li:nth-child(3n+3) {
            color: red;
        }

        /* Odd child */
        /* li:nth-child(odd){
        background-color: yellow;
    } */

        /* Even child */
        li:nth-child(even) {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1><a href="http://google.com" target="_blank">Go to google</a></h1>
        <h1><a href="http://facebook.com" target="_self">Go to Facebook</a></h1>
        <form action="" class="form-control">
            <input type="text" placeholder="Enter your name">
            <input type="email" placeholder="Enter your email">
            <input type="password" placeholder="Enter your password">
            <input type="submit" value="Submit">
        </form>
        <ul>
            <li class="item" id="item-1">Item1</li>
            <li class="item" id="item-2">Item2</li>
            <li class="item" id="item-3">Item3</li>
            <li class="item" id="item-4">Item4</li>
            <li class="item" id="item-5">Item5</li>
            <li class="item" id="item-6">Item6</li>
            <li class="item" id="item-7">Item7</li>
            <li class="item" id="item-8">Item8</li>
            <li class="item" id="item-9">Item9</li>
            <li class="item" id="item-10">Item10</li>
        </ul>
    </div>
</body>

</html>