Check If Parent Has Class Using Less

Check if parent has class using LESS

Can this be done using LESS?

Yes.

The code you provided works in LESS. The & combinator works the same.

In the end, the selectors generated for:

div.subnav {
    ...
    html.js & {
        ...
    }
}

will be:

div.subnav {
    ...
}

html.js div.subnav {
    ...
}

LESSCSS check if closest parent has class

First, the & marker refers to the current parent selector (as mentioned here)

That's why you've got this final statement cause you defined something like that:

.first{
    .second{
        .third{
            .between_second_and_third .first .second .third {
                /* some rules */
            }
        }
  }

You just have to nest your between_second_and_third class between... .second and .third class declarations like this:

.first{
    /* first rules */
    .second{
       /* rules for second */
       .between_second_and_third {
          /* rules between */
          .third{
           /* some other rules */            
        }
    }
}

This declaration render this lines of CSS code:

.first { /* first rules */ }
.first .second { /* rules for second */ }
.first .second .between_second_and_third {/* rules between */}
.first .second .between_second_and_third .third {/* some other rules */}

Using LESS, can I reference a parent element in nested child elements

It looks like you are already familiar with the & operator. Well it doesn't have to go before the selector. Instead, you can use it after the selector, such as th&, to get what you want.

So this:

.col-checkbox {
  width: 30px;
  // more css here

  label.custom-checkbox {
    height: 24px;
    // more css here
  }

  th& {
    margin: 10px 0;
  }
}

Outputs this:

.col-checkbox {
  width: 30px;
}
.col-checkbox label.custom-checkbox {
  height: 24px;
}
th.col-checkbox {
  margin: 10px 0;
}

However, a word of caution that this pattern may not work as you expect if you have more than one level of nesting.

Consider this code:

.col-checkbox {
  width: 30px;
  // more css here

  label.custom-checkbox {
    height: 24px;
    // more css here
    .checkbox& {
      color: navy;
    }
  }
}

You may expect to get this out of it:

.col-checkbox {
  width: 30px;
}
.col-checkbox label.custom-checkbox {
  height: 24px;
}
.col-checkbox label.custom-checkbox.checkbox {
  color: navy;
}

But in reality you'll get this:

.col-checkbox {
  width: 30px;
}
.col-checkbox label.custom-checkbox {
  height: 24px;
}
.checkbox.col-checkbox label.custom-checkbox {
  color: navy;
}

Less grandparent has class selector

LESS

You can use the parent selector to achieve this - just note the position of the &

.item {
  svg {
    fill: red;

    .active& { // <-- no space between .active and &
      fill: blue;
    }
  }
}

Here's some examples of what changing the placement will do to change the evaluated selector:

.active&  // .active.item svg (what you want)
.active & // .active .item svg
&.active  // .item svg.active
& .active // .item svg .active

---

SASS

Note that placing an & at the end of a compound selector is not allowed in SASS (yet).

However, you can use the @at-root directive to get the same output:

.item {
  svg {
    fill: red;

    @at-root .active#{&} { // <-- directive + interpolation #{&}
      fill: blue;
    }
  }
}

Check if class exists somewhere in parent

You'll have to do it recursively :

// returns true if the element or one of its parents has the class classname
function hasSomeParentTheClass(element, classname) {
    if (element.className.split(' ').indexOf(classname)>=0) return true;
    return element.parentNode && hasSomeParentTheClass(element.parentNode, classname);
}

Demonstration (open the console to see true)

Can I check parent element has specific class in sass?

Simply create two rules:

.child {font-size: 16px;}
.big .child {font-size: 20px;}

---

In SASS it would be

.child
    font-size: 16px

    .big &
        font-size: 20px

LESS - styling classes differently dependent on the parent element

Well, you could always do

.zero {
  span & { color: #fff; }
  div & { color: #389c40; }
}

Find the parent element with the least physical space occupied by child elements

You can calculate the area by multiplying the element's offsetWidth by its offsetHeight.

---

Declare two variables, smallest, for storing the smallest element, and smallestArea, for storing the area of the smallest element.

Then, select all elements with the container class and loop through each one. Check if the area (calculated by multiplying the offsetWidth and offsetHeight of the element's children) is smaller than smallestArea. If it is, we know it is smaller than the current value of smallest, so we assign the current element to smallest and the area to smallestArea.

After iterating through all the elements, smallest will be the element with the smallest area.

const containers = document.querySelectorAll('.container');

var smallest;
var smallestArea;

containers.forEach(e => {
  let area = [...e.children].reduce((a,b) => a += b.offsetHeight * b.offsetWidth, 0);
  if (!smallestArea || area < smallestArea) {
    smallest = e;
    smallestArea = area;
  }
})

console.log(smallest)

.container{width:1000px;height:1000px}.small{width:100px;height:50px}.medium{width:200px;height:100px}.large{width:400px;height:200px}

<div class="container" id="first">
  <div class="small">This is a message</div>
  <div class="medium">This is a message</div>
  <div class="large">This is a message</div>
</div>

<div class="container" id="second">
  <div class="large">This is a message</div>
  <div class="large">This is a message</div>
  <div class="large">This is a message</div>
</div>

---

Related Topics