Geek asks and answers

Set CSS style for child nodes in style attribute

Is it possible to set the style of child nodes in the parent style without using the <style> element in the <head>?

eg. I have a table where I have a line (first line below), and I want all the text in TD elements to be 7pt in font size.

Sort of:

  <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

+5
source share
5
<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>
+3

scoped :

  <table>
    <tr>
    <style scoped>  <--- "scoped" tells the browser to apply the styles inside the tr
        {your-selector}{             
            {styles}
        }
    </style>
      <td>cell 1 should be formatted to 7pt font</td>
      <td>cell 2 should be formatted to 7pt font</td>
    </tr>
    ...
  </table>

, Browsersupport - atm.

Html5Doctor, , polyfill, , .

:

FF, Chrome Opera, , : HTML5Rocks

+1

, , , :-) , .

0

. , JavaScript .

→ IE7 UP

<style>
table tr:first-child > td {font-size:7pt;}
</style>

, .

0

.

The style attribute indicates the inline style for the element. ( source )

You can use jQuery to accomplish what you want:

<script>
$("tr:first-child td").attr("style", "font-size:7pt");
</script>
0
source

More articles:


All Articles