CSS样式，样式儿童

Question

I am trying to improve my understanding of CSS.

I have the following HTML table:

<div class="app-pages validate-email-page" id="containerbg2">

        <div>
            <form action="<?php echo site_url("/validation-control");?>" method="post" id="dataForm">
                <table border='1' class="email-table">
                    <tr>
                        <th>First Name</th>
                        <th>Surname</th>
                        <th>Email</th>
                        <th>Sign Up Date</th>
                        <th>Expiration Date</th>
                        <th>Roll back user?</th>
                        <th>Repeat Validation?</th>
                    </tr>
                    <?php
                        $wcl_ci_api->get_page_view_verification_emails();
                    ?>

                </table>
                <input type="submit" value="Confirm">
            </form>
        </div>

    </div>
</div>

I have the following CSS:

div.validate-email-page table {
    text-align: left;   
}

From what I understand of the CSS above:

It is saying that any 'table' within a 'div' with the 'class validate-email-page'

Will have the CSS styling applied to it eg all text will be aligned left.

Next, if I want to apply specific styling to parts of the table eg head I can do the following:

div.validate-email-page table th{
    text-align: left;   
}

div.validate-email-page table tr{
    text-align: center; 
}

And these 2 say:

Center text (Left text) for all rows (headers) in a table within a div with the class 'validate-email-page'

This all seems to be working fine.

My problem is, I want to only centre the checkboxes, which are made by the php and have the class 'checkradio' and type 'checkbox',but so far all my attempts have failed.

I have tried lots of different variations, but cannot seem to get it right eg:

div.validate-email-page table input checkbox{
    text-align: Center;
}

I know I am not too far but I cannot work it out and cannot seem to find a clear answer to my problem

Preferably I would like to style by column name, so I can change the style of each column based on the column name.

Answer 1

input checkbox would match <input> <checkbox> </input> which isn't something you can have in HTML.

If you did select a checkbox, then text-align: center wouldn't work because there is no text inside a checkbox to centre.

If you want to centre a checkbox, then you need to select the block element it is inside and then apply text-align to that.

CSS doesn't have a parent selector , so you can't use the presence of the checkbox to target its parent and select that.

You can't align content based on the column either.

Add the appropriate table cells (the <td> elements) to a class and use a class selector.

Answer 2

Yes you are close. :)

div.validate-email-page table input.checkradio{
    text-align: center;
}

This will applied on the inputs with checkradio class, in the table, within a div with validate-email-page class. ;)

Edit:

Or you can try the attribute selector:

div.validate-email-page table input[type="checkbox"] {
    text-align: center;
}