I would like to restyle the nav id="jive-breadcrumb" with CSS. I want to have a different style when div class="jive-alert-type jive-alert-announcement" is present and when div class="jive-alert-type jive-alert-announcement" is not present.
I've gotten this for with the css sectors:
section#j-main div#jive-body nav#jive-breadcrumb ul { }
My second css selector
section#j-main :not(???) div#jive-body nav#jive-breadcrumb ul { }
How do I write the selector to be different?
Here is the section of css with
<section> <span> <script>...</script> </span> <div id="jive-alert-container"> <!-- the presence or absence of this inner div is what makes the two html fragments different --> <div id="jive-alert-global" role="marquee" class="clearfix"> </div> </div> <div id="jive-body" class="clearfix" role="main"> <nav id="jive-breadcrumb" aria-label="Communities Breadcrumbs" role="navigation"> <ul><li>Support Communities</li><li>The Lounge</li> <li>Full Host Bar</li> </ul> </nav> </div> </section>
Here is the case where div class="jive-alert-type jive-alert-announcement" is not present.
<section> <span> <script>...</script> </span> <!-- The following div doesn't have any tags in it. I need to detect this with a css selector to generate different css. --> <div id="jive-alert-container"> </div> <div id="jive-body" class="clearfix" role="main"> <nav id="jive-breadcrumb"> <ul><li>The Lounge</li> <li>Full Host Bar</li> </ul> </nav> ... </div> ... </section>
css presently does not select parent element. You can use MutationObserver to perform a task when an element is appended to or removed from DOM, or a specific parent element within DOM.
var jive = document.getElementById("jive-alert-container"); var breadcrumb = document.getElementById("jive-breadcrumb"); breadcrumb.classList.toggle("present"); var config = {childList: true}; var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { console.log(mutation); if (mutation.addedNodes.length && mutation.addedNodes[0].id === "jive-alert-global") { breadcrumb.classList.toggle("present"); } if (mutation.removedNodes.length && mutation.removedNodes[0].id === "jive-alert-global") { breadcrumb.classList.toggle("present"); } }) }); observer.observe(jive, config); var clone = jive.querySelector("#jive-alert-global").cloneNode(true); setTimeout(function() { jive.querySelector("#jive-alert-global").remove(); setTimeout(function() { jive.appendChild(clone); }, 5000); }, 5000)
#jive-breadcrumb.present { color: green; } #jive-breadcrumb:not(.present) { color: blue; }
<section> <span> <script></script> </span> <div id="jive-alert-container"> <!-- the presence or absence of this inner div is what makes the two html fragments different --> <div id="jive-alert-global" role="marquee" class="clearfix"> jive alert global </div> </div> <div id="jive-body" class="clearfix" role="main"> <nav id="jive-breadcrumb" aria-label="Communities Breadcrumbs" role="navigation"> <ul> <li>Support Communities</li> <li>The Lounge</li> <li>Full Host Bar</li> </ul> </nav> </div> </section>
The css selector section#j-main implies that there is an html element with the given id: <section id="j-main">.
Replacing the section you want to modify with <section id="j-main"> should make that section respond to the css block you have defined above.
Also note that you can only have one unique id per element on the page, so the jive-body, and jive-breadcrumb ids should be changed to classes.
This should yield: section#j-main div.jive-body nav.jive-breadcrumb ul { css customizations here } ...
<div class="jive-body" class="clearfix" role="main"> <nav class="jive-breadcrumb" aria-label="Communities Breadcrumbs" role="navigation"> <ul><li>Support Communities</li><li>The Lounge</li> <li>Full Host Bar</li> </ul> </nav> </div> </section> ... <div class="jive-alert-type jive-alert-announcement" is not present. <!-- This section will not have the changes --> <section> <div class="jive-body" class="clearfix" role="main"> <nav class="jive-breadcrumb"> <ul><li>The Lounge</li> <li>Full Host Bar</li> </ul> </nav> ... </div> ... </section>
翻译