CODEWITHSUNDEEP
htmlcss
TriforceOfKirby
TriforceOfKirby

Reputation: 301

CSS Checkbox to change content of table cells

I have this checkbox in my website that toggles the contents of table cells whenever it is clicked; however, if I place the checkbox in an aside tag, the table in a main tag, and adjust the CSS, it doesn't seem to work properly anymore, what an I doing wrong?

Before(Working):

HTML:

<input type="checkbox">
<table>
    <caption>Table</caption>
    <tr>
        <td data-one="Data One" data-two="Data 2"></td>
    <tr>
</table>

CSS:

input[type=checkbox]{
    display:block;
    visibility:hidden;
    width:0;
    margin:0;
    cursor:pointer;
}

input[type=checkbox]:after{
    position:fixed;
    left:0;
    display:block;
    visibility:visible;
    width:10%;
    padding:.5em 0;
    text-align:center;
}

input[type=checkbox]:after{
    content:"Data 1";
    background:#FCC;
}

input[type=checkbox]:checked:after{
    content:"Data 2";
    background:#CCF;
}

input[type=checkbox]:checked ~ table td:before{
    content:attr(data-two);
}

td:before{
    display:block;
    content:attr(data-one);
}

After(Not Working):

HTML:

<aside>
    <input type="checkbox">
</aside>
<main>
    <table>
        <caption>Table</caption>
        <tr>
            <td data-one="Data One" data-two="Data 2"></td>
        <tr>
    </table>
</main>

CSS:

input[type=checkbox]{
    display:block;
    visibility:hidden;
    width:0;
    margin:0;
    cursor:pointer;
}

input[type=checkbox]:after{
    position:fixed;
    left:0;
    display:block;
    visibility:visible;
    width:10%;
    padding:.5em 0;
    text-align:center;
}

input[type=checkbox]:after{
    content:"Data 1";
    background:#FCC;
}

input[type=checkbox]:checked:after{
    content:"Data 2";
    background:#CCF;
}

aside input[type=checkbox]:checked ~ main table td:before{ /*This part is not working*/
    content:attr(data-two);
}

td:before{
    display:block;
    content:attr(data-one);
}

Upvotes: 2

Views: 573

Answers (1)

invernomuto
invernomuto

Reputation: 10211

The problem is the sibling selector, what you need should be a parent selector, not existent at the moment, in the CSS Selectors 4 Working Draft there is instead defined the concept of subject of selector, so that aside input[type=checkbox]:checked! ~ main table td:before should work, but not is available currently by any browser 

<aside>
    <input type="checkbox" />
    <main>
        <table>
            <caption>Table</caption>
            <tr>
                <td data-one="Data One" data-two="Data 2"></td>
            </tr>
        </table>
    </main>
</aside>
<main>
    <table>
        <caption>Table</caption>
        <tr>
            <td data-one="Data One" data-two="Data 2"></td>
        </tr>
    </table>
</main>

http://jsfiddle.net/InferOn/CnfFE/

Upvotes: 2

Related Questions