LESS - How to select a deeply nested element by class name?

Question

I am using a CSS library that relies on Less. In order to override the CSS properties of a certain element I am trying to use the higher degree of specificity technique by wrapping a parent element "commentPaddingFix" as so:

<div class='commentPaddingFix'>
  <div class='Child1'>
     <div class='Child2'>
       <div class='ant-comment-inner'>
       </div>
     </div>
  </div>
</div>

And in the Less file:

.commentPaddingFix {
  .ant-comment-inner {
    padding-bottom: 0px !important;
    padding-top: 0px !important;
  }
}

I need a solution that works when you know the className of the element you are targeting for any arbitrary number of nested parent elements. I can't use nth child technique as the children numbers vary from render to render.

It’s kind of a dumb hack, but you can increase specificity by repeating the same selector: `.commentPaddingFix.commentPaddingFix.commentPaddingFix { ... }` — ray, Mar 18 '20 at 00:22
What’s wrong with your Less example? Why not just `.commentPaddingFix .ant-comment-inner { ... }`? — ray, Mar 18 '20 at 00:24
It doesn't override the CSS properties of the .ant-comment-inner. — user1088793, Mar 18 '20 at 00:29
If you inspect the element in dev tools do you see your rules, they’re just not specific enough? If so, try repeating the outer selector like in my comment above. — ray, Mar 18 '20 at 00:32
Are your class names correct and visible in the output markup? — ray, Mar 18 '20 at 00:35
Yes, I have successfully applied a style to the commentPaddingFix element, and the ant-comment-inner is definately correct. — user1088793, Mar 18 '20 at 00:36
If it makes any difference, I am using react and importing the style like className={styles.commentPaddingFix} — user1088793, Mar 18 '20 at 00:39
are you using css modules? are your class names showing up in the dom unmodified? — ray, Mar 18 '20 at 01:28
Hi yes I am, my class gets a random name. I can currently get to the classname I want to target only with the nth child method/ — user1088793, Mar 18 '20 at 12:22
Have you considered using [:global](https://stackoverflow.com/a/40065474/636077) to leave the classnames unmodified? — ray, Mar 18 '20 at 15:04

score -1 · Answer 1 · answered Mar 18 '20 at 00:25

-1

I don't know Less but if that works anything like Sass your solution should work.

Here's what it looks like with pure css: https://codesandbox.io/s/condescending-bhaskara-3781k.

answered Mar 18 '20 at 00:25

Nicolas SEPTIER

671
8
20

LESS - How to select a deeply nested element by class name?

1 Answers1