CODEWITHSUNDEEP
cssless
neatnick
neatnick

Reputation: 1508

Nest an object's parent

I'm trying to generate some css that targets elements which have a differently named parent but a commonly named child. For example:

.icon-Part > .km-icon:before {
    content: "\e600";
}
.icon-Time > .km-icon:before {
    content: "\e601";
}
.icon-Error > .km-icon:before {
    content: "\e602";
}

Obviously if my situation were reversed and my aim was to generate css where the parents were commonly named but the child name differed I'd do something like this:

.parent-class {
    > .child1-class {
       /* child1 specific styling */
    }
    > .child2-class {
       /* child2 specific styling */
    }
}

But I can't think of any way of doing the opposite. Any help would be appreciated.

Upvotes: 0

Views: 79

Answers (1)

seven-phases-max
seven-phases-max

Reputation: 11820

See Parent Selectors. For example like this:

.km-icon:before {
    .icon-Part  > & {content: "\e600"}
    .icon-Time  > & {content: "\e601"}
    .icon-Error > & {content: "\e602"}
}

Alternatively you can move the duplicating parts into a mixin, e.g.:

.icon(Part,  e600);
.icon(Time,  e601);
.icon(Error, e602);

.icon(@name, @char) {
    .icon-@{name} > 
        .km-icon:before {content: "\@{char}"}
}

(In fact the mixin method is more future proof.)

Upvotes: 1

Related Questions