Search code examples
htmlcsstwitter-bootstraplessfooter

Recursive CSS selector?

I would like to target a div with a class which is in another div with another class, this is basically what I want to do:

.footer {
    position: sticky;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 60px;
    background-color: #2f2f2f;
    .container {
        width: auto;
        max-width: 680px;
        padding: 0 15px;

        .text-muted {
            margin: 20px 0;
        }
    }
}

But I can't put class selectors inside others, shall I start using LESS or SASS or another kind of CSS framework ?

Regards,

Solution

  • you can make it like that using pure css:

    .footer {
position: sticky;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #2f2f2f;
}

.footer .container {
    width: auto;
    max-width: 680px;
    padding: 0 15px;
}

.footer .container .text-muted {
        margin: 20px 0;
}