0

Is there any elegant (ie. non-verbose) way to express the following CSS styles in a stylesheet?

.my-class ul li::after {left: 162px;}
.my-class ul ul li::after {left: 180px;}
.my-class ul ul ul li::after {left: 198px;}
.my-class ul ul ul ul li::after {left: 216px;}
.my-class ul ul ul ul ul li::after {left: 234px;}
.my-class ul ul ul ul ul ul li::after {left: 252px;}
.my-class ul ul ul ul ul ul ul li::after {left: 270px;}
.my-class ul ul ul ul ul ul ul ul li::after {left: 288px;}
.my-class ul ul ul ul ul ul ul ul ul li::after {left: 306px;}
.my-class ul ul ul ul ul ul ul ul ul ul li::after {left: 324px;}
.my-class ul ul ul ul ul ul ul ul ul ul ul li::after {left: 342px;}
.my-class ul ul ul ul ul ul ul ul ul ul ul ul li::after {left: 360px;}
.my-class ul ul ul ul ul ul ul ul ul ul ul ul ul li::after {left: 378px;}
.my-class ul ul ul ul ul ul ul ul ul ul ul ul ul ul li::after {left: 396px;}
.my-class ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul li::after {left: 414px;}
.my-class ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul li::after {left: 432px;}
.my-class ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul li::after {left: 450px;}
.my-class ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul li::after {left: 468px;}
.my-class ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul li::after {left: 486px;}

I know that I can add the style rules above to the CSSOM computationally using the following loop in javascript:

for (var i = 1; i < 20; i++) {
    var nestedLists = 'ul ';
    var selector = 'left: ' + (144 + (18 * i)) + 'px;';
    var lastRule = document.styleSheets[0].cssRules.length;
    document.styleSheets[0].insertRule('.my-class ' + nestedLists.repeat(i) + ' li::after {' + selector + '}', lastRule);
}

but I am looking for some kind of concise CSS-native syntax to express the lines above, if that's possible.

eg. Can something clever be achieved using CSS Custom Properties?

Please no solutions using Less or Sass. Thanks.

Here is a screenshot displaying the absolutely-positioned ::after pseudo-elements:

enter image description here

PJProudhon
  • 835
  • 15
  • 17
Rounin
  • 27,134
  • 9
  • 83
  • 108
  • I don't think so. But what exactly is the purpose of these styles? Often there's a much better way to get the same layout using different markup and a different approach at styling the elements. – Bergi Oct 26 '17 at 23:57
  • 1
    Please highlight the actual problem you are trying to solve, because this certainly isn't the most elegant way to go about it - you are asking the wrong question to get the true answer you seek. – ESR Oct 27 '17 at 00:10
  • This is for a series of nested lists in an interactive form. The user can open up any number of new nested lists. Theoretically, there could be an infinite number of nested lists, though the UI only allows for the first 25. – Rounin Oct 27 '17 at 00:11
  • 1
    Do you have a screenshot of how this might look with several levels of nesting, highlighting what the CSS is doing? – ESR Oct 27 '17 at 00:14
  • I don't know how easy it would be for you to provide an actual working demo of the screen shot - it would make coming up with an elegant solution much easier, knowing the HTML and surrounding CSS, – ESR Oct 27 '17 at 00:28
  • I'm (merely) investigating if there is a non-JS, CSS-native approach to producing the styles above - possibly by using CSS custom properties. Thanks. (I could provide 450 lines of CSS and 650 lines of JS, but that would likely be overkill...) – Rounin Oct 27 '17 at 08:18

1 Answers1

0

As mentioned in the body of the question, one approach is to deploy some javascript to write the CSS Rules to the CSSOM, computationally:

Working Example:

for (var i = 1; i < 20; i++) {
    var nestedLists = 'ul ';
    var selector = 'left: ' + (144 + (18 * i)) + 'px;';
    var lastRule = document.styleSheets[0].cssRules.length;
    document.styleSheets[0].insertRule('.my-class ' + nestedLists.repeat(i) + ' li::after {' + selector + '}', lastRule);
    console.log(document.styleSheets[0].cssRules[lastRule].cssText);
}
Rounin
  • 27,134
  • 9
  • 83
  • 108