Parent Selectors should have targets

When creating a Parent Selector rule, everything before the & gets prepended to the outermost scope.

The feature could be greatly improved by allowing for “parent targeting”, where you could apply the parent selector to a specific parent (in the case where you have deeply nested selectors).

The syntax for this feature is probably the biggest hindrance, so I would love to start a discussion on the possibilities.

[matthew-dean]

I’m going to re-open this. We’ve seen variations on this idea (such as #1154), and I feel like there’s a possibility of a solution.

That is, there are times when people have a logical stack of elements, but don’t necessarily want to inherit the entire stack in their output.

Also, there are times when people want to inherit SOME of the stack, but not all of it.

I think we can all agree that we don’t want messy syntax, but I’d like to see a variety of ideas. As we’ve explored here, targeting by name seems problematic. But we could also target by level:

.main-content {
    .button {
        .button-icon {
            background-image: @button-icon;
            &{2}:hover { background-image: @button-icon-hover; }
            &{2}.focus { background-image: @button-icon-focus; }
            .ie8 &{3} { background-image: @button-icon-ie8; }  // In this case, &{3} is the same as & because it goes to top
        }
    }
}

Basically, step “up” the inheritance tree to the level we want to inherit / append to the current selectors.

Or, something like, maybe “breaking” the inheritance and starting over, without having to move the class outside of the block. I dunno, like:

.grandparent {
  .parent {
    /.child {   // Ordered logically, but outputs cleaner CSS
      background: white;
    }
  }
  background: blue;
}

or, borrowing from the top example:

.grandparent {
  .parent {
    &{0}.child {   // inherit NONE of the parents
      background: white;
    }
  }
  background: blue;
}

Both outputting:

.grandparent {
  background: blue;
}
.child {
  background: white;
}

Thoughts?

[matthew-dean]

Since this issue is still open…

So far, trying to “select and insert” from parent selectors ends of being terribly complex. The “where” becomes quickly ambiguous.

I think the only workable solution if this feature were to happen would need to be something similar to “capturing” and “replacing” that’s used with regular expressions, where you define insertion points (in this example marked with ?) that you use to manipulate output later.

.grandparent? {
  .parent? {
    .child {
      background: blue;
      &(1, :hover) {     // all selectors, but replace 1st insertion point with ":hover"
        background: red;
      }
      &(2, .active) {     // all selectors, but replace 2nd insertion point with ".active"
        background: white;
      }
    }
  }
}

resulting in:

.grandparent .parent .child {
  background: blue;
}
.grandparent:hover .parent .child {
  background: red;
}
.grandparent .parent.active .child {
  background: white;
}

I’m not suggesting at all that that’s the right syntax, but any kind of “targeting” that’s been tried in this thread, either by index, or “scope level”, or named selector, just isn’t going to work without a precise target.

With insertion points, they have a left-to-right, top-to-bottom indexing order that is unambiguous. You can see where your thing will go, and can specify exactly what that thing is.

So any workable solution I believe will need to be some variation of this.