CSS Styling, styling children

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.

The input type checkbox doesn't have any text. There may be label element present with the input which has the text. Can you please share your html markup for that particular checkbox? — Sachin, Feb 26 '15 at 13:00

score 2 · Accepted Answer · edited May 23 '17 at 12:12

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.

DNReNTi · Answer 2 · 2015-02-26T13:05:03.917

0

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

edited Feb 26 '15 at 13:05

answered Feb 26 '15 at 12:58

DNReNTi

501
3
18

Is there any css properties applied on the general input elements? Width for example? Whitout the whole output, Im just guessing here. – DNReNTi Feb 26 '15 at 13:07

CSS Styling, styling children

2 Answers2