CODEWITHSUNDEEP
csscss-selectorsless
Ani
Ani

Reputation: 4523

Adding Pseudo class to parent ancestor(selector) in less

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 ?

Upvotes: 2

Views: 768

Answers (1)

seven-phases-max
seven-phases-max

Reputation: 11820

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.

Upvotes: 7

Related Questions