jQueryを使わずにタブ切り替えをjsで実装のタブCSS

jQueryを使わずにタブ切り替えをjsで実装する のタブ部分のcss指定になります。 selected付与時はタブがハイライトになるようにしてあります。

#tab{
    padding: 0 10px;
    border-bottom: 1px solid #dcdcdc;

    li{
        padding: 0;
        margin: 0 5px -1px 0;
        background: none;
        float: left;
        border-top:1px solid #dcdcdc;
        border-left: 1px solid #dcdcdc;
        border-right: 1px solid #dcdcdc;
        border-bottom: 1px solid #dcdcdc;
        border-radius: 4px 4px 0 0;

        a{
            padding: 5px 20px 5px 15px;
            display: block;
            text-decoration: none;
            border-radius: 4px 4px 0 0;

            &:hover{
                background: #eeeeee;
            }
        }
        &.selected{
            border-bottom: 1px solid #ffffff;

            a{
                background: #ffffff;
            }
        }
    }
}