Imbrication

by Michel Piallier

HTML

<div id="container">
    <ul>
        <li>
            <a href=http://google.fr target="_blank">Google</a>
        </li>
    </ul>
</div>

SCSS

#container {
    width: 200px;
    height:50px;
    border: solid red 1px;
 
    ul {
        position:relative;
        top:10px;
        left:30px;
        margin:0;
        list-style-type: none;
       
        li {
            a {
                text-decoration: none;
                font-weight: bold;
                color: green;
                    // & : représente l'élément parent
                    &:hover{
                        color:red;
                     }
             }
        }
    }
      
}

/*
    CSS
*/

/*
#container {
    width: 200px;
    height:50px;
    border: solid red 1px;
}

#container ul {
     position:relative;
     top:10px;
     left:30px;
     margin:0;
     list-style-type: none;
    
}


#container ul li a {
     text-decoration: none;
     font-weight: bold;
     color: green;
}
#container ul li a:hover {
     color:red;
}
*/