CODEWITHSUNDEEP
css
daz13
daz13

Reputation: 245

How to override property of css class for individual dialog windows

I'm working in a component based framework that automatically styles a modal dialog window's header with a particular class called window-header.

I can adjust that class as I see fit in an external stylesheet:

.window-header {
    opacity: 0;
    position: fixed;
    width: 10%;
    top: -2px!important;
    z-index: 1;
    height: 25px;
}

In this case, the header is being hidden, but utilized so the user can drag the dialog window around the screen. It's a click and drag area on the dialog window. For certain dialog windows, I need to change the width property of this draggable area.

I can dynamically add a css class to these certain window's div, such as <div class="_12">. And here is a simplified representation of the html:

<div class="_12">
  <div>
    <div class="window-header">

I have tried variations of the following in the same external css file (and it must be defined in the same external css):

._12 > .window-header {
   width: 95% !important;
}

Variations included using two '>' between ._12 and window-header, and moving the ._12 > window-header definition above the 'main' window-header definition.

However the width is not getting overridden.

The question - What is the solution? or is it even possible to override the width property of window-header for this specific situation?

EDIT - adjusted as suggested to ._12 > .window-header

EDIT 2 - adding DevTools screenshot to show width not getting overridden

EDIT 3 - expanded view of DevTools screenshot

enter image description here

Upvotes: 0

Views: 428

Answers (3)

Dan Mullin
Dan Mullin

Reputation: 4435

You are being too specific on your selector. You are also missing the class identifier on window-header. Needs to be .window-header Just use:

._12 .window-header

Alternatively, you could use this more verbose selector:

._12 > * > .window-header

If you're still having issues, check out the CSS in DevTools to see where it might be getting overridden. On this page, you can see the min-width property getting overridden and where it is happening.

enter image description here

Upvotes: 0

s.kuznetsov
s.kuznetsov

Reputation: 15213

Is this what you wanted? 1. You don't need to put a ">" sign. It is enough to write as I wrote in the example. 2. You forgot to put a full stop before window-header. This is a class.

.window-header {
    opacity: 0;
    position: fixed;
    width: 10%;
    top: -2px!important;
    z-index: 1;
    height: 25px;
    
    background-color: green;
}

._12 .window-header {
   width: 95%;
   opacity: 1;
}
<div class="_12">
  <div>
    <div class="window-header"></div>
  </div>
</div>

Upvotes: 0

JHeth
JHeth

Reputation: 8376

Without knowing what framework you're using I'd guess you just need a higher specificity score for the selector you want to override the other one.

If the selector in the stylesheet is just .window-header then it scores a 10 in specificity, if your markup is what you showed above then this would work ._12 div .window-header since it would score 21 and have a higher level of specificity. You can learn more about how specificity is calculated here and there's even a handy calculator for it.

Upvotes: 2

Related Questions