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 do I push inline elements onto the next line

    How to fixed image on every screen resolution?

    Three extra pixels at the bottom of the page unaccounted for and not sure how to get rid of them?

    How to prevent page margin from expanding in HTML/CSS code when window is resized

    How to upload image to an existing image src in angularjs, css

    How to create a “shiny” effect like this using CSS gradients?

    How to properly fix CSS inconsistencies across desktop and mobile browsers?

    Jquery Ui Sortable showing broken image in IE8

    How do I make these HTML blocks of info stay the same size?

    How do I create an animation of scrolling text with just HTML and CSS (or java i guess) like apple used to have on their livepage?

    How to make a custom select option menu style without image in CSS?

    Ruby on rails dropdown elements?

    How to use CSS timing functions to animate an arc?
    How to split multiple string using jQuery or javascript?
    how can I center button below my text while using bootstrap css?
    How to make CSS for HTML5
    work properly in IE?
    How to align text within div?
    How to prevent IE from loading hidden content using HTML/CSS only?
    How to make images always relative to a div using CSS
    How to fit an image according to screen size
    How to make sure the UI always shrinks and fit to the window irrespective of the resolution and device via viewport or CSS
    How to get ratio of scale image, when it's autoscaled by background-cover?
    How to get the scroll bar with CSS overflow on iOS
    How to write persistent CSS box rules?
    How to center in div without text-align?
    how to position radio button outside of a block with css