Hello JK and others,
First, thank you Jason for the education in semantic markup. I have been struggling to plan the revision of my hobby site at dopecc dot net and these concepts have been the breakthrough.
I am also building a new css framework for the site, to get rid of the Boot***p that I used years ago. Forgive me, for I knew no better then. It's been fascinating to see how adopting semantic principles has eliminated almost all of the complexity that I needed in my static site generator - a double win.
The framework is based on a mashup of JKs ideas for modals, lazy loading, gallery and collapse. It's nearly done, I am not a usual HTML/CSS user so learning has been steep. I am very happy with the final look and I will post here when done for comments and to help anyone else.
In the meantime I have hit a final roadblock trying to make navigation menus with collapsing subsections. I have used JKs collapse and styled checkbox ideas but tried an idea of my own to avoid the use of specific id's on the collapsing sections. It seems elegant to attempt this and eliminating the id's makes content generation much easier - so I'd like to do this if possible.
I posted with code examples and kept getting blocked by the spam filter, so trying without code.
The guts of my question is:
Will this: .contentCollapseSwitch:checked ~ ul { .... }
select a ul that's after an <input type="checkbox" class="contentCollapseSwitch">, has the same parent as the <input>, and only when and if the <input> is in checked state?
I have tried many variations on this theme without success.
It may be that the selector above can never work, in which case that's my answer. If I'm on the right track then I will try again to post a full example for better understanding.
Thanks very much for assistance and inspiration. I'm so close to being done......