CSS: How to select first element in each row?


Tags: html,css

Problem :

I have the following html fragment:

<div id = "fromAddress">
        <table>
            <tr><td id="from">From:</td>
                <td>
                    <table>
                        <tr><td>Acquirung Bank</td></tr>
                        <tr><td>Risk Management</td></tr>
                        <tr><td>100 Bond Street</td></tr>
                        <tr><td>London</td></tr>
                        <tr><td>W1</td></tr>
                    </table>
                </td>
            </tr>
            <tr><td>Fax:</td><td id="fromFax">0207 234567890/</td></tr>
            <tr><td>Tel:</td><td id="fromTel">0207 123456789/</td></tr>
        </table>
</div>

My css:

#fromAddress td:first-child
{
    font-weight: bold;
}

#fromAddress table table td:fist-child
{
    font-weight:normal;
}

How I can make text in first s bold? So, "From", "Fax", and "Tel" are bold?



Solution :

Something like this:

#fromAddress > table > tbody > tr > td:first-child {
    font-weight: bold;
}

https://jsfiddle.net/j2mb4f0g/

Chrome at least will add in the tbody tag, so you should probably add it to your html to ensure this works in all browsers.

Or to avoid all the '>'s you could do:

td:first-child {
    font-weight: bold;
}

table table td:first-child {
    font-weight: normal;
}

https://jsfiddle.net/80v98xuf/


    CSS Howto..

    How to repeat a CSS shape horizontally?

    How to select other (sibling) elements CSS?

    Using CSS, how do I move a DIV to the left of the centre position?

    How do I translate an image based on its height?

    How to refer to third level lists in css?

    How to resolve background-image url inside css file while using azure blob storage

    How do I light up an entire single row by hovering on a span in one of the columns?

    How To Pick Desired Image From CSS Sprites In A DIV Background And Position It?

    How to make 2 backgrounds “stick” to the sides of a centered div

    How to change the CSS from the last child?

    Inline blocks somehow don't get displayed in a straight line [duplicate]

    Website elements go haywire when the user zooms in or out. How do I keep them from moving?

    How to add comments to inline CSS? [closed]

    How can I use JQ to pick out a parent whose child is hr.strong?

    How to make this loading animation?

    How can I enqueue Internet Explorer specific stylesheets in the Wordpress functions folder?

    How to change anchor color when you hover over a list

    How to re-size inputs for a <%= form_for %> form in Ruby on Rails

    how to set the absolute position div center align

    How to select multiple CSS parent and descendant groups efficiently

    How to Assign on demand CSS Styles to some div or class?

    How to change the color of an active h5 tab using jQuery or CSS

    slide show with bootstrap

    How can I make this little javascript work with 2 textarea elements without killing the CSS?

    How to scale multiple
    dynamically using min- and max-width?

    How can I make my div to remain fixed and no longer change position?

    How to make outer div fit child divs?

    How to prevent from loading a css and a js sheet at only one Rails controller?

    How to silently hide “Image not found” icon when src source image is not found

    How to Overcome Bootstrap's Default Styling? Element targeting issues?