title: Circumvent id selectors in a checkbox hack
body: <p>I've posted about this project before.  Twice, actually.  And while the answers have helped me to better understand my situation, they haven't really been applicable to my situation.  I blame myself because I was posting a skeletal version of the final code which didn't fully illustrate what I needed to accomplish.  </p>
  
  <p>Essentially: <strong>I need to integrate a relatively simple checkbox hack into a CMS, but the CMS strips id selectors.</strong> Hence, code that ought to look something like this:</p>
  
  <pre><code>&lt;input type="checkbox" name="thisisaname" id="thisisanid"&gt;&lt;label class="thisisanid" for="thisisanid"&gt;Type 1&lt;/label&gt;
  </code></pre>
  
  <p>...ends up like this:</p>
  
  <pre><code>&lt;input type="checkbox" name="thisisaname"&gt;&lt;label class="thisisanid" for="thisisanid"&gt;Type 1&lt;/label&gt;
  </code></pre>
  
  <p>Predictably, this breaks everything, and ostensibly any adaptation appears to be impossible. There is no CMS-specific alternative like <code>ClientID=</code>. Neither jQuery nor JavaScript are available to me (they're also stripped out by the CMS).</p>
  
  <p>It's a case of something being extraordinarily simple to do, but being constrained by a CMS that multiplies the difficulty to the point where I'm uncertain if it's even possible.  I am <strong>not</strong> a CSS maven.  I know it only as much as I need to do these little projects for a few friends, and I apologize for posting about this yet again, but it's driving me crazy not knowing if this is something which ought to be shelved.</p>
  
  <p>This is the code.  Obviously, it's sloppy and it isn't in its fully-styled form, but it's close enough that I think it's a better example than what I've posted in the past:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#basesurround {
    background: #000000cc;
    margin: 0 auto;
    width: 75%;
  }
  
  .information-wrap { display:flex; vertical-align:top;} 
  .information-wrap aside { background: #00000066; vertical-align: top; flex: 1 1 250px; min-width: 150px; padding: 0; max-width: 200px; }
  .information-wrap main { vertical-align: top; display: flex; flex-direction: row; flex-wrap: wrap; width: 85%; justify-content: center; padding: 0 0 25px 25px; }
  
  .information-wrap label { background: #000000cc; width: 100%; display: inline-block; border-bottom: 1px solid #000000; color: #9FC3C9; text-transform: capitalize; font-weight: 100; font-size: 11px; letter-spacing: 1px; cursor: pointer; transition: all 0.7s ease; position: relative; padding: 10px 10px 10px 30px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; word-break: break-word; line-height: 125%; }
  .information-wrap label:after { content: ""; width: 25px; height: 100%; position: absolute; left: 0; top: 0; background: #000000; filter: contrast(85%); }
  
  .information-wrap details { position: relative; }
  
  .information-wrap details summary::-webkit-details-marker { display: none; }
  
  .information-wrap details summary::before { content: ""; position: absolute; left: 0; background: ; width: 1.5em; height: 1.5em; transition: transform 0.1s linear;}
  
  .information-wrap summary { width: 100%; padding: 20px; padding-left: 25px; border-bottom: 1px solid #000000; background: #9FC3C9; font-family: Proxima; font-weight: 100; text-transform: uppercase; letter-spacing: 2px; color: #000000; -webkit-transition: all 1s ease; transition: all 1s ease; }
  
  .information-wrap summary:hover { color: #ffffff4a; }
  
  .information-wrap summary:focus {outline: none;}
  
  .information-wrap details[open] &gt; summary { background: #000000; filter: contrast(85%); color: #ffffff; }
  
  .information-wrap details[open] &gt; summary ~ * { animation: open 1s ease; }
  .information-wrap details[open] summary:before {transform: rotate(90deg);}
  
  
  
  .infocard { flex: 0 0 32.3%; display: inline-block; vertical-align: top; font-family: Proxima, Arial, Helvetica, Sans-Serif; position: relative; margin: .5%; align-items: center; justify-content: center; overflow: hidden; color: #000000; text-align: center; line-height: 160%; background-color: #141414; height: 300px; min-width: 300px; -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; min-width:250px;  border: 1px solid #000000;}
  
  .infocard figure { border: 10px solid #DADCDB; margin: 10px 10px; padding: 0; display: inline-block; position: relative;}
  .infocard figure img { display: block; height: auto; max-width: 100%; } 
  .infocard figcaption { color: #000000; font: 400 18px/26px Proxima, Arial, Helvetica, Sans-Serif; padding: .2em 0; position: absolute; bottom: 0; text-align: center; width: 100%; }
  .infocard figcaption span { font-size: 14px; color: #ffffff }
  .infocard:last-of-type {margin-bottom: 200px;}
  
  .infocard .icons { top: -7px; position: relative; color:#ffffff}
  
  
  .information-wrap input { display: none; }
  input:checked ~ main .infocard { display: none; }
  
  
   /* INFOCARD TYPE LABELS &amp; CHECK CONTROLS */
  
  
    /* TYPE SET #1 */
  
  
  #infotypeone_cont:checked ~ aside .infotypeone_cont,
  #infotypetwo_cont:checked ~ aside .infotypetwo_cont,
  #infotypethree_cont:checked ~ aside .infotypethree_cont,
  #infotypefour_cont:checked ~ aside .infotypefour_cont,
  #infotypefive_cont:checked ~ aside .infotypefive_cont
  { background: #000000; filter: contrast(85%); }
  
  #infotypeone_cont:checked ~ main .infotypeone,
  #infotypetwo_cont:checked ~ main .infotypetwo,
  #infotypethree_cont:checked ~ main .infotypethree,
  #infotypefour_cont:checked ~ main .infotypefour,
  #infotypefive_cont:checked ~ main .infotypefive
  {display: inline-block;}
  
  
    /* TYPE SET #2 */
  
  
  #factiontypeone_cont:checked ~ aside .factiontypeone_cont,
  #factiontypetwo_cont:checked ~ aside .factiontypetwo_cont,
  #factiontypethree_cont:checked ~ aside .factiontypethree_cont,
  #factiontypefour_cont:checked ~ aside .factiontypefour_cont,
  #factiontypefive_cont:checked ~ aside .factiontypefive_cont
  { background: #000000; filter: contrast(85%); }
  
  #factiontypeone_cont:checked ~ main .factiontypeone,
  #factiontypetwo_cont:checked ~ main .factiontypetwo,
  #factiontypethree_cont:checked ~ main .factiontypethree,
  #factiontypefour_cont:checked ~ main .factiontypefour,
  #factiontypefive_cont:checked ~ main .factiontypefive
  {display: inline-block;}
  
  
  
  
  
   /* TYPE COLORS #1 */
  
  
  .infotypeone {background-color: #ff00004d;}
  .infotypetwo {background-color: #0076ff4d;}
  .infotypethree {background-color: #ffac004d;}
  .infotypefour {background-color: #ff00fc4d;}
  .infotypefive {background-color: #d800004d;}
  
  
  
  
  
  
  
   /* INFORMATION CARDS */
  
  
  .infocard * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; }
  
  .infocard .background { width: 100%; vertical-align: top; opacity: 0.2; -webkit-filter: grayscale(100%) blur(10px); filter: grayscale(100%) blur(10px); -webkit-transition: all 2s ease; transition: all 2s ease; }
  
  .infocard figcaption { width: 100%; padding: 15px 25px; position: absolute; left: 0; top: 50%; }
  
  figure.infocard img { display: inline;}
  
  figure.infocard .profile {border-radius: 50%; position: absolute; bottom: 50%; left: 50%; max-width: 100px; opacity: 1; box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.5); border: 2px solid rgba(255, 255, 255, 0.5); -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); }
  
  figure.infocard img.profile { height: 100px; width: 100px; }
  
  figure.infocard h3 { line-height: 160%; margin: 0 0 5px; font-weight: 100; font-family: Proxima, Arial, Helvetica, Sans-Serif; text-transform: uppercase; text-indent: 0px; }
  figure.infocard h3 a { text-decoration: none; letter-spacing: .3em; color: #9FC3C9cc; line-height: 18px; font-size: 15px; -webkit-transition: all 1s ease; transition: all 1s ease; }
  figure.infocard h3 a:hover {opacity: .3; }
  figure.infocard h3 span a, figure.infocard h3 span { font-size: 8px; opacity: 0.75; letter-spacing: 2px; display: inline-block; line-height: 10px; }
  
  figure.infocard i { padding: 10px 5px; display: inline-block; font-size: 32px; color: #ffffff; text-align: center; opacity: 0.65;}
  figure.infocard a {text-decoration: none; background-size: 0;}
  figure.infocard i:hover {opacity: 1; -webkit-transition: all 0.35s ease; transition: all 0.35s ease; }
  figure.infocard:hover .background, figure.infocard.hover .background {-webkit-transform: scale(1.3);transform: scale(1.3);}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="basesurround"&gt;
  &lt;form&gt;
  &lt;div class="information-wrap"&gt;
  
  
  
  &lt;!--- BEGIN INFORMATION CONTROLLER :: CHECKBOX ---&gt;
  
  
  
    &lt;input type="checkbox" name="cont" id="infotypeone_cont"&gt;
    &lt;input type="checkbox" name="cont" id="infotypetwo_cont"&gt;
    &lt;input type="checkbox" name="cont" id="infotypethree_cont"&gt;
    &lt;input type="checkbox" name="cont" id="infotypefour_cont"&gt;
    &lt;input type="checkbox" name="cont" id="infotypefive_cont"&gt;
  
    &lt;input type="checkbox" name="cont" id="factiontypeone_cont"&gt;
    &lt;input type="checkbox" name="cont" id="factiontypetwo_cont"&gt;
    &lt;input type="checkbox" name="cont" id="factiontypethree_cont"&gt;
    &lt;input type="checkbox" name="cont" id="factiontypefour_cont"&gt;
    &lt;input type="checkbox" name="cont" id="factiontypefive_cont"&gt;  
  
  &lt;!--- END INFORMATION CONTROLLER :: CHECKBOX ---&gt;
  
  
  
    &lt;aside&gt;
      
  
  
  &lt;!--- BEGIN INFORMATION CONTROLLER :: LABELS ---&gt;
  
  
  
      &lt;details&gt;&lt;summary&gt;
        
  
        SUBMENU TITLE
       
   
       &lt;/summary&gt;
  
        
        &lt;label class="infotypeone_cont" for="infotypeone_cont"&gt;Check 1&lt;/label&gt;
        &lt;label class="infotypetwo_cont" for="infotypetwo_cont"&gt;Check 2&lt;/label&gt;
        &lt;label class="infotypethree_cont" for="infotypethree_cont"&gt;Check 3&lt;/label&gt;
        &lt;label class="infotypefour_cont" for="infotypefour_cont"&gt;Check 4&lt;/label&gt;
        &lt;label class="infotypefive_cont" for="infotypefive_cont"&gt;Check 5&lt;/label&gt;
  
  
      &lt;/details&gt;
  
  &lt;!--- END INFORMATION CONTROLLER :: LABELS ---&gt;
  
  &lt;!--- BEGIN INFORMATION CONTROLLER ---&gt;
  
      &lt;details&gt;&lt;summary&gt;
        
  
        SUBMENU TITLE
       
   
       &lt;/summary&gt;
  
        
        &lt;label class="factiontypeone_cont" for="factiontypeone_cont"&gt;Faction 1&lt;/label&gt;
        &lt;label class="factiontypetwo_cont" for="factiontypetwo_cont"&gt;Faction 2&lt;/label&gt;
        &lt;label class="factiontypethree_cont" for="factiontypethree_cont"&gt;Faction 3&lt;/label&gt;
        &lt;label class="factiontypefour_cont" for="factiontypefour_cont"&gt;Faction 4&lt;/label&gt;
        &lt;label class="factiontypefive_cont" for="factiontypefive_cont"&gt;Faction 5&lt;/label&gt;
  
  
      &lt;/details&gt;
  &lt;!--- END INFORMATION CONTROLLER ---&gt;
      
    &lt;/aside&gt;
    
    &lt;main&gt;
  
   &lt;!---  BEGIN INFORMATION CARD ---&gt;
  &lt;figure class="infocard infotypeone factiontypeone"&gt;
  
  &lt;img src="ICON" class="background"/&gt;
  &lt;img src="ICON" class="profile"/&gt;
  
  
  &lt;figcaption&gt; &lt;h3&gt;
  
  
  &lt;a href="#"&gt;TITLE&lt;/a&gt;
  
  
  &lt;br&gt;&lt;span&gt;
  
  SUBTITLE ● 
  
  &lt;a href="#"&gt;MAIN LINK&lt;/a&gt; &lt;br&gt;
  
  INFO #2 | INFO #3
  
  &lt;/span&gt;&lt;/h3&gt;&lt;div class="icons"&gt;
  
     &lt;a href="PROFILEURL"&gt;&lt;i class="ion-ios-person-outline"&gt;&lt;/i&gt;&lt;/a&gt;
     &lt;a href="DROPBOXURL"&gt;&lt;i class="ion-ios-email-outline"&gt;&lt;/i&gt;&lt;/a&gt;
     &lt;a href="#"&gt;&lt;i class="ion-ios-location-outline"&gt;&lt;/i&gt;&lt;/a&gt;
  
  &lt;/div&gt;&lt;/figcaption&gt;&lt;/figure&gt;
   &lt;!---  END INFORMATION CARD ---&gt;
  
   &lt;!---  BEGIN INFORMATION CARD ---&gt;
  &lt;figure class="infocard infotypetwo factiontypetwo"&gt;
  
  &lt;img src="ICON" class="background"/&gt;
  &lt;img src="ICON" class="profile"/&gt;
  
  
  &lt;figcaption&gt; &lt;h3&gt;
  
  
  &lt;a href="#"&gt;TITLE&lt;/a&gt;
  
  
  &lt;br&gt;&lt;span&gt;
  
  SUBTITLE ● 
  
  &lt;a href="#"&gt;MAIN LINK&lt;/a&gt; &lt;br&gt;
  
  INFO #2 | INFO #3
  
  &lt;/span&gt;&lt;/h3&gt;&lt;div class="icons"&gt;
  
     &lt;a href="PROFILEURL"&gt;&lt;i class="ion-ios-person-outline"&gt;&lt;/i&gt;&lt;/a&gt;
     &lt;a href="DROPBOXURL"&gt;&lt;i class="ion-ios-email-outline"&gt;&lt;/i&gt;&lt;/a&gt;
     &lt;a href="#"&gt;&lt;i class="ion-ios-location-outline"&gt;&lt;/i&gt;&lt;/a&gt;
  
  &lt;/div&gt;&lt;/figcaption&gt;&lt;/figure&gt;
   &lt;!---  END INFO CARD ---&gt;
  
   &lt;!---  BEGIN INFO CARD ---&gt;
  &lt;figure class="infocard infotypethree factiontypethree"&gt;
  
  &lt;img src="ICON" class="background"/&gt;
  &lt;img src="ICON" class="profile"/&gt;
  
  
  &lt;figcaption&gt; &lt;h3&gt;
  
  
  &lt;a href="#"&gt;TITLE&lt;/a&gt;
  
  
  &lt;br&gt;&lt;span&gt;
  
  SUBTITLE ● 
  
  &lt;a href="#"&gt;MAIN LINK&lt;/a&gt; &lt;br&gt;
  
  INFO #2 | INFO #3
  
  &lt;/span&gt;&lt;/h3&gt;&lt;div class="icons"&gt;
  
     &lt;a href="PROFILEURL"&gt;&lt;i class="ion-ios-person-outline"&gt;&lt;/i&gt;&lt;/a&gt;
     &lt;a href="DROPBOXURL"&gt;&lt;i class="ion-ios-email-outline"&gt;&lt;/i&gt;&lt;/a&gt;
     &lt;a href="#"&gt;&lt;i class="ion-ios-location-outline"&gt;&lt;/i&gt;&lt;/a&gt;
  
  &lt;/div&gt;&lt;/figcaption&gt;&lt;/figure&gt;
   &lt;!---  END INFO CARD ---&gt;
  
   &lt;!---  BEGIN INFO CARD ---&gt;
  &lt;figure class="infocard infotypefour factiontypefour"&gt;
  
  &lt;img src="ICON" class="background"/&gt;
  &lt;img src="ICON" class="profile"/&gt;
  
  
  &lt;figcaption&gt; &lt;h3&gt;
  
  
  &lt;a href="#"&gt;TITLE&lt;/a&gt;
  
  
  &lt;br&gt;&lt;span&gt;
  
  SUBTITLE ● 
  
  &lt;a href="#"&gt;MAIN LINK&lt;/a&gt; &lt;br&gt;
  
  INFO #2 | INFO #3
  
  &lt;/span&gt;&lt;/h3&gt;&lt;div class="icons"&gt;
  
     &lt;a href="PROFILEURL"&gt;&lt;i class="ion-ios-person-outline"&gt;&lt;/i&gt;&lt;/a&gt;
     &lt;a href="DROPBOXURL"&gt;&lt;i class="ion-ios-email-outline"&gt;&lt;/i&gt;&lt;/a&gt;
     &lt;a href="#"&gt;&lt;i class="ion-ios-location-outline"&gt;&lt;/i&gt;&lt;/a&gt;
  
  &lt;/div&gt;&lt;/figcaption&gt;&lt;/figure&gt;
   &lt;!---  END INFO CARD ---&gt;
  
   &lt;!---  BEGIN INFO CARD ---&gt;
  
  &lt;figure class="infocard infotypefive factiontypefive"&gt;
  
  &lt;img src="ICON" class="background"/&gt;
  &lt;img src="ICON" class="profile"/&gt;
  
  
  &lt;figcaption&gt; &lt;h3&gt;
  
  
  &lt;a href="#"&gt;TITLE&lt;/a&gt;
  
  
  &lt;br&gt;&lt;span&gt;
  
  SUBTITLE ● 
  
  &lt;a href="#"&gt;MAIN LINK&lt;/a&gt; &lt;br&gt;
  
  INFO #2 | INFO #3
  
  &lt;/span&gt;&lt;/h3&gt;&lt;div class="icons"&gt;
  
     &lt;a href="PROFILEURL"&gt;&lt;i class="ion-ios-person-outline"&gt;&lt;/i&gt;&lt;/a&gt;
     &lt;a href="DROPBOXURL"&gt;&lt;i class="ion-ios-email-outline"&gt;&lt;/i&gt;&lt;/a&gt;
     &lt;a href="#"&gt;&lt;i class="ion-ios-location-outline"&gt;&lt;/i&gt;&lt;/a&gt;
  
  &lt;/div&gt;&lt;/figcaption&gt;&lt;/figure&gt;
   &lt;!---  END INFO CARD ---&gt;
  
  &lt;/main&gt;&lt;/div&gt;
  &lt;/form&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am in a quandary. I'm not very knowledgeable in CSS, and this CMS (which I <em>must</em> use, unfortunately) makes even the easiest of tasks inordinately difficult. Here's what I've tried:</p>
  
  <ul>
  <li><p>Using <code>nth-child / nth-of-type</code> selectors:  I was given this idea by
  <a href="https://stackoverflow.com/users/8620333/temani-afif">Temani Afif</a>.  This solution is elegant and I loved it, but
  unfortunately, because of what the code will be used for, the
  structure will vary often.</p></li>
  <li><p>Placing the input above the labels: I've been advised to look
  into this, but I can't find any information on how to properly code
  with the input above the label, so I'm unsure if it can be used in this<br>
  situation.</p></li>
  <li><p>I thought about mimicking the behavior I want using
  <code>[attribute|=value]</code> selectors instead of <code>id</code>, but I haven't been
  able to get it to work.  I don't know, though, whether I'm being
  limited by the code or my own incompetence, so I'm unsure if it's
  something worth looking into further.</p></li>
  </ul>
  
  <p>So… <strong>Is there a recommended means of overcoming the <code>id=</code> limitations I've missed in my research?</strong></p>
  
  <p>FWIW, the purpose of this is to create a simple(ish) code where it's easy to append the <code>INFO CARD</code> part of the code as many times as needed to edit this for sorting movies/books/other information of that nature, while maintaining the ease at which one can change the <code>figure class=</code>.  </p>