0

I want to add a style to an adjacent sibling div element which is next to the div with the classes 'top_bar' and 'hide'.

The html code is as shown below,

<body class="active">
    <div id="root">
        <div class="topmost_bar_element">
            <header class="topmost_bar hide"></header>
            <section class="topmost_bar_main">
                <div class="topmost_bar_content">
                    <div class="top_bar hide">
                    <div style="display: flex; height: calc(100% - 28px);"></div>
                </div>
            </section>
        </div>
    </div>
</body>

I have tried adding a style to the adjacent sibling like below,

body.active .top_bar.hide + div {
    height: calc(100% - 0px);
}

But this rule is overridden by the div style height property which is something like below,

    height: calc(100% - 28px);

Without using !important how can I fix this? Thanks.

Burcea Bogdan Madalin
  • 192
  • 1
  • 2
  • 7
niina
  • 119
  • 2
  • 15
  • 2
    no, your only way is to use !important – Temani Afif May 09 '19 at 13:00
  • 2
    Without using `!important`, there is _nothing_ more specific than the `style` attribute, ever. – Amadan May 09 '19 at 13:02
  • 1
    Sadly yes. Inline style override those from a stylesheet. but a stylesheet with `!important` can override inline styles. If an inline style has `!important`, then you are out of luck. – Chris Barr May 09 '19 at 13:03
  • 1
    Is there any need for the style="display: flex; height: calc(100% - 28px);" to be specified inline? If not, you can specify those properties in a class like .myClass in the same place you also specify your "body.active .topbar.hide + div" CSS, but make sure to place the ".myClass" style before this one. This way, your more specific style will be applied when appropriate. Here's a paste of what I mean: [pastebin](https://pastebin.com/0UJQxM50) – Burcea Bogdan Madalin May 09 '19 at 13:28

0 Answers0