Css: How to Select First Element in Each Row?
I Have the Following Html Fragment: from: Acquirung Bank Risk Management 100 Bond Street London W1 Fax:0207 234567890/ Tel:0207 123456789/ My Css: #Fromaddress...
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?
1 Answer
Something like this:
#fromAddress > table > tbody > tr > td:first-child {
font-weight: bold;
}
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;
}
Maya is a hardware enthusiast who tests and reviews smart home devices, smartphones, wearables, and audio gear. She focuses on practical consumer value and build quality.
