6

Is there a way of adding CSS rules to an element only if it has an certain child element ? I do know it is not possible to do it with CSS, but I'm not sure if it is possible to do it with LESS.

Roland
  • 8,104
  • 16
  • 74
  • 120
  • There is only `:contains()` which checks if the element has certain textual content, there is nothing similar to jQuery's `has` I'm afraid. – Andy Oct 31 '12 at 14:22
  • @Andy ~ I've just read that `:contains()` it's deprecated, but this one could work if there were a replacement for it (: – Roland Oct 31 '12 at 14:26
  • I don't think there is a replacement. Best bet is probably use JS to scan through looking for elements containing, and then assign a CSS class. – Andy Oct 31 '12 at 14:30
  • much related: http://stackoverflow.com/questions/4220327/css-selector-element-with-a-given-child – cregox Feb 24 '15 at 14:02
  • although not exactly what this question asks, it should be possible to do something very similar with isomorphic rendering of react to produce html based on js logic, and using styled components to generate supporting css based on js logic – Billy Moon Jun 25 '17 at 18:09

2 Answers2

6

If it is not possible with CSS, then it is not possible with LESS, which compiles to plain old vanilla CSS.

The problem is, that the LESS is compiled without knowledge of the HTML it is applied to, and without any client side scripting. Therefore, it is impossible to achieve anything with LESS that can not be achieved by using CSS alone.

You could achieve what you want by using client side javascript, or you could wait until CSS4 comes out, and use the parent selectors to the same effect as what you want.

Billy Moon
  • 52,018
  • 22
  • 123
  • 222
  • Do you have any idea when will the CSS4 be released ? I haven't had time to read anything about any deprecated or new stuff out there yet ... – Roland Oct 31 '12 at 19:12
  • 1
    no, sorry I don't have any information about the release date. But it always takes a couple of years before any feature works in most browsers anyway, so don't stress about it, just try to do the best with what we have ,~) – Billy Moon Oct 31 '12 at 22:38
6

This isn't possible in CSS or LESS.

I would suggest your best bet is jQuery.

If your parent element is .parent and your child is .child, you could do:

$('.parent:has(.child)').addClass('myClass');

See Example: http://jsfiddle.net/d8Lz5/

Curt
  • 94,964
  • 60
  • 257
  • 340
  • I'm trying to avoid the use of JS because it's a mobile web app ... and the only thing different about the element that I want to change if it contains some child element is add some padding to it ... and for such a thing I prefer not using jQuery ... but apparently there isn't any other way – Roland Oct 31 '12 at 14:33
  • @Roland You could add margins to the child instead. – Stefan Oct 31 '12 at 16:02
  • @Stefan ~ I think I would have done this by now and I wouldn't have posted this if that was the case (: It needs to be applied to the second level parent otherwise nothing would happen (: – Roland Oct 31 '12 at 19:10
  • a little cleaner syntax would be to use jQuery function `has` as in `$('.parent').has('.child').addClass('myClass');` – Tomer W Mar 19 '14 at 20:48
  • @TomerW I like it! I've updated my answer with similar syntax. – Curt Mar 20 '14 at 09:15