Immediate Child Selector in Less

Immediate Child selector in LESS

UPDATE

Actually, the code in the original question works fine. You can just stick with the > child selector.

---

Found the answer.

.panel {
    ...
    >.control {
        ...
    }
}

Note the lack of space between ">" and ".", otherwise it won't work.

How to get immediate child in less

If by immediate child you mean any element in the first level below some other element, what about this?

div > * {
    color: red;
}

http://jsfiddle.net/74H6y/

Of course, if you did not define styles for the lower elements, some properties are set to inherit by default and you'll get unwanted results.

Selector for not immediate child element

You could use the following selector:

.main > * .text

Which will select all .text elements that are descendants of .main, but not immediate children.

LESS CSS prepend mixin reference with child selector

move immediate child selector to mixin

.wrapper {
    .mixintest();
}


.mixintest() {
  > .col-xs-6 {
    width: 50%;
  }
}

That is the only way that will work according to
https://lesscss.org/features/#mixins-feature
more specifically this example in "Namespace" subsection

#outer > .inner(); // deprecated
#outer .inner();   // deprecated
#outer.inner();    // preferred

Select all direct descendant dom elements regardless of type

I assume you mean the child selector. It's >, not <.

.parent > *

That will select any element. You can of course use any other selector as the child (an element, class, id, etc.)

Apply style to child elements with LESS

What you have for your LESS should work. It compiles to this CSS:

.layoutList {
  background-color: #CFCFCF;
}
.layoutList .entityCard.hover {
  background-color: #FFFFFF;
  border: 1px solid yellow;
}

The only thing missing is if you want the child combinator as your example shows, then you need to tweak your LESS to this (where the > was added):

.layoutList {
    background-color: #CFCFCF;
    > .entityCard.hover {
        background-color: #FFFFFF;
        border: 1px solid yellow;
    }
}

Which will then output this:

.layoutList {
  background-color: #CFCFCF;
}
.layoutList > .entityCard.hover {
  background-color: #FFFFFF;
  border: 1px solid yellow;
}

Less Immediate Parent Selector

A Base Example

It partly depends upon how you structure your LESS code. There is currently no way to do this with a normal nested structure. However, take the following example, where the .grandchild is our final target in all cases (it must be the outermost level--I called this "end target grouping" in a previous answer before LESS added documentation about using & as a parent selector):

LESS

.grandchild {
  grandchild: 1;
  .child & {
    child: 1;
    .parent & {
      parent: 1;
      .grandparent & {
        grandparent: 1;

      }
    }
  }
}

CSS Output

.grandchild  {
  grandchild: 1;
}
.child .grandchild  {
  child: 1;
}
.parent .child .grandchild  {
  parent: 1;
}
.grandparent .parent .child .grandchild  {
  grandparent: 1;
}

As you can see, any code nested in the first level only has the end target of .grandchild in its selector string. Each level one goes "down" in the nest, one is actually going "up" in selector specificity. So to target just the "immediate parent" for the selector string, place it in the .child of this example.

Hovers Still Work

LESS

.grandchild {
  grandchild: 1;
  &:hover {
    grandchildhover: 1;
  }
  .child & {
    child: 1;
    .parent & {
      parent: 1;
      .grandparent & {
        grandparent: 1;
        &:hover {
          grandchildhover: 1;
        }
      }
    }
  }
}

This will add to the above css these two outputs:

.grandchild:hover {
  grandchildhover: 1;
}

.grandparent .parent .child .grandchild:hover {
  grandchildhover: 1;
}

Skip Generations

You can code it to skip some generations, like so:

LESS

.grandchild {
  grandchildonly: 1;
  .child & {
    withchild: 1;
    .parent & {
      withparentchild: 1;
    }
  }
  .parent & {
    skipgenchild: 1;
  }
}

CSS Output

.grandchild {
  grandchildonly: 1;
}
.child .grandchild {
  withchild: 1;
}
.parent .child .grandchild {
  withparentchild: 1;
}
.parent .grandchild {
  skipgenchild: 1;
}

Abstracted

There are various ways this could be abstracted out, such that the code does not give the appearance of a nested look (which could confuse a user). Something like this is one way (output similar to that given in first and second examples above):

.addParent(@parent) { 
  @parentescaped: e(@parent); 
  @{parentescaped} & {.setWithParentProps(@parent);}
}

.grandchild {
  grandchild: 1;
  &:hover {
    grandchildhover: 1;
  }
  .addParent('.child');
  .setWithParentProps('.child'){
    child: 1;
    .addParent('.parent');
  }
  .setWithParentProps('.parent'){
    parent: 1;
    .addParent('.grandparent');
  }
  .setWithParentProps('.grandparent'){
    grandparent: 1;
    &:hover {
      morespecifichover: 1;
    }
  }
}

Final Comments

As seven-phases-max linked to in his comment, there is talk of adding generational precision within a normal nested context. The solution given here requires one to think "opposite" of nesting, but rather think only about the element being targeted. So the way to add a .grandchild into another selector would not be this mixin:

LESS (expecting to add a parent by normal nesting)

.another-generational-parent {
  .grandchild;
}

CSS Output

.another-generational-parent {
  grandchildonly: 1;
}
.child .another-generational-parent {
  withchild: 1;
}
.parent .child .another-generational-parent {
  withparentchild: 1;
}

It would be best to add it into the original code according to the proper place, but if that is not possible, then some repetition is needed (unless you set up some way in the original code to "insert" parents through creative mixin calling--I have no time to devout to that here).

.parent .child .grandchild {
  .another-generational-parent & {
     another-generational-parent: 1;
  }
}

Whether such opposite coding can be useful or not all depends upon one's goals and desires in organizing the LESS code.

Less first-child

You are specifying that if the first child element inside a .leftPanel is a <select>, it should have margin-right: 30px;. If you are trying to apply this rule to the first child element inside the <select> (which should always be an <option>), try replacing &:first-child with option:first-child.

---

Related Topics