Hide div created by script with CSS

Question

The following code creates an html chatbox with a link in the top panel that has multiple child divs.
div id=cgroup; div id=CBG; div id=CGW; div id=HEAD. Where cgroup is the parent of CBG which is the parent of CGW which is the parent of the div I would like to hide.
How do I use css to "display = none" for the child div id=HEAD exclusively?

<script id="cid0020000101807397328" data-cfasync="false" async src="//st.chatango.com/js/gz/emb.js" style="width: 603px;height: 471px;">
{"handle":"1shotgg","arch":"js","styles":{"a":"000000","b":100,"c":"a0a0a0","d":"FFFFFF","e":"202020","g":"bbbbbb","h":"202020","j":"c0c0c0","k":"0084ef","l":"606060","m":"0084ef","n":"FFFFFF","p":"10","q":"000000","r":100,"pos":"br","cv":1,"cvfntsz":"14px","cvbg":"3366ff","cvw":600,"cvh":30,"surl":0,"allowpm":0,"cnrs":"0.35","ticker":1,"fwtickm":1}}</script>

Obsidian Age · Answer 1 · 2017-07-09T23:36:34.150

0

Assuming that your script creates an element with the structure <div id="head">, you can target it directly with the following syntax:

#head {
  display: none;
}

Despite the fact that you should never have two elements with the same ID on the same page, you can ensure that this hides only the target <div> by getting a little more specific and using the > direct child selector:

#cgroup > #CBG > #CGW > #head {
  display: none;
}

The above will only target a <div> with an ID of <head>, where the parent has an ID of CGW, and that has a parent ID of CBG, and that has a parent ID of cgroup.

Hope this helps! :)

edited Jul 09 '17 at 23:36

answered Jul 09 '17 at 23:31

Obsidian Age

41,205
10
48
71

I thought it would be that easy way before posting this question because the script does in fact create the child div HEAD that I want to hide. Unfortunately that wasn't the resolution. Thinking it might be case sensitive I also tried the marker #HEAD to no avail . – Jerry Christensen Jul 09 '17 at 23:42
Are you running the script in an ``? If so, it's impossible to style the code from another website due to [**Cross-Origin Resource Sharing**](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS). You may find that the chatbox offers some customisation options in that case. – Obsidian Age Jul 09 '17 at 23:45

Mate Solymosi · Accepted Answer · 2017-07-09T23:44:51.363

Assuming that this loads the chatbox inside of an <iframe>, there is not much you can do to influence the style of individual elements on the page loaded into the <iframe>.

Any CSS applied to the parent page will not apply to the page within the frame. Similarly, if you try to alter the document within the frame with JavaScript, you are likely to get a security exception — the browser's Same Origin Policy will prevent your JavaScript code from accessing pages loaded from a different domain:

To read more, refer to this question:
Ways to circumvent the same-origin policy

What's the solution then?

You should try to see if the chatbox plugin provides the kind of customization you are looking for as a configuration option or something similar.

Hide div created by script with CSS

2 Answers2