Using LESS how to target the granparent from child element?

Question

I'm trying to target a specific popover that a div with class "s-formgroup" and set its background RED as I have multiple popovers. Either my js nor my less do the trick

FIDDLE

HTML

<div class="popover>
  <div class="popover-content">
    <div class="form-group s-formgroup">

    </div>
  </div>
</div>

CSS LESS

.popover {
    .popover-content{
           .s-formgroup {
              & &.popover {
                  left: 120px;
              }
            }
     }
}

JS

 w = $(window).width(); 
 if (w < 320){
    $('.s-formgroup').parents('.popover').css('background-color', 'red');
 }

Code on inspecting popover (press12)

<div class="popover fade right in" style="top: -41.5px; left: 16px; display: block;"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p>
                                            <div class="form-group s-formgroup">
                                            <div class="age-grp1 pull-left">
                                                <label for="kid19">UNDER 19 YEARS</label>
                                                <input type="text" class="pull-left numbersOnlyField" maxlength="2" value="" id="kid19">
                                            </div>
                                            <div class="age-grp2 pull-right">
                                                <label for="kid26">19-26 YEARS</label>
                                                <input type="text" class="pull-left numbersOnlyField" maxlength="2" value="" id="kid26">
                                            </div>
                                            <div class="row-fluid">                                           
                                                <button class="btn btn-default btn-block btn-lg" id="kids" type="button">ok</button>
                                            </div>
                                        </div>
                                    </p></div></div></div>

Your less is also looking suspicious, it misses a closing bracket (typo?) and it never matches either of your HTML divs (since it expands to `.popover .popover-content .s-formgroup .popover .popover-content .s-formgroup.popover`). Which div it should match? — seven-phases-max, Dec 12 '13 at 00:42
Let me guess, "it should match not just *any* `.popover` but a `.popover` that has `.popover-content .s-formgroup` descendant(s)"? If that's what was your intention then it's not possible in LESS since it's not possible in CSS (see [this](http://stackoverflow.com/q/13160079/2712740) and [this](http://stackoverflow.com/a/16675227/2712740) for more details). — seven-phases-max, Dec 12 '13 at 01:27
does pop over have any methods you can call after it pops up? or after the content has been initialized? if so then do the colour changing in that function — Huangism, Dec 12 '13 at 19:57

score 2 · Answer 1 · edited May 23 '17 at 10:25

To do this with LESS you should have a unique parent of the element you will style. (as mentioned by @seven-phases-max)

In your fiddle you will use the javascript plugin of version 2.0.1 and the CSS of the latest 3.0.3 version. So which version of Bootstrap will you use? There will be major changes between v2 and v3 of Twitter's Bootstrap, see also Updating Bootstrap to version 3 - what do I have to do?

Based on the HTML you provide there is nothing wrong with the jQuery solution of @JotaBe. Problem here is your div.popover will be generate dynamically. So div.popover doesn't exists on document ready.

You will find the solution by adding the style after the popup has been create. The popover (or in tooltip fact) plugin of TB 2.0.1. doesn't trigger an event. You will have to apply your style triggered by clicking the link .popover-markup>.trigger and after the popover showed:

$('.popover-markup>.trigger').click(function()
{
$(this).popover({

    html: true,
    placement: 'right',
    manual: 'manual',
    content: function () {
        return $(this).parent().find('.content').html();
    }

});
$(this).popover('show');
$('.s-formgroup').closest('.popover').css('background-color', 'red');

});

This also works in your fiddle: http://jsfiddle.net/2XmVC/1/

This should also work for version 2.3.2 and >= 3.0.0, see also: Twitter Bootstrap .on('show',function(){}); not working for popover

JotaBe · Answer 2 · 2013-12-12T00:39:16.283

1

If you can recognize the ancestor in the DOM tree by type, ID or any other jquery seelctor, you can use .closest() to find the desired element.

In your case you can call .closest('.popover')

Closest goes up the DOM tree until it finds something that matches the provided selector.

You could also use .parent().parent() but the other way is safest (it will keep working if you make changes to the HTML).

NOTE: parents() goes up all the DOM tree. closest() stops in the first ancestor matched by the selector. So, in your code, convert your parents() to closest() and it will work.

edited Dec 12 '13 at 00:39

answered Dec 12 '13 at 00:32

JotaBe

38,030
8
98
117

added fiddle. doesn't seem to owrk – dragonfly Dec 12 '13 at 01:34
Looking at your fiddle.. there is no ".popover" div... there is a ".popover-markup" however. Chaneg the closest('.popover') to .closest('.popvoer-markup') and you'll see a "horrible red-background div" on the result pane. – JotaBe Dec 12 '13 at 01:51
--inspect the popover..you can see ".popover" I don't want to add anything to popover-markup – dragonfly Dec 12 '13 at 01:55
this code is by inspecting fiddle. Press 12 on the popover: CHK above for code – dragonfly Dec 12 '13 at 02:46

Using LESS how to target the granparent from child element?

HTML

CSS LESS

JS

Code on inspecting popover (press12)

2 Answers2