How do i style a div with no ID or Class, that is also inside of a dynamically changing ID div (JS m-CodePudding

To start, I know how to style a div with a dynamically changing ID, being created from a JS call. I also think I know how to style a div without an ID or Class. But combining the two I can't seem to figure it out.

Here's the structure and code

<div id="windowManager_75b500eb-3139-4670-9c36-7bf0cd88672a">
    <span id="htmlElement_window_c5888687-e892-4441-aa9c-0adb5b22bf1c">
        <div  id="window_c5888687-e892-4441-aa9c-0adb5b22bf1c_title">
            <span id="window_c5888687-e892-4441-aa9c-0adb5b22bf1c_titleBarText"></span>
        </div>
    <div id="window_c5888687-e892-4441-aa9c-0adb5b22bf1c_canvas">
        <span id="htmlElement_window_c5888687-e892-4441-aa9c-0adb5b22bf1c_canvas_RD"></span>
        <span id="htmlElement_window_c5888687-e892-4441-aa9c-0adb5b22bf1c_canvas_DD"></span>
        <span id="htmlElement_window_c5888687-e892-4441-aa9c-0adb5b22bf1c_canvas_RR"></span>
        <div>
            <span>✖</span>
        </div>
    </div>
</div>

The div in question is the final one that is housing the <span>x</span>. It is an button to close the modal window. I need to override the CSS values currently given to that field (from a JS script) using CSS. The tricky part for me is that every other div surrounding it have IDs that are dynamic and change, so I have to use certain CSS to call those.

Here is what I tried:

  [id^=window_] > div:nth-child(1), 
  [id^=window_ i] > div:nth-child(1),
  [id*=window_] > div:nth-child(1), 
  [id*=window_ i] > div:nth-child(1) {}

And tried

[id^=windowManager_][id^=window_] > div:nth-child(1), 
[id^=windowManager_][id^=window_ i] > div:nth-child(1),
[id^=windowManager_][id*=window_] > div:nth-child(1), 
[id^=windowManager_][id*=window_ i] > div:nth-child(1) {}

unfortunately, the above CSS didn't target anything.

CodePudding user response：

[id^=windowManager_] > div > div should work however the markup is missing a closing span which is messing up selectors

[id^="windowManager_"] > div > div {
  color: red;
}

<div id="windowManager_75b500eb-3139-4670-9c36-7bf0cd88672a">
    <span id="htmlElement_window_c5888687-e892-4441-aa9c-0adb5b22bf1c">
        <div  id="window_c5888687-e892-4441-aa9c-0adb5b22bf1c_title">
            <span id="window_c5888687-e892-4441-aa9c-0adb5b22bf1c_titleBarText"></span>
        </div>
    </span> <!-- ⭐️ this closing span is missing? -->
    <div id="window_c5888687-e892-4441-aa9c-0adb5b22bf1c_canvas">
        <span id="htmlElement_window_c5888687-e892-4441-aa9c-0adb5b22bf1c_canvas_RD"></span>
        <span id="htmlElement_window_c5888687-e892-4441-aa9c-0adb5b22bf1c_canvas_DD"></span>
        <span id="htmlElement_window_c5888687-e892-4441-aa9c-0adb5b22bf1c_canvas_RR"></span>
        <div>
            <span>✖</span>
        </div>
    </div>
</div>

CodePudding user response：

This is suggested answer, You have to tweak it a little to make it work but I am just giving an idea here

1- Try to get the div with the dynamic Ids that starts with window, it can be done via JQuery, this may return 0 or n div elements depends on how many div match the criteria

$('[id*="_windowManager_"]')

2- Assign a css class to your last div element[desired one] call the css class for instance window-manager, you can do this also using the jquery once you have the desired element

3- In your css define the following css

div.window-manager span {
  come css attributes 
}