1

I'm currently customizing the CSS of my Angular app that uses PrimeNG. I have a panel which I've changed the header color to red for. However, any nested panels within this panel ALSO get their headers changed to red. Is this expected behavior? The default color is gray - I expected those nested panel headers to appear gray as well.

My css is simple:

.redColoredPanel .ui-panel-titlebar {
    background-color: red
}

and I create my panels like this:

<p-panel styleClass="redColoredPanel" header="Panel Header" [collapsed]="true" [toggleable]="true">

    <!--I expect this nested panel's header to be the default, 
    but the 'redColoredPanel' class is applied to it as well.-->
    <p-panel header="Actions" [collapsed]="true" [toggleable]="true"><p-panel>

<p-panel>
Roka545
  • 3,404
  • 20
  • 62
  • 106

1 Answers1

0

Changing my css to:

.redColoredPanel > .ui-panel-titlebar {
    background-color: red
}

solved my issue.

For reference: What does the ">" (greater-than sign) CSS selector mean?

Roka545
  • 3,404
  • 20
  • 62
  • 106