Why does my CSS stylesheet not reflect when I pass conditional radio buttons through jQuery/javascript?

Question

I have been struggling with this for weeks now and I don't know how to get past it.

I have a pretty nice CSS style sheet to use with a form. The form has a conditional yes/no radio box that I finally got to work using javascript BUT the CSS styling is completely eliminated. Can someone please help me. I'm beyond confused at this point.

 html, body { width: 100%; height: 100%; background: #D2D6DB } form { display: block; margin: 30px; overflow: hidden; background: #FFF; border: 1px solid #E4E4E4; border-radius: 5px; font-size: 0; } @media(min-width:800px){ form > div { display: inline-block; } form > div.col-submit { display: block; } } form > div > label { display: block; padding: 10px 20px 10px; vertical-align: top; font-family: Source Sans Pro, Arial, sans-serif; font-size: 12px; font-weight: 600; text-transform: uppercase; color: #7f7f7f; cursor: pointer; } form > div > info { display: block; padding: 10px 20px 10px; vertical-align: top; font-family: Source Sans Pro, Arial, sans-serif; font-size: 14px; font-weight: 400; color: #1d1d1d; cursor: pointer; } /*form > div > checkLabel { display: block; padding-left: 15px; /*font-family: Source Sans Pro, Arial, sans-serif; font-size: 14px; font-weight: 400; color: #1d1d1d; cursor: pointer; text-indent:-15px; } form > div > checkLabel> input { width:13px; height: 13 px; padding:0; margin:0; vertical align: bottom; position:relative; top:-1px; *overflow:hidden; } */ form > div.col-2, form > div.col-3, form > div.col-4, form > div.col-5, form > div.col-6, form >div.col-7, form > div.col-8,form > div.col-1, form > div.col-11{ border-bottom: 1px solid #E4E4E4; } @media(min-width: 800px){ form > div.col-2, form > div.col-3, form > div.col-4, form > div.col-5,form > div.col-6, form >div.col-7, form > div.col-8, form > div.col-1, form > div.col-11 { box-shadow: 1px 1px #E4E4E4; border: none; } } @media(min-width:800px){ form > div.col-2 { width: 50% } form > div.col-3 { width: 33.3333333333% } form > div.col-4 { width: 25% } form > div.col-1 {width: 100%} form > div.col-5 {width: 20%} form > div.col-6 {width: 16.6666666666%} form > div.col-7 {width:30%} form > div.col-8 {width:10%} form > div.col-11 {width:100%} } form > div > label > input { display: inline-block; position: relative; width: 100%; height: 27px; line-height: 27px; margin: 5px -5px 0; padding: 7px 5px 3px; border: none; outline: none; border-radius: 3px; background: transparent; font-size: 14px; font-weight: 200; opacity: .66; transition: opacity .3s, box-shadow .3s; } form > div.col-submit { text-align: center; padding: 20px; } form > div.col-1 { border: 1px solid #E4E4E4; background: #051938 ; font-size: 14px; padding: 1px; display: block; width: 100%; cursor: pointer; border: 0; border-radius: 5px; text-transform: uppercase; } @media(min-width: 800px){ form > div.col-submit button { width: 30%; margin: 0 auto; } } form > div.col-submit button:hover { background: #7f7f7f; } form > div > label > select { display: block; width: 100%; margin: 16px 0 8px; padding: 0; background: transparent; border: none; outline: none; font-size: 14px; font-weight: 200; opacity: .33; } form > div > label > input:focus, form > div > label > select:focus { opacity: 1; box-shadow: 0 3px 4px rgba(0, 0, 0, .15); } /*input[type ="date"]{ display: block; width: 100%; margin: 16px 0 -3px; padding: 0; background: transparent; border: none; outline: none; font-size: 14px; font-weight: 200; opacity: .33; height: 27px; line-height: 27px; }*/ /*input[type ="date"]{ display: block; width: 100%; margin: 5px -5px 0; padding: 7px 5px 2px; background: transparent; border: none; outline: none; font-size: 14px; font-weight: 200; opacity: .33; } input[type "radio"]{ display: block; width: 100%; margin: 5px -5px 0; padding: 7px 5px 3px; background: transparent; border: none; outline: none; font-size: 14px; font-weight: 200; opacity: .33; }*/ .sub-questions { margin: 0 0 1.5em 1em; padding: 0 0 0 1em; border-left: 1px solid #cccccc; } li { list-style-type: none; } form > div > label > input[type="date"] { display: block; width: 100%; margin: 13px 0 3px; padding: 0; background: transparent; border: none; outline: none; font-size: 14px; font-weight: 200; opacity: .33; } form > div > label > input[type="radio"] { display: block; width: 100%; margin: 16px 0 8px; padding: 0; background: transparent; border: none; outline: none; font-size: 14px; font-weight: 200; opacity: .33; } fieldset, legend { border:none; margin:0; padding:0; } /*button { background-color: #1d1d1d; color: white; font-weight: bold; box-shadow: none; text-transform: uppercase; }*/ .control:checked ~ .conditional, #yes:checked ~ .conditional, #required-2:checked ~ .conditional #option-2:checked ~ .conditional { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } .control:not(:checked) ~ .conditional, #yes:not(:checked) ~ .conditional, #required-2:not(:checked) ~ .conditional, #option-2:not(:checked) ~ .conditional { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } 

 <?php include("home.php"); ?> <!DOCTYPE html> <html> <head> <title>Personal Health Questionnaire</title> <meta name="description" content="Personal Health Questionnaire"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="/style.css"> </head> <body> <header> <h1> <center>Employee Eligibility Statement</center> </h1> </header> <main> <form action="home.php" method = "POST"> <!--Question 1--> <div class="col-1"> <label> </label> </div> <div class ="col-11"> <label><b>1. </b></label> <info>Answer this thing <p></p> <li> <input type ="radio" name = "yesno" value ="Yes" tabindex = "8" onclick="javascript:yesnoCheck();" id="yesCheck"/> Yes <input type ="radio" name = "yesno" value ="No" tabindex = "8" onclick="javascript:yesnoCheck();" id ="noCheck"/> No <b> &nbsp; &nbsp; &nbsp; yes or no </b></li> <div id="ifYes" style="display:none"> <!-- conditional --> <div class ="col-4"> <label>Person with the condition: <input type ="text" placeholder="First and last name"/></label> </div> <div class ="col-4"> <label>Exact diagnosis: <input type ="text" placeholder = "Diagnosis"/></label> </div> <div class ="col-4"> <label>Date diagnosed: <input type ="date" /></label> </div> <div class ="col-4"> <label>Date last treated: <input type ="date" /></label> </div> <div class ="col-11"> <info><b>List all medication(s) prescribed for this condition:</b></info> </div> <div class = "col-4"> <label><center>Name:</center> <input type = "text" placeholder="First medication"/> <input type = "text" placeholder="Second medication"/> <input type = "text" placeholder="Third medication"/> </label> </div> <div class = "col-4"> <label><center>Dosage:</center> <input type = "text" placeholder="Dosage for first medication"/> <input type = "text" placeholder="Dosage for second medication"/> <input type = "text" placeholder="Dosage for third medication"/> </label> </div> <div class = "col-4"> <label><center>Frequency:</center> <input type = "text" placeholder="Frequency of first medication"/> <input type = "text" placeholder="Frequency of second medication"/> <input type = "text" placeholder="Frequency of third medication"/> </label> </div> <div class = "col-4"> <label><center>Currently taking?</center> <select name ="CT1" tabindex =""> <option value = "Yes">Yes</option> <option value = "No">No</option> </select> <select name ="CT2" tabindex =""> <option value = "Yes">Yes</option> <option value = "No">No</option> </select> <select name ="CT3" tabindex =""> <option value = "Yes">Yes</option> <option value = "No">No</option> </select> </label> </div> </div> </info> </div> <!-- End CONDITIONAL --> <!-- how i want it to look--> <div class ="col-4"> <label>Person with the condition: <input type ="text" placeholder="First and last name"/></label> </div> <div class ="col-4"> <label>Exact diagnosis: <input type ="text" placeholder = "Diagnosis"/></label> </div> <div class ="col-4"> <label>Date diagnosed: <input type ="date" /></label> </div> <div class ="col-4"> <label>Date last treated: <input type ="date" /></label> </div> <div class ="col-11"> <info><b>List all medication(s) prescribed for this condition:</b></info> </div> <div class = "col-4"> <label><center>Name:</center> <input type = "text" placeholder="First medication"/> <input type = "text" placeholder="Second medication"/> <input type = "text" placeholder="Third medication"/> </label> </div> <div class = "col-4"> <label><center>Dosage:</center> <input type = "text" placeholder="Dosage for first medication"/> <input type = "text" placeholder="Dosage for second medication"/> <input type = "text" placeholder="Dosage for third medication"/> </label> </div> <div class = "col-4"> <label><center>Frequency:</center> <input type = "text" placeholder="Frequency of first medication"/> <input type = "text" placeholder="Frequency of second medication"/> <input type = "text" placeholder="Frequency of third medication"/> </label> </div> <div class = "col-4"> <label><center>Currently taking?</center> <select name ="CT1" tabindex =""> <option value = "Yes">Yes</option> <option value = "No">No</option> </select> <select name ="CT2" tabindex =""> <option value = "Yes">Yes</option> <option value = "No">No</option> </select> <select name ="CT3" tabindex =""> <option value = "Yes">Yes</option> <option value = "No">No</option> </select> </label> </div> <!-- END how i want it to look--> <div class = "col-submit"> <button type= "submit" name = "submit" value = "submit">Submit</button> </div> </form> </main> <script type="text/javascript"> function yesnoCheck() { if (document.getElementById('yesCheck').checked) { document.getElementById('ifYes').style.display = 'block'; } else document.getElementById('ifYes').style.display = 'none'; cssLink.href="style.css"; cssLink.rel="stylesheet"; cssLink.type="text/css"; } </script> <!-- Your web-app is https, so your scripts need to be too --> <script src="https://code.jquery.com/jquery-2.2.1.min.js" integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00=" crossorigin="anonymous"></script> <script src="/custom.js"></script> </body> </html> 

Fiddle

Answer 1

Your CSS selectors are different for both forms. Check the path from the <form> to the <label> for each. It's different.

For example, on the form that works the css selector is

form > div > label

But the path from the Yes form is:

form > info > div > div > label

Need to extend your CSS rules to account for that path.

Answer 2

Your fiddle is updated, before you click on the link, two things:

1. Your HTML was duplicated hence the "style break"
2. You use a lot the symbol > in your CSS I suggest to NOT use excesively, the > means "direct children of" example:

<form>
   <div> <!-- The symbol > in css will affect this div only-->
       <div> <!-- Here the symbol > is not taking effect as this is not direct children of form-->
   </dv>

And finally the link to the fiddle

Hope this is helpful...