CUTCODEDOWN
Minimalist Semantic Markup

Welcome Guest
Please Login or Register

If you have registered but not recieved your activation e-mail in a reasonable amount of time, or have issues with using the registration form, please use our Contact Form for assistance. Include both your username and the e-mail you tried to register with.

Author Topic: Generating a selector from input:checked - not working  (Read 323 times)

AndrewDoPECC

  • Junior Member
  • *
  • Posts: 6
  • Karma: +0/-0
Generating a selector from input:checked - not working
« on: 7 May 2023, 12:03:12 am »
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......

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1049
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Generating a selector from input:checked - not working
« Reply #1 on: 8 May 2023, 12:41:20 am »
In addition to the "same parent" the adjacent sibling selector "~" only targets tags AFTER it.

.test ~ div { color:red; }

<div>Doesn't work></div>
<input type="checkbox" class="test">
<div>works</div>



We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

AndrewDoPECC

  • Junior Member
  • *
  • Posts: 6
  • Karma: +0/-0
Re: Generating a selector from input:checked - not working
« Reply #2 on: 8 May 2023, 07:41:31 am »
Thank you for the prompt response.

I am trying something a little different, and I thought that it conformed with the definition that you gave.
It does however depend on using the checkbox status and maybe that's where I have misunderstood how that state works, or there is something else going on that I also do not understand.

Thanks again

Markup in next post, the spam filter keeps blocking me....

Then,
 #contentMenu nav > ul > li ul {
   position: absolute;
   right: 999em;
 }  /* this works to collapse the all the submenu ul's when the page loads

But
.collapseSwitch:checked ~ ul {
   position: relative;
   right: 0;
 }  /* nothing like this works to restore just one <ul> that is beneath the selected checkbox. */

AndrewDoPECC

  • Junior Member
  • *
  • Posts: 6
  • Karma: +0/-0
Re: Generating a selector from input:checked - not working
« Reply #3 on: 8 May 2023, 07:42:23 am »
I really hope this gets thru the filter.....

Code: [Select]

<div id="contentMenu">

<nav>
    <a ..whatever.. ></a>
    <ul>
        <li><input type="checkbox" class="collapseSwitch"><a href="nav link A">Nav to A</a>
        <ul>
            <li><a href="nav link">Nav to sub-area A1</a></li>
            <li><a href="nav link">Nav to sub-area A2</a></li>
            <li><a href="nav link">Nav to sub-area A3</a></li>
        </ul>
        </li>
        <li><input type="checkbox" class="collapseSwitch"><a href="nav link B">Nav to B</a>
        <ul>
            <li><a href="nav link">Nav to sub-area B1</a></li>
            <li><a href="nav link">Nav to sub-area B2</a></li>
            <li><a href="nav link">Nav to sub-area B3</a></li>
        </ul>
        </li>
    </ul>
</nav>
<!-- contentMenu --></div>

coothead

  • Sr. Member
  • ****
  • Posts: 390
  • Karma: +89/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Re: Generating a selector from input:checked - not working
« Reply #4 on: 8 May 2023, 11:31:08 am »
Hi there AndrewDoPECC,

here is one possible solution...

index.html
Code: [Select]
<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

</head>
<body>

<h1>page description</h1>

<nav>
 <input type="checkbox" id="cb1">
 <label for="cb1">A</label>
 <ul>
  <li><a href="nav-link1.html">Nav to sub-area A1</a></li>
  <li><a href="nav-link2.html">Nav to sub-area A2</a></li>
  <li><a href="nav-link3.html">Nav to sub-area A3</a></li>
 </ul>
     
 <input type="checkbox" id="cb2">
 <label for="cb2">B</label>
 <ul>
  <li><a href="nav-link4.html">Nav to sub-area B1</a></li>
  <li><a href="nav-link5.html">Nav to sub-area B2</a></li>
  <li><a href="nav-link6.html">Nav to sub-area B3</a></li>
 </ul>
</nav>

</body>
</html>

screen.css
Code: [Select]
body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5  sans-serif;
 }
h1 {
   font-size: 1.5em;
   font-weight: normal;
   color: #545454;
   text-align: center;
   text-transform: capitalize ;
 }
nav {
   display: inline-flex;
   flex-direction: column;
   gap: 0.5em;
   padding: 1em;
   border: 1px solid #000;
   background-color: #fff;
 }
nav label {
   width: 8em;
   padding: 0.5em;
   border: 1px solid #000;
   background-color: #009;
   font-size: 1.25em;
   color: #fff;
   text-align: center;
   cursor: pointer;
 }
nav label::before{
   content: 'Open ';
 }
#cb1,
#cb2 {
   position: absolute;
   left: -999em;
   top: -999em;
 }
#cb1:checked + label::before,
#cb2:checked + label::before {
   content: 'Close ';
 }
#cb1:checked ~ ul:first-of-type,
#cb2:checked ~ ul:last-of-type  {
   display: block;
 }
nav ul {
   display: none;
 }

You may view the result here...

https://codepen.io/coothead/full/bGmLJzx

coothead
~ the original bald headed old fart ~

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1049
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Generating a selector from input:checked - not working
« Reply #5 on: 8 May 2023, 04:19:15 pm »
You're being bit by a pesky thing called "specificity". Id's take precedence over class declarations.

#contentMenu nav > ul > li ul {

has a higher specificity than:

.collapseSwitch:checked ~ ul {

This:

#contentMenu nav > ul > li .collapseSwitch:checked ~ ul {

Might work, but it's wordy as F***.

Instead of the id selected, since collapse switch is collapse switch, is the ul it's immediate next sibling?

Code: [Select]
.collapseSwitch:checked + ul {
   position: absolute;
   right: 200vw;
 }

.collapseSwitch:checked + ul {
   position:static;
 }

Would/should do the trick. Note that position:static (the default value of positon) ignores top/left/right/bottom saving you the extra "right" declaration.


You might consider using "+ *" instead of "+ ul" to nab any tag so collapseswitches can be used anywhere.

Though I have to ask, might this not be a job for <details> and <summary>? Or do you have plans to animate it?
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

AndrewDoPECC

  • Junior Member
  • *
  • Posts: 6
  • Karma: +0/-0
Re: Generating a selector from input:checked - not working
« Reply #6 on: 9 May 2023, 12:11:09 am »
Thank you both!

Jason: specificity is an excellent point - completely overlooked that.
Regarding summary/details - that crossed my mind but I was not sure that it was "semantic enough" to use these in navigation.  Also, see comments to coothead below about trying to have a local effect on just one ul

coothead: your suggestion looks workable but I am trying to do this in a generic fashion without using any specific id's.  Reason is, the navigation will be generated by the Hugo CMS and it will be sooo much easier not to generate specific id's.  My Cunning Plan was to use CSS to target the <ul> that was sibling to the checked <input>, and only that <ul>.  Bam, no id's needed.  Pretty proud of myself until I found that I cannot get ANY selector to target those <ul>s if it uses the .contentCollapse class.

See https://codepen.io/AndrewDoPECC/pen/QWZmNzw

At the bottom of the CSS you can see that the <ul>s disappear with selector(s) that don't use the class element, but *nothing* that uses the class specifier seems to work.  :checked or not.

Why does using .contentCollapseSwitch break it??

Thanks for your expertise!

AndrewDoPECC

  • Junior Member
  • *
  • Posts: 6
  • Karma: +0/-0
Re: Generating a selector from input:checked - not working
« Reply #7 on: 9 May 2023, 12:54:48 am »
Got it!!  See the pen.

I'm confused, seems to work with the # selector now, even though that seemed to the problem before, and I thought I'd tried every variant.

I'm feeling pleased with myself for getting a solution that does not use id's.  But can you see anything to pop my bubble??

Now, off to roll it into the wider project and see if it flies....

Jason: style advice - would this be more better in summary/detail?  I'm thinking of your teachings on accessibility, non-screen agents and general semantic correctness....

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1049
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Generating a selector from input:checked - not working
« Reply #8 on: 9 May 2023, 11:51:37 pm »
I would use details/summary, and NOT have the link as the parent category as that's confusing.

Also in your pen, you forgot a few colons. Such as "right 200vw" should be "right:200vw"
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

 

SMF spam blocked by CleanTalk

Advertisement