How to remove or modify a div tag using css when the div tag is not associated with any class or id

Question

Hi I have the following html code and this is part of the html

<div class="template-page-wrapper">
  <div class="templemo-content-wrapper">
    <div class="templatemo-content">
      <div class="templatemo-panels">
          <div id="dPopupBG" class="popup_BG"></div>
          <div style="height:100px;"><div>
          <div id="MainContent" class="msg" style="display: none;">  
          <div class="error display" style="display:none"><span></span></div>
          <div id="MainDocContent" class="flex"> 
             (and Here page content having more html details)
          </div>
      </div>
   </div>
  </div>
</div>

There is a more space between the header line and the MainDocContent. When I focus using inspect on the empty space then the inspect element is highlighted to below tag

  <div style="height:100px;"><div>

I tried the below css to adjust the height in the css file but the height is not getting modified

#dPopupBG+div{height:80px} 

I am trying to find the solution and learn in the process.

Answer 1

One option is as follows, with explanatory comments in the code:

/* a simple set of rules to remove default margin and padding
   from elements, and to size elements with an algorithm that
   includes padding and border sizes in the defined width: */
*,
 ::before,
 ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

div {
  /* to visualise the HTML structure: */ 
  border: 1px solid #000;
  /* to center the elements in the inline axis: */
  margin-inline: auto;
  /* to apply some spacing around the contents/descendants
     of an element: */
  padding: 0.5em;
  /* to show the parent-child hierarchy for visualisation: */
  width: 90%;
}

/* selects all <div> elements with a class attribue,
   and styles the ::before pseudo-element: */
div[class]::before {
  /* shows the contents of that attribute in the
     ::before pseuedo element; again for visualisation: */
  content: attr(class);
}

/* this selects all <div> elements with a "style" attribute
   with an attribute-value that includes the string 
   "height:100px", or "height: 100px" (note the white-space):*/
div[style*="height:100px"],
div[style*="height: 100px"]{
  /* purely to visualise the element if it's not successfully
     hidden: */
  background-color: red;
  /* "hiding" the element by setting its display to "none";
     this avoids having to use "!important" to override the
     height (which may have other consequences), but is fragile
     as it's based on a predetermined/known "height" property-value: */
  display: none;
}

<div class="template-page-wrapper">
  <div class="templemo-content-wrapper">
    <div class="templatemo-content">
      <div class="templatemo-panels">
        <div id="dPopupBG" class="popup_BG"></div>
        <div style="height:100px;">
          <div>
            <div id="MainContent" class="msg" style="display: none;">
              <div class="error display" style="display:none"><span></span></div>
              <div id="MainDocContent" class="flex">
                (and Here page content having more html details)
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

JS Fiddle demo.

References:

• attr().
• Attribute Selectors.
• border.
• ::before.
• content.
• margin-inline.

Answer 2

Override inline style is by using !important keyword With the CSS rule.

#dPopupBG + div
{
height:80px!important;
background:red;
}

<div class="template-page-wrapper">
  <div class="templemo-content-wrapper">
    <div class="templatemo-content">
      <div class="templatemo-panels">
          <div id="dPopupBG" class="popup_BG"></div>
          <div style="height:100px;"><div>
          <div id="MainContent" class="msg" style="display: none;">  
          <div class="error display" style="display:none"><span></span></div>
          <div id="MainDocContent" class="flex"> 
             (and Here page content having more html details)
          </div>
      </div>
   </div>
  </div>
</div>

Answer 3

In CSS you only can override an inline property by adding !important

#example+div{
  height:80px;
  background-color:orange!important;
}

<div id="example"></div>
<div style="background-color:black;"><div>