HTML - Apply CSS - with parent Div with id to child div with CSS

Question

I am trying to apply CSS for parent div with ID to child div with CSS.

Need to apply

ui-selectlistbox-listcontainer class div height as 100% with parent div id="tableForm:mainTable:selectFilterMenu-crop". And this code child div is dynamically created. So need to apply height = 100% thow CSS only.

Please suggest me to apply css for child div height as 100%,

HTML:

<div id="tableForm:mainTable:selectFilterMenu-crop" class="ui-selectmanymenu ui-inputfield ui-widget ui-widget-content ui-corner-all" style="width:165px; height:270px">
<div class="ui-selectlistbox-listcontainer" heigth="200px">
</div>
</div>

CSS: // Not working

#tableForm:mainTable:selectFilterMenu-crop div.ui-selectlistbox-listcontainer {
    height: 100% !important;
}

Your id disobeys the w3c specification. You should fix it first. https://www.w3.org/TR/html401/types.html#type-name — obfish, Dec 26 '18 at 08:47
And divs do not have the `height` attribute, and if they did, you'd have to spell it correctly. — Mr Lister, Dec 26 '18 at 08:57
@obfish You are linking to an older version of the standard. `id` is allowed to have any value, as long as it is unique, is not the empty string, and does not contain space characters. See https://www.w3.org/TR/html5-diff/#changed-attributes — Mr Lister, Dec 26 '18 at 09:05

Itay Gal · Answer 1 · 2018-12-26T09:29:57.933

0

The browser will tries to read the part after : as pseudo-element. For example, if you have an id my-id and you want to address the before pseudo-element, you'll write

#my-id:before

Try to replace : with -

#tableForm-mainTable-selectFilterMenu-crop div.ui-selectlistbox-listcontainer {
  height: 100% !important;
  background-color: gray;
}

<div id="tableForm-mainTable-selectFilterMenu-crop" class="ui-selectmanymenu ui-inputfield ui-widget ui-widget-content ui-corner-all" style="width:165px; height:270px">
  <div class="ui-selectlistbox-listcontainer" heigth="200px">
  </div>
</div>

edited Dec 26 '18 at 09:29

answered Dec 26 '18 at 08:54

Itay Gal

10,706
6
36
75

1

I don't know why this answer gets downvoted, because it correctly explains the source of the problem, and it provides a solution that works. – Mr Lister Dec 26 '18 at 12:40

score 0 · Accepted Answer · answered Dec 26 '18 at 09:15

You need to escape the :

#tableForm\:mainTable\:selectFilterMenu-crop {
  border:2px solid;
}

#tableForm\:mainTable\:selectFilterMenu-crop div.ui-selectlistbox-listcontainer {
    height: 100% !important;
    background:red;
}

<div id="tableForm:mainTable:selectFilterMenu-crop" class="ui-selectmanymenu ui-inputfield ui-widget ui-widget-content ui-corner-all" style="width:165px; height:270px">
<div class="ui-selectlistbox-listcontainer" >
</div>
</div>

HTML - Apply CSS - with parent Div with id to child div with CSS

2 Answers2