// * {
//     margin: 0;
//     padding: 0;
// }
p {
    color: black;
    background-color: lightcyan;
}

span {
    color: blue;
    background-color: burlywood;
}

.cajon {
    color: rebeccapurple;
    background-color: lightsalmon;
    border: 2px dotted sienna;
    margin: 20px 50% 5px 10%;
    padding: 2rem;
    height: 100px;
    width: 150px;
    overflow-y: visible;
    overflow-x: auto;
    p {
        height: 200px;
        width: 250px;
    }
     // Pseudo element 
    &::-webkit-scrollbar {
        width: .65em;
        height: .65em;
    }// barra
    &::-webkit-scrollbar-thumb {
        background: greenyellow;
        border-radius: 1em;
        border: 2px solid seagreen;
    }//carril
    &::-webkit-scrollbar-track {
        background: yellow;
        width: .5em;
    }
}
 // Pseudo element 
//  ::-webkit-scrollbar {
//     width: .65em;
//     height: .65em;
// }
// ::-webkit-scrollbar-thumb {
//     background: greenyellow;
//     border-radius: 1em;
//     border: 2px solid seagreen;
// }
// ::-webkit-scrollbar-track {
//     background: yellow;
//     width: .5em;
// }

nav {
    ul{
        li{
            a{
                text-decoration: none;
                color: black;
                font-family: Arial, Helvetica, sans-serif;
            }
            // primer hijo
            &:first-child {
                a{
                    color: salmon;
                }
            }
            // último hijo
            &:last-child {
                a {
                    color: orange;
                    &::before {
                        content: "before";
                        width: 20px;
                        height: 20px;
                        color: red;
                        position: relative;
                    }
                    &::after {
                        content: "after";
                        width: 20px;
                        height: 20px;
                        color: purple;
                        position: relative;
                    } 
                }
            }
            // 4º hijo
            &:nth-child(4) {
                a {
                    color: blueviolet;
                }
            }
            //pares (even)
            // &:nth-child(even) {
            //     a {
            //         color: gray;
            //     }
            // }
            // 2º hijo contanto desde el final 
            &:nth-last-child(2) {
                a {
                    color: greenyellow;
                }
            }

        }
    }
}

a {
    color: darkcyan;
}

