Less.js: :first-child pseudo class not working with extend

Created on 11 Feb 2016 · 7Comments · Source: less/less.js

I am using the following code:

header {
    &:extend(.menu all);
}

In the less file I have the following structure:

.menu {// CODE}
.menu:after {// CODE}
.menu:first-child {// CODE}
.menu:last-child {// CODE}

In the output file, the css for .menu and .menu:after show up. But NOT the code for .menu:first-child or .menu:last-child.

If, however, I change .menu:first-child or .menu:last-child to .menu:first and .menu:last then the css code will show up.

It seems that the hyphen is the problem.

Any idea how to fix this?

Thanks.

consider closing needs info

Source

moshemo

All 7 comments

I can't confirm your result: demo.
From your question at SO I can see that you're using gulp-less, but since I can't really recall any Less version (starting from 1.4.x) that has a bug like this, it's most likely not a kind of "not-recent less or gulp-less version" problem. So the question is: are you sure this _is_ the snippet you're experiencing the issue with (maybe it's something more complex?), and/or could it be some other gulp task that possibly interfere?

seven-phases-max on 11 Feb 2016

Perhaps it's a gulp-task. I'll look into it tomorrow or early next week. Thanks.

moshemo on 11 Feb 2016

Maybe this can help.

ivan-nikitovic on 13 Mar 2016

😕3

Closing due to inactivity (seems like not a Less issue anyway).

seven-phases-max on 17 Apr 2016

@seven-phases-max I believe code, provided above, exactly reproduce this issue.

less

.col {
  float: left;

  &:last-child {
    margin-right: 0;
  }
  &:first-child {
    margin-left: 0;
  }
}

.generate-columns(@n, @i: 1) when (@i =< @n) {
  .col-@{i}:extend(.col) {
    margin-left: (@i)px;
  }

  .generate-columns(@n, (@i + 1));
}

.generate-columns(2);

generated css

.col,
.col-1,
.col-2 {
  float: left;
}
.col:last-child {
  margin-right: 0;
}
.col:first-child {
  margin-left: 0;
}
.col-1 {
  margin-left: 1 px;
}
.col-2 {
  margin-left: 2 px;
}

expected css:

.col,
.col-1,
.col-2 {
  float: left;
}
.col:last-child {
  margin-right: 0;
}
.col:first-child {
  margin-left: 0;
}
.col-1 {
  margin-left: 1 px;
}
.col-1:last-child {
  margin-right: 0;
}
.col-1:first-child {
  margin-left: 0;
}
.col-2 {
  margin-left: 2 px;
}
.col-2:last-child {
  margin-right: 0;
}
.col-2:first-child {
  margin-left: 0;
}

missing part

.col-1:last-child {
  margin-right: 0;
}
.col-1:first-child {
  margin-left: 0;
}
.col-2:last-child {
  margin-right: 0;
}
.col-2:first-child {
  margin-left: 0;
}

ivan-nikitovic on 17 Apr 2016

@ivan-nikitovic Nope, see the difference between extend and extend all.

seven-phases-max on 17 Apr 2016

@seven-phases-max this has sense. :-) Thanks for the reference.

ivan-nikitovic on 17 Apr 2016

Was this page helpful?

0 / 5 - 0 ratings