Adding Pseudo class to parent ancestor(selector) in less

Question

Is there a way I can add pseudo class to parent element from nested child. USING CSS ONLY

Example: In .less file, this is what I have.

.collection {
  // Some styling
    .headingRow {
        //Some styling
        .heading{
           //Some styling
           // This is where i want it to add the styling for alternate .collection class

         }
     }
 }

This is what I want as Output

.collection:nth-of-type(2n+1) .headingRow .heading 
{
    background-color:  #7a003d; 
}
.collection:nth-of-type(2n) .headingRow .heading
{
    background-color:  #322f31;
}

This is what I tried - Adding & from .heading class, I can add a parent elemnt or class using something like

    .collection {
  // Some styling
    .headingRow {
        //Some styling
        .heading{
           div&
           // This results in div.collection .headingRow .heading { }
         }
     }
 }

Is there a way I can add Pseudo class to parent ancestor ?

[See this answer](http://stackoverflow.com/questions/17286742/less-css-is-it-possible-to-get-a-parents-parent) — agrm, Apr 25 '14 at 18:15
Sorry, thta's not what I want. I already tried that(which I also mentioned in the question). I need to be able to add Pseudo class to parent element. — Ani, Apr 25 '14 at 19:43

score 7 · Answer 1 · answered Apr 26 '14 at 02:05

7

Something like this:

.collection {
    // ...
    .headingRow {
        // ...
    }
}

.headingRow .heading {
    .collection 
        & {background-color: red}
    .collection:nth-of-type(2n) 
        & {background-color: blue}
    .collection:nth-of-type(2n + 1)
        & {background-color: green}
}

Though I don't think it's any way better than just plain old CSS like definition w/o any nesting.

answered Apr 26 '14 at 02:05

seven-phases-max

11,491
1
41
57

Sorry i had a typo in my question. See Desired output. – Ani Apr 27 '14 at 00:27
@seven-phases-max I have more classes at the level of heading Row...which will require the default styling of `.collection`..I'll have to write the default styling of `collection` again in all selectors ? – Ani May 18 '14 at 20:20
3

Well, what you have to write depends on what you need to get. Obviously if you need *different* styles for *different* `collection` descendants you'll have to get these styles written somehow. Use [`mixins`](http://lesscss.org/features/#mixins-parametric-feature) and/or [`extend`](http://lesscss.org/features/#extend-feature) to minimize a repetitive code (if any). See for example http://stackoverflow.com/questions/23551080 (it's actually pretty similar thing expect that instead of `color` suffix for generated classes you'll need `nth-of-type(2n + @i)` one). – seven-phases-max May 18 '14 at 20:40

Adding Pseudo class to parent ancestor(selector) in less

1 Answers1