I've shared about my project previously. Twice, actually. While the responses have given me better insight into my situation, they haven't been directly applicable. I take responsibility for this as I was posting an incomplete version of the final code that didn't fully explain my requirements.
Essentially: I need to incorporate a simple checkbox workaround into a CMS, but the CMS removes id selectors. As a result, code that should resemble this:
<input type="checkbox" name="thisisaname" id="thisisanid"><label class="thisisanid" for="thisisanid">Type 1</label>
...looks like this:
<input type="checkbox" name="thisisaname"><label class="thisisanid" for="thisisanid">Type 1</label>
This naturally causes issues, and it seems impossible to make any adjustments. The CMS doesn't provide a CMS-specific alternative like ClientID=. Both jQuery and JavaScript are unavailable to me as the CMS removes them.
It's a situation where a seemingly simple task is complicated by a CMS to the point where I'm unsure if it's even achievable. I'm not a CSS expert. I only know what I need for small projects for friends. I apologize for bringing this up again, but the uncertainty is driving me mad.
This is the code. It's not polished and not fully styled, but it's a closer representation than what I've shared before:
#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; }
...
I'm stuck. My CSS knowledge is limited, and this mandatory CMS makes even simple tasks extremely difficult. Here's what I've tried:
Using
nth-child / nth-of-typeselectors: Suggested by Temani Afif. A great solution, but the structure may change frequently for this code's use.Placing the input above the labels: Recommended to me, but coding with the input above the label is unfamiliar territory.
Exploring
[attribute|=value]selectors as an alternative toid: Tried this, but can't get it to function. Unsure if it's due to the code or my skills.
So... Is there a specific method I've missed in my research to overcome the id= limitations?
For what it's worth, the goal here is to create a flexible code where the INFO CARD section can be easily duplicated for sorting movies/books/other info, while allowing simple changes to the figure class=.