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: CSS Label :checked :not(:checked) Issue  (Read 854 times)

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 787
  • Karma: +8/-0
    • Grumpy Young Man
CSS Label :checked :not(:checked) Issue
« on: 23 Nov 2021, 04:31:08 pm »
This always seems to cause me an issue!

Changing the label on :checked or :not(:checked)

My CodePen

The CSS seems to work on the 6th label and on the 1st but not on the #toggleHidden1:checked

Also is there some way of making this [id^='toggleHidden'] work on the #toggleHidden without having to add the actual number into the CSS?

Shortening this:
Code: [Select]
#toggleHidden3:checked ~ #hidden3 {
    display: block;
}
« Last Edit: 23 Nov 2021, 04:34:01 pm by GrumpyYoungMan »
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

coothead

  • Sr. Member
  • ****
  • Posts: 390
  • Karma: +89/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Re: CSS Label :checked :not(:checked) Issue
« Reply #1 on: 23 Nov 2021, 08:13:54 pm »
Hi there GYM.

this i how I would approach the problem...

HTML
Code: [Select]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="screen.css" media="screen">
</head>
<body>
    <header>
        <h1>I am a header</h1>
    </header>
        <input id="toggleHidden1" type="checkbox">
        <input id="toggleHidden2" type="checkbox">
        <input id="toggleHidden3" type="checkbox">
        <input id="toggleHidden4" type="checkbox">
        <input id="toggleHidden5" type="checkbox">
        <input id="toggleHidden6" type="checkbox">
    <nav>
        <label for="toggleHidden1">HC 1</label>
        <label for="toggleHidden2">HC 2</label>
        <label for="toggleHidden3">HC 3</label>
        <label for="toggleHidden4">HC 4</label>
        <label for="toggleHidden5">HC 5</label>
        <label for="toggleHidden6">HC 6</label>
    </nav>

    <main>

        Nothing to see here, OR is there... ...you decide...

        <section id="hidden1"><h2>Hidden Content 1</h2>Hidden Content 1</section>
        <section id="hidden2"><h2>Hidden Content 2</h2>Hidden Content 2</section>
        <section id="hidden3"><h2>Hidden Content 3</h2>Hidden Content 3</section>
        <section id="hidden4"><h2>Hidden Content 4</h2>Hidden Content 4</section>
        <section id="hidden5"><h2>Hidden Content 5</h2>Hidden Content 5</section>
        <section id="hidden6"><h2>Hidden Content 6</h2>Hidden Content 6</section>
    </main>

    <footer>
        I am a footer... <br>&copy; Someone, Somewhere
    </footer>

</body>
</html>

screen.css
Code: [Select]
html,
body {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    display:flex;
    flex-direction: column;
    font: normal 1em / 1.5 Helvetica,sans-serif;
    background: #3D315B;
    color: #F8F991;
    box-sizing: border-box;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
header,
footer {
    flex: 0;
    background: #444B6E;
    padding: 0.5em 0;
}
input[id^='toggleHidden'] {
    display: none;
}
/*  NAVIGATION  */
nav {
    padding: 0.5em 0;
    margin: 0.5em 0;
    text-align: center;
    display: flex;
    justify-content: center;
}
nav label {
    display: block;
    width: 5em;
    padding: 0.5em;
    margin: 0 0.25em;
    border-radius: 0.25em;
    background: #444B6E;
}
nav label:hover,
nav label:active {
    background: #F8F991;
    color: #3D315B;
    cursor: pointer;
}
main {
    flex: 1;
}
main > section {
    max-width: 80%;
    margin: 1em auto;
    border: 1px solid #fff;
    border-radius: 0.5em;
    padding: 0.25em;
    background: #444B6E;
}
main section h2 {
    text-align:center;
}
/*  DIV's - Auto Hide */
main section[id^='hidden'] {
    display: none;
}
nav label::after {
    padding-left: 0.5em;
    content: "+";
}
#toggleHidden1:checked ~ nav  label:nth-of-type(1)::after,
#toggleHidden2:checked ~ nav  label:nth-of-type(2)::after,
#toggleHidden3:checked ~ nav  label:nth-of-type(3)::after,
#toggleHidden4:checked ~ nav  label:nth-of-type(4)::after,
#toggleHidden5:checked ~ nav  label:nth-of-type(5)::after,
#toggleHidden6:checked ~ nav  label:nth-of-type(6)::after {
    content: "-";
}
/*  TOGGLE - Show Content   */
#toggleHidden1:checked ~ main #hidden1,
#toggleHidden2:checked ~ main #hidden2,
#toggleHidden3:checked ~ main #hidden3,
#toggleHidden4:checked ~ main #hidden4,
#toggleHidden5:checked ~ main #hidden5,
#toggleHidden6:checked ~ main #hidden6 {
    display: block;
}
footer {
    text-align: center;
}

Full Page View

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

coothead
« Last Edit: 24 Nov 2021, 06:45:38 am by coothead »
~ the original bald headed old fart ~

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 787
  • Karma: +8/-0
    • Grumpy Young Man
Re: CSS Label :checked :not(:checked) Issue
« Reply #2 on: 24 Nov 2021, 02:45:44 am »
Thank you! :)

The link doesn’t work, but a copy and paste and a slight tweak worked like a charm!

So, what did I do wrong? As I am obviously missing something?
« Last Edit: 24 Nov 2021, 03:12:42 am by GrumpyYoungMan »
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 787
  • Karma: +8/-0
    • Grumpy Young Man
Re: CSS Label :checked :not(:checked) Issue
« Reply #3 on: 24 Nov 2021, 03:29:58 am »
Was it my input/label order?
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 787
  • Karma: +8/-0
    • Grumpy Young Man
Re: CSS Label :checked :not(:checked) Issue
« Reply #4 on: 24 Nov 2021, 04:39:06 am »
My CodePen has been updated!

Thanks, coothead! :)
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 787
  • Karma: +8/-0
    • Grumpy Young Man
Re: CSS Label :checked :not(:checked) Issue
« Reply #5 on: 24 Nov 2021, 05:59:25 am »
Two CodePens created one with the styling done via checkboxes and the other with radio buttons, let me know what you think...
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

coothead

  • Sr. Member
  • ****
  • Posts: 390
  • Karma: +89/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Re: CSS Label :checked :not(:checked) Issue
« Reply #6 on: 24 Nov 2021, 06:00:12 am »
Quote from: GrumpyYoungMan
Was it my input/label order?
Yes it was.

The C in  CSS is an abbreviation of Cascading.
For an input element to affect it's label, it must necessarily precede it.
Quote
The link doesn’t work.

I am sorry about that, I popped the wrong link in.

coothead
~ the original bald headed old fart ~

coothead

  • Sr. Member
  • ****
  • Posts: 390
  • Karma: +89/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Re: CSS Label :checked :not(:checked) Issue
« Reply #7 on: 24 Nov 2021, 06:08:34 am »
...let me know what you think...

Depending on the relevance of the  content of the sections,
my preference would lean towards  the radio type.

coothead
~ the original bald headed old fart ~

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 787
  • Karma: +8/-0
    • Grumpy Young Man
Re: CSS Label :checked :not(:checked) Issue
« Reply #8 on: 24 Nov 2021, 06:20:23 am »
Quote from: GrumpyYoungMan
Was it my input/label order?
Yes it was.

The C in  CSS is an abbreviation of Cascading.
For an input element to affect it's label, it must necessarily precede it.
Quote
The link doesn’t work.

I am sorry about that, I popped the wrong link in.

coothead
There is absolutely no need to apologise, you have helped me and continue to help me no end and I appreciate that! Thanks!
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 787
  • Karma: +8/-0
    • Grumpy Young Man
Re: CSS Label :checked :not(:checked) Issue
« Reply #9 on: 24 Nov 2021, 06:21:25 am »
...let me know what you think...

Depending on the relevance of the  content of the sections,
my preference would lean towards  the radio type.

coothead
I agree, but how does that effect the SEO? or is hidden content still spidered?
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

coothead

  • Sr. Member
  • ****
  • Posts: 390
  • Karma: +89/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Re: CSS Label :checked :not(:checked) Issue
« Reply #10 on: 24 Nov 2021, 06:42:22 am »
Quote from: GrumpyYoungMan
I agree, but how does that effect the SEO? or is hidden content still spidered?

To be honest, I never really think about SEO, but if pushed to make a comment,
then I would have to admit that I believe it to be a 99.9% scam. Bear in mind,
though, that this very low estimate is due to my being in a very benevolent and
generous mood this morning.  8)

coothead

~ the original bald headed old fart ~

Dave

  • Junior Member
  • *
  • Posts: 38
  • Karma: +12/-0
Re: CSS Label :checked :not(:checked) Issue
« Reply #11 on: 25 Nov 2021, 06:48:39 am »
To be honest, I never really think about SEO, but if pushed to make a comment,
then I would have to admit that I believe it to be a 99.9% scam.

Amen!
Dave

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 787
  • Karma: +8/-0
    • Grumpy Young Man
Re: CSS Label :checked :not(:checked) Issue
« Reply #12 on: 25 Nov 2021, 08:34:08 am »
To be honest, I never really think about SEO, but if pushed to make a comment,
then I would have to admit that I believe it to be a 99.9% scam.

Amen!
While I agree that SEO is probably a scam, if hidden content is ignored then that design I posted would be of little to no use!

I would say if your website is formatted correctly then SEO scoring shouldn’t be too much a problem?
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

coothead

  • Sr. Member
  • ****
  • Posts: 390
  • Karma: +89/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Re: CSS Label :checked :not(:checked) Issue
« Reply #13 on: 25 Nov 2021, 08:51:25 am »
Quote from: GrumpyYoungMan
While I agree that SEO is probably a scam,
if hidden content is ignored then that design
I posted would be of little to no use!


Hidden content may or may not be ignored by SEO.

SEO, though,  cannot dictate in anyway whatsoever,
the contents that you choose to display.

If they could then they would not only be scammers
but also hackers:o

The only power that SEO has is to magically extract
money from the gullible public.  :)

coothead
« Last Edit: 25 Nov 2021, 08:56:03 am by coothead »
~ the original bald headed old fart ~

 

SMF spam blocked by CleanTalk

Advertisement