Search code examples
csscss-selectorslessextend

Defining selectors to apply to the other styles

I am fairly new to Less.

There is some dynamic content coming from external source which is part of #left(id selector) tag.

Here is my Less file:

//can i define anything like this in `less`
@not-empty: #left:not(:empty);

#left {   
  background-color: red;
   &:not(:empty) {
      font-size: 20px; 
      background-color: green;
   }
}

#right {
background-color: blue;
    font-size: 15px;
    #left:not(:empty) {
    font-size: 23px;
   }
}

My anticipated result would be like if the #left is not empty apply font-size: 23px. If not then #right font size would be 15px.

I am using V2.5.0 version of Less. Can anyone help me with this?

Solution

  • Answer to your Less question would be - Yes, it is possible in Less. You can assign your selector to a variable and then use it via selector interpolation. Below is an example:

    #left{
    background-color: red;
    &:not(:empty){
        font-size: 20px;
        background-color: green;
    }
}

#right{
    font-size: 15px;
    @{left-empty} + &{ /* will form #left:not(:empty) + #right */
        font-size: 23px;
    }

    /* You can use the adjacent sibling selector (+) or the general sibling selector (~) depending on your HTML structure */
    @{left-empty} ~ &{ /* will form #left:not(:empty) ~ #right */
        color: red;
    }
}

@left-empty: e("#left:not(:empty)"); /* e() strips out the quotes */

    As mentioned by seven-phases-max in comments, if you are expecting @not-empty: #left:not(:empty); to evaluate to a boolean true or false and use it like an if condition then it wouldn't be possible with Less. Less does not know the contents of your HTML file.

    Note that for the compiled CSS to actually work, your HTML structure should be correct. In CSS you can style one element based on another only if any of the following conditions match:

    1. The element to be styled (#right) is a child or grand-child of the reference element (#left). I am ruling this case out because if it is indeed a child then #left is automatically not empty.
    2. The element to be styled (#right) is a direct/immediate next sibling of the reference element (#left). If yes, then use the + selector.
    3. The element to be styled (#right) is a sibling (immediate next or not) of the reference element (#left). If yes, then use the ~ selector.

    If it is none of the above, then you would not be able to achieve the required setting using CSS alone. JavaScript or any other library would be required.

    Below is a demo snippet on how the selectors work based on the markup.

    #left {
  background-color: red;
}
#left:not(:empty) {
  font-size: 20px;
  background-color: green;
}
#right {
  font-size: 15px;
}
#left:not(:empty) + #right {
  font-size: 23px;
}
#left:not(:empty) ~ #right {
  color: red;
}
    <div id="left"> <!-- This is not empty -->
  <div id="right">Some text</div>
</div>
<div id="right">Some text</div> <!-- This is the immediate next sibling and a general sibling of the first #left-->

<hr>

<div id="left">Some other text</div> <!-- This is also not empty -->
<div id="right">Some text</div> <!-- This is the immediate next sibling for the second #left and is a general sibling of the first #left -->

<hr>

<div id="left"></div> <!-- This is empty -->
<div id="right">Some text</div> <!-- This is the immediate next sibling for the third #left and is a general sibling of the first and second #left -->