Omitting parent selector

[Satheeskumar-1989]

Hi Folks,

I ran into a strange requirement in less selectors and I am not aware whether any selector already available to meet our requirement. Can anyone to help me out?
Requirement: Is there any selector to omit the parent class as we include the parent using ampersand?
Example Scenario:

Actual Parent Selector:

Less	CSS
&.f-js {    &.f-spreadsheet {      display: none   }                 .f-spreadsheet {                                display: none;                 } }	.f-js.f-spreadsheet {   display: none; } .f-js .f-spreadsheet {   display: none; }

Expected Selector:

Less	CSS
&.f-js {                 &.f-spreadsheet {                                display: none                 }                 (any-selector).f-spreadsheet {                                display: none;                 } }	.f-js.f-spreadsheet {   display: none; }  .f-spreadsheet {   display: none; }

Let me know if you need any further details.

Thanks,
Sathish

[seven-phases-max]

No, there's no such trick (simply because nesting is for ... nesting, it's not really for "grouping" arbitrary selectors... There's thing like #1075 though).

[Satheeskumar-1989]

Thanks for your update.
Is there any way to achieve the below in CSS,

Less	Expected CSS
.one, .two {  &1.three {   display: none   } &2.four {   display: none; }}	.one.three {   display: none; } .two.four {   display: none; }

[seven-phases-max]

Is there any way to achieve the below in CSS,

No. It's basically the same example as the initial one. In summary: in Less if you have something as a nesting-parent selector (be it a single entity or a list of selectors item) - you will get this as part of the resulting selector one way or another. There's no workarounds, no hacks, nothing that can overcome this.

[rjgotten]

nothing that can overcome this.

Well... technically you could write a plugin function that manipulates the selector stack.
The main problem there is that that would be horridly horridly complicated to write correctly with no edge-cases slipping by. (Just look at how hard it already is to always correctly capture the current selector state into a variable.)

Ofcourse, if you're not looking to solve the general case, but only looking to 'reset' the stack to the root selector, it might be easier.

Shouldn't you be able to write a visitor plugin that wipes the selector stack whenever a custom at-rule is encountered? To support something like, e.g. :

&.f-js {
  &.f-spreadsheet {
    display: none
  }

  @root {
    .f-spreadsheet {
      display: none;
    } 
  }
}           

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.