Apply Style to Only First Level of Td Tags

Apply style to only first level of td tags

Is there a way to apply a Class' style to only ONE level of td tags?

Yes^*:

.MyClass>tbody>tr>td { border: solid 1px red; }

But! The ‘>’ direct-child selector does not work in IE6. If you need to support that browser (which you probably do, alas), all you can do is select the inner element separately and un-set the style:

.MyClass td { border: solid 1px red; }
.MyClass td td { border: none; }

---

^*Note that the first example references a tbody element not found in your HTML. It should have been in your HTML, but browsers are generally ok with leaving it out... they just add it in behind the scenes.

CSS selector to style only the first level of td's inside a table

.myTable > tbody > tr > td {

  color: red;

}

td > table {

    color: initial;

}

<table class="myTable">

  <tr>

    <td>Red, please</td>

  </tr>

  <tr>

    <td><table><tr><td>No red, thanks</td></tr></table></td>

  </tr>

</table>

CSS style for first td in a tr

Your syntax was incorrect.

td { text-align: right };                    /* This was being applied */
td:first-child { text-align: left };         /* This wasn't.. */

Should be:

td { text-align: right; }
td:first-child { text-align: left; }

Note the semi-colons - they shouldn't be outside of the brackets {}

Other than that, you were using :first-child properly.

jsFiddle demo

Apply style to cells of first row

Use tr:first-child to take the first tr:

.category_table tr:first-child td {
    vertical-align: top;
}

If you have nested tables, and you don't want to apply styles to the inner rows, add some child selectors so only the top-level tds in the first top-level tr get the styles:

.category_table > tbody > tr:first-child > td {
    vertical-align: top;
}

Apply CSS rule to only the first td in tr 's WITHOUT assigning a class/id?

Yes. It´s possible:

Use in your CSS

.mytable tr td:first-child  { border: 1px solid black; }​

Try Here

How to select first td of first two rows using css

Use td to set styles to all td elements and use td td to reset the styles to the nested td elements.

td {
  // styles
}

td td {
  // styles to reset the nested elements
}

CSS target first level of class row only and not nested ones

Your code compiles to the following two selectors:

.personal-details > .row .columns:first-child
.personal-details > .row .columns:last-child

You are correctly targeting the first level of .row elements, but because the nested .columns elements are descendants of their own .row parent and the first-level .row parent, those are matched as well.

So you need to add more > combinators:

.personal-details > .row{
    > .columns:first-child{
        padding-left:0;
    }
    > .columns:last-child{
        padding-right: 0;
    }
}

This will produce the following selectors which will match just the top-level .columns elements:

.personal-details > .row > .columns:first-child
.personal-details > .row > .columns:last-child

Apply Css style to all tags inside Div

You had to use in your CSS

#FirstSection, #FirstSection * {
  border: 1px solid red !important;
}

Note; The #FirstSection * is only for the nested elements. The * is a universal selector who fits for everything (the nested depth doesn't matter), but it has to be existant. So for your DIV itself you need #FirstSectionadditionally.

You can see it on this example:

#FirstSection, #FirstSection * {
  border: 1px solid red !important;
}

<div>Normal</div>
<div id="FirstSection">Firstsection
  <p>P-Test  </p>
  <table>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
  </table>
  <div>Second
    <span>Nested span</span>
    Div
    <a href='google.com'>google.com</a>
    <div>Third</div>
  </div>
</div>
<div>After</div>

Select all except first and last td element in one selector

It is syntactically correct, as you can quickly check using the W3C CSS Validator. The validator is known to have errors, so in principle, you should check the rule against CSS specifications, especially Selectors Level 3. The result is still that yes, it is correct.

It also has the desired meaning, since this is how selectors combine. You can use :not(...) selectors to express a condition of type “not ... and not ...”.

This applies provided that all children of tr elements are td. If there are header cells, i.e. th elements as well, then the selector applies to those data cells (td elements) that are not the first data cell or the last data cell in a row with .red class.

---

Related Topics