0

I have the following code:

    <!DOCTYPE html>
    <html>
        <head>
            <style>
            main>section input:nth-of-type(1):checked {
                display:block;
                width:20px;
                height:20px;
            }
            figure {
                display:block;
                width:200px;
                height:200px;
                background:green;
            }
            main>section input:nth-of-type(1):checked ~ figure,
            main>section input:nth-of-type(1):checked ~ main>section figure {
                background:blue;
            }
            </style>
        </head>
        <body>
            <main>
                <section>
                    <figure></figure>
                    <input type="checkbox" />
                </section>
            </main>
        </body>
    </html>

When someone checks the input field, i want the figure to turn blue. But something is wrong with my sibling select, so it stays green. Does anyone know what's wrong?

I will have a lot of other figures in other element tags, so it's important that none of the other figures change colors in anyway.

John
  • 28,573
  • 67
  • 217
  • 373
  • So basically general siblings is not actually general siblings, but instead, is better known as "later siblings". Order matters. – John Nov 28 '19 at 23:06
  • Yep, which is why they (years later) renamed the general sibling combinator to the following-sibling combinator. – BoltClock Dec 04 '19 at 04:53

0 Answers0