Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Select every element after element except first child

I would like to compile next LESS-rule: - every element after current element, except first child

It should look something like this:

(& ~ *):not(:first-child) {
  margin-left: 5px;
}

or this:

& ~ *:not(:first-child) {
  margin-left: 5px;
}

Unfortunately both don't work.

like image 859
0leg Avatar asked Mar 14 '23 15:03

0leg


1 Answers

The :first-child pseudo-class always refers to the first child of its parent. It cannot be used to ignore the first child (sibling) that follows the reference element.

If you want to select all elements except the first element that is following the reference element then it should be written as below:

.reference + * ~ *{
  color: red;
}

The .reference is the reference element, the + * refers to the first sibling of the reference element and it can be of any type, the ~ * refers to all subsequent sibling elements of any type.

In Less, you could either use the selector as-is provided above (or) you could write it like below:

.reference {
  & + * ~ * {
    color: red;
    /* and any other rules */
  }
}

The below snippet demonstrates this in working.

.reference + * ~ *{
  color: red;
}
<div class='reference'>Reference Element</div>
<p>Some other element which is the first one after reference element</p>
<div>The elements to be selected</div>
<p>The element to be selected</p>
like image 111
Harry Avatar answered Apr 25 '23 17:04

Harry