[CSS Help] Show span based on attributes value

HTML &lt;div&gt; &lt;input type="checkbox" class="condition-display" name="attr_condition_1" value="1"&gt; &lt;span class="sheet-body" &gt;condition_1.&lt;/span&gt; &lt;/div&gt; &lt;div&gt; &lt;input type="number" name="attr_condition_7" class="condition-display" value="0" /&gt; &lt;span class="sheet-body"&gt;condition_7.&lt;/span&gt; &lt;/div&gt; ........................ &lt;input class="labelcheck" type="checkbox" name="attr_condition_1" value="1" /&gt; &lt;span class="lbl"&gt;condition_1&lt;/span&gt; &lt;br/&gt; &lt;input type="number" name="attr_condition_7" class="nospin underlined spsml" value="0" /&gt; &lt;input type="hidden" name="attr_condition_7" value="0" /&gt; &lt;span class="lbl"&gt;condition_7.&lt;/span&gt; &lt;br/&gt; CSS: input.sheet-condition-display:not([value="0"]) ~ span.sheet-body { float: left; } input.sheet-condition-display[value="0"] ~ span.sheet-body { display: none; } input.sheet-condition-display { display: none; } I try the&nbsp;CSS Wizardry and it is work.when&nbsp; the checkbox is&nbsp;checked,it can show the span. <a href="http://jsfiddle.net/LTnd7/" rel="nofollow">http://jsfiddle.net/LTnd7/</a> Is it prossble show span&nbsp;&nbsp; &nbsp; when&nbsp; attr_condition_1&nbsp; attr_condition_7&nbsp; is not value=0?

In order to do display based on the value of an input, you need to make a duplicate of the input that is: type='hidden' hidden type inputs update their value in the DOM when it changes, unlike other input types which only display their default value (or their checked value in the case of radios and checkboxes) in the DOM regardless of what their actual value is. Your code would then look like this: HTML &lt;div&gt; &lt;input type="checkbox" name="attr_condition_1" value="1"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type='hidden' class='condition-display' name='attr_condition_1" value='1'&gt; &lt;span class="sheet-body" &gt;condition_1.&lt;/span&gt; &lt;/div&gt; &lt;div&gt; &lt;input type="number" name="attr_condition_7" value="0" /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type='hidden' name='attr_conditiion_7' class='condition-display' value='0'&gt; &lt;span class="sheet-body"&gt;condition_7.&lt;/span&gt; &lt;/div&gt; ........................ &lt;input class="labelcheck" type="checkbox" name="attr_condition_1" value="1" /&gt; &lt;span class="lbl"&gt;condition_1&lt;/span&gt; &lt;br/&gt; &lt;input type="number" name="attr_condition_7" class="nospin underlined spsml" value="0" /&gt; &lt;input type="hidden" name="attr_condition_7" value="0" /&gt; &lt;span class="lbl"&gt;condition_7.&lt;/span&gt; &lt;br/&gt; CSS: input.sheet-condition-display:not([value="0"]) ~ span.sheet-body {/*This should now work since the hidden's value will actually update. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;However, I've noticed that the value= syntax can be finicky sometimes, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;you may need to switch to [value*="0"] instead which does a search of &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;the value for the indicated substring*/ float: left; } input.sheet-condition-display [value="0"] ~ span.sheet-body {/*remove the value reference here, the :not([value="0"]) will make the above more &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;specific than this and will therefore overwrite it anyway.*/ display: none; } input.sheet-condition-display {/*You can probably remove this, and just remove the non-hidden type inputs. I left them in minus their class as &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;I wasn't sure what you needed*/ display: none; } Hope that helps, Scott

I Scott C. said: In order to do display based on the value of an input, you need to make a duplicate of the input that is: type='hidden' hidden type inputs update their value in the DOM when it changes, unlike other input types which only display their default value (or their checked value in the case of radios and checkboxes) in the DOM regardless of what their actual value is. Your code would then look like this: HTML &lt;div&gt; &lt;input type="checkbox" name="attr_condition_1" value="1"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type='hidden' class='condition-display' name='attr_condition_1" value='1'&gt; &lt;span class="sheet-body" &gt;condition_1.&lt;/span&gt; &lt;/div&gt; &lt;div&gt; &lt;input type="number" name="attr_condition_7" value="0" /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type='hidden' name='attr_conditiion_7' class='condition-display' value='0'&gt; &lt;span class="sheet-body"&gt;condition_7.&lt;/span&gt; &lt;/div&gt; ........................ &lt;input class="labelcheck" type="checkbox" name="attr_condition_1" value="1" /&gt; &lt;span class="lbl"&gt;condition_1&lt;/span&gt; &lt;br/&gt; &lt;input type="number" name="attr_condition_7" class="nospin underlined spsml" value="0" /&gt; &lt;input type="hidden" name="attr_condition_7" value="0" /&gt; &lt;span class="lbl"&gt;condition_7.&lt;/span&gt; &lt;br/&gt; CSS: input.sheet-condition-display:not([value="0"]) ~ span.sheet-body {/*This should now work since the hidden's value will actually update. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;However, I've noticed that the value= syntax can be finicky sometimes, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;you may need to switch to [value*="0"] instead which does a search of &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;the value for the indicated substring*/ float: left; } input.sheet-condition-display [value="0"] ~ span.sheet-body {/*remove the value reference here, the :not([value="0"]) will make the above more &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;specific than this and will therefore overwrite it anyway.*/ display: none; } input.sheet-condition-display {/*You can probably remove this, and just remove the non-hidden type inputs. I left them in minus their class as &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;I wasn't sure what you needed*/ display: none; } Hope that helps, Scott It's work! Thank you very much.

Happy to help

Sorry, there is some problem now. &lt;div&gt; &lt;input type="hidden" class="sheet-condition-display" name="attr_condition_1" value="1"&gt; &lt;span class="sheet-body" &gt;condition_1.&lt;/span&gt; &lt;/div&gt; &lt;div&gt; &lt;input type="hidden" name="attr_conditiion_7" class="sheet-condition-display"value="0"&gt; &lt;span class="sheet-body"&gt;condition_7.&lt;/span&gt; &lt;/div&gt; &lt;br/&gt;........................&lt;br/&gt; &lt;input type="checkbox" name="attr_condition_1" value="1" /&gt; &lt;span &gt;condition_1&lt;/span&gt; &lt;br/&gt; &lt;input type="number" name="attr_condition_7" value="0" /&gt; &lt;span &gt;condition_7.&lt;/span&gt; &lt;br/&gt; input.sheet-condition-display:not([value*="0"]) ~ span.sheet-body { float: left; } input.sheet-condition-display ~ span.sheet-body { display: none; } I try above code, but it is not working. The area in&nbsp; span class="sheet-body"&nbsp; &nbsp; just hide. It would not show when i check the value or checked the checkbox. I have&nbsp; try&nbsp;value*="0" and&nbsp;value="0". But it is not working too. input.sheet-condition-display:not([value="0"]) ~ span.sheet-body { float: left; } input.sheet-condition-display[value="0"] ~ span.sheet-body { display: none; } But if i use above code. The area will show when i create a new character.Because&nbsp; value &nbsp;is not not gen yet. Then i checked or change the number. The hide function will work fine. Because it can find the value is 0 or not. So why was the first cant use. I am so&nbsp;confused......

There's a typo in your hidden condition_7 box: &lt;input type="hidden" name=" attr_conditiion_7 " class="sheet-condition-display"value="0"&gt; There's an extra i in the name. Also, just a formatting question: I'm wondering why you dont have the hidden copies of the inputs right next to the non-hidden version. Some of those spans and divs look a bit redundant.

G G said: There's a typo in your hidden condition_7 box: &lt;input type="hidden" name=" attr_conditiion_7 " class="sheet-condition-display"value="0"&gt; There's an extra i in the name. Also, just a formatting question: I'm wondering why you dont have the hidden copies of the inputs right next to the non-hidden version. Some of those spans and divs look a bit redundant. I try to fix extra&nbsp; i . And not working. Formatting question....Because i am fresh on the character? Back to the css question. &lt;div&gt; &lt;input type="checkbox" class="sheet-arrow" value="1"/&gt; &lt;h4&gt;Stuff and Things&lt;/h4&gt; &lt;div class="sheet-body"&gt; &lt;input type="text" placeholder="Name" name="attr_name"/&gt;&lt;br&gt; &lt;input type="text" placeholder="Description" name="attr_description"/&gt; &lt;input type="number" min="0" max="20" value="0" name="attr_level"/&gt;&lt;br&gt; &lt;textarea placeholder="Fulltext" name="attr_bio"&gt;&lt;/textarea&gt; &lt;/div&gt; &lt;/div&gt; input.sheet-arrow { float: left; } input.sheet-arrow:checked ~ div.sheet-body { display: none; } It is work, on the Roll20 CSS Wizardry. &lt;div&gt; &lt;input type="number" class="sheet-arrow" value="0" /&gt; &lt;h4&gt;Stuff and Things&lt;/h4&gt; &lt;div class="sheet-body"&gt; &lt;input type="text" placeholder="Name" name="attr_name"/&gt;&lt;br&gt; &lt;input type="text" placeholder="Description" name="attr_description"/&gt; &lt;input type="number" min="0" max="20" value="0" name="attr_level"/&gt;&lt;br&gt; &lt;textarea placeholder="Fulltext" name="attr_bio"&gt;&lt;/textarea&gt; &lt;/div&gt; &lt;/div&gt; input.sheet-arrow { float: left; } input.sheet-arrow:not([value="0"]) ~ div.sheet-body { display: none; } If i change the checkbox to number, and use&nbsp; not([value="0"]). &nbsp;It is not working. &nbsp;

See my original post about inputs not updating their values in the DOM, which is what the CSS checks. If you're going to use [value="#"], you must use a hidden type input.

Scott C. said: See my original post about inputs not updating their values in the DOM, which is what the CSS checks. If you're going to use [value="#"], you must use a hidden type input. &lt;div&gt; &lt;input type="number" name="attr_nameABC" value="0" /&gt; &lt;input type="hidden" class="sheet-arrow" name="attr_nameABC"value="0" /&gt; &lt;h4&gt;Stuff and Things&lt;/h4&gt; &lt;div class="sheet-body"&gt; &lt;input type="text" placeholder="Name" name="attr_name"/&gt;&lt;br&gt; &lt;input type="text" placeholder="Description" name="attr_description"/&gt; &lt;input type="number" min="0" max="20" value="0" name="attr_level"/&gt;&lt;br&gt; &lt;textarea placeholder="Fulltext" name="attr_bio"&gt;&lt;/textarea&gt; &lt;/div&gt; &lt;/div&gt; input.sheet-arrow { float: left; } input.sheet-arrow:not([value="0"]) ~ div.sheet-body { display: none; } Not working.....Oh my God.