How change div based on the child class?

Question

I'm working with google maps and I want to change the "info window" dimensions.

The gmaps js automatically generate this section:

I want to target the selected section that has no id or class to identify changing it's width. Then I thought that I need to use it's child div class named "gm-style-iw" like a reference to reach the other div above.

The idea would be something like this:

div < .gm-style-iw {
 width: 220px;
}

but we know that this '<' is not possible using css.

How can I do that?

There are some workarounds in this answer: https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — Chris Riebschlager, Jan 03 '18 at 20:04
yeah I saw some examples but in my case I want to use a class like a reference and not other elements like 'p' or 'a' — Fillype Farias, Jan 03 '18 at 20:11

UncaughtTypeError · Accepted Answer · 2018-01-03T20:28:27.073

As you are probably already aware, you'll need javascript for this to work as intended, and using jQuery's .parent()^ref. method would probably be the most straight forward route to getting there.

Ref: .parent() | jQuery API Documentation

Consider the below:

jQuery('.gm-style-iw').parent().css('width','220px');

On inspecting the element, you will notice that the inline width property has been applied and is over-qualifying the external width property rule set be the selector .parent.

Code Snippet Demonstration:

jQuery('.gm-style-iw').parent().css('width','220px');

.parent {
    width: 100%;
    background: #dadada;
    padding: 5px;
    border: 1px dashed;
    box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="gm-style-iw"><code>gm-style-iw</code></div>
</div>

It may be better practice to consider applying a class to these elements instead. As demonstrated above, inline style rules are quite persistent and are tricky to over-qualify without depending too much on the !important declaration.

Consider the following:

jQuery('.gm-style-iw').parent().addClass('contians-child');

Using a class selector as your identifier, you can circumvent this issue which may be sparing you some grey hairs down the line or wasted hours further on into your build.

Code Snippet Demonstration:

jQuery('.gm-style-iw').parent().addClass('contians-child');

.parent {
    width: 100%;
    background: #dadada;
    padding: 5px;
    border: 1px dashed;
    box-sizing: border-box;
}

.parent.contians-child {
    width: 220px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="gm-style-iw"><code>gm-style-iw</code></div>
</div>

How change div based on the child class?

1 Answers1