CODEWITHSUNDEEP
htmlcss
Alex
Alex

Reputation: 3968

CSS Styling, styling children

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.

Upvotes: 0

Views: 62

Answers (2)

Quentin
Quentin

Reputation: 943560

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.

Upvotes: 2

DNReNTi
DNReNTi

Reputation: 521

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;
}

Upvotes: 0

Related Questions