Syntax

‹

Nesting child objects

Nesting selector declarations helps you to build re-usable and object-oriented style models. Beside that it leads to intuitively structured style cascades and their easier maintenance. Let's have a look:


.selector {
    a {
        display: block;
    }
    strong {
        color: blue;
    }
}



.selector a {
    display: block;
}
.selector strong {
    color: blue;
}

If you want to add some CSS rules to .selector itself, use the newly introduced self selector:


.selector {
    self {
        margin: 20px;
    }
    a {
        display: block;
    }
    strong {
        color: blue;
    }
}



.selector {
    margin: 20px;
}
.selector a {
    display: block;
}
.selector strong {
    color: blue;
}

You can nest selector declarations as deep as you want. Remeber your shorts, when you make a trip through hell.
Indentation doesn't matter.


.selector {
    self {
        margin: 20px;
    }
    a {
        display: block;
    }
    dl {
        dt {
            color: red;
        }
        dd {
            self {
                color: gray;
            }
            span {
                text-decoration: underline;
            }
        }
    }
}



.selector {
    margin: 20px;
}
.selector a {
    display: block;
}
.selector dl dt {
    color: red;
}
.selector dl dd {
    color: gray;
}
.selector dl dd span {
    text-decoration: underline;
}

Found an error on this page? Please help to correct it!