Menu
Is it possible to set children nodes's styles from within the style of a parent without using the <style> element in <head>?
E.g. I have a table where I have a row (first row below), and I want all text in the TD elements to be font size 7pt.
Something like:
<table>
<tr style='font-size:7pt;'> <--- How do I tell it to apply to child TD elements
<td>cell 1 should be formatted to 7pt font</td>
<td>cell 2 should be formatted to 7pt font</td>
</tr>
<tr>
<td>cell without format</td>
<td>another cell without format</td>
</tr>
</table>
Thanks, Grant
320
It's easy to apply style to a child element, but if you want to apply style to a parent class that already has child elements, you can use the CSS selector child combinators (>), which are placed between two CSS selectors.
The :nth-child(n) selector matches every element that is the nth child of its parent. n can be a number, a keyword (odd or even), or a formula (like an + b). Tip: Look at the :nth-of-type() selector to select the element that is the nth child, of the same type (tag name), of its parent.
The child combinator ( > ) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first. Elements matched by the second selector must be the immediate children of the elements matched by the first selector.
<table>
<tr class="format">
<td>cell 1 should be formatted to 7pt font</td>
<td>cell 2 should be formatted to 7pt font</td>
</tr>
<tr>
<td>cell without format</td>
<td>another cell without format</td>
</tr>
<style>.format>td{font-size:7pt;}</style>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
