calebmct calebmct - 1 year ago 56
CSS Question

Apply !important CSS style to div, not children

I'm working in Confluence, and I'm trying to create some

CSS
styling for
UI boxes
(made up of
divs
that I can change using
!important
) without carrying through to
child divs
. Since other macros (
divs
with default styling) can be nested inside these
UI boxes
, the
!important
styles are carried through unintentionally.

To be more specific - I have a yellow
background-color
in the
div.rwui_type_note
. Inside is another
div
when a user creates a panel macro inside the
Note UI box
. The parent
div
(UI Note) styling is making the text
background
in a child
div
(Panel) yellow.

I need the
div.panel-content
to keep it's default styling as defined by Confluence, or as manually defined by a user in the macro when using the page editor.

Here is the custom CSS for the Note UI Box:

.rwui_type_note, .rwui_type_note p
{
background-color: #FFDC1E !important; /*Needs to be important to override defaults*/
color: black!important;
}


Here is how Confluence creates the
HTML
when the a white bg panel is created inside a Note UI box:

<div class="rwui_text_box rwui_text_small rwui_type_note rwui_id_caebfd70-f9c3-489b-9f95-c01c1aa13f36 ">
<span class="rwui_icon rwui_iconfont_note"></span>
<span class="rwui_content rwui_body rwui_has_icon ">
<p>Text in a Note UI Box</p>
<div class="panel" style="background-color: white;border-color: orange;border-width: 1px;">
<div class="panelContent" style="background-color: white;">
<p>Text in a Panel - user set to white background</p>
</div>
</div>
</span>
</div>


Here is what it looks like:
Screenshot - UI Box with Panel

Answer Source

If I understand your goal correct, you can do it by inheriting parent bg color property

.rwui_type_note,
.rwui_type_note p {
  background-color: #FFDC1E !important;
  /*Needs to be important to override defaults*/
  color: black !important;
}

.panelContent p {
  background-color: inherit !important;
}
<div class="rwui_text_box rwui_text_small  rwui_type_note  rwui_id_caebfd70-f9c3-489b-9f95-c01c1aa13f36 ">
  <span class="rwui_icon rwui_iconfont_note"></span>
  <span class="rwui_content rwui_body rwui_has_icon ">
        <p>Text in a Note UI Box</p>
        <div class="panel" style="background-color: white;border-color: orange;border-width: 1px;">
            <div class="panelContent" style="background-color: white;">
                <p>Text in a Panel - user set to white background</p>
            </div>
        </div>
    </span>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download