tr tags in a table

[Shorty]

Is it possible to use CSS to affect all tr tags within a certain table with the class of tbl

so what i mean is

<table class="tbl">
<tr>
<td>
row of stuff
</td>
</tr>
<tr>
<td>
another row of stuff
</td>
</tr>
</table>

would it be possible to give each tr its own background image without putting a class in each of those? and just going off the table class? I hope this makes since. lol

[Shrike]

While you can do it off the table class, it's more efficient in terms of selector matching to give each tr a class. Although, to be fair, if you're only going to be having one or two tables with that class, it's not that big a deal.

Best way: give each tr a class then use .thatclass { }

Way you're asking: .tbl > tr { }

[Shorty]

I decided to google it.

lol. and i jw. could you not do

.tbl tr

wouldn't that affect all tr tags within the element of class tbl?

[Shrike]

Jun 11, 2012 12:24:29 GMT -8 Shorty said:

I decided to google it.

lol. and i jw. could you not do

.tbl tr

wouldn't that affect all tr tags within the element of class tbl?

You could but, as your table isn't using <colgroup> or <thead> tags, there's no need to make it search through every part of the table for any extra <tr>s. If you were nesting the <tr>s inside things like that, then you would need to do that (or add classes to the <tr>s).

In other words, the <tr>s will all be immediate children of the <table>, so you may as well use the child selector.

[Shorty]

okay, so in the link provided, why is the second span that is in the div not affected? My question with this. is that this method affects the next thing correct? So how would that then affect on the other tr tags?

[Shrike]

The trick is to look at the indentation.

The blue background is only being applied to spans that are immediate children of the div. Because the second one is a child of a span in the div, it doesn't get the blue background. Likewise, the third span isn't even in the div, so it doesn't get affected.

Maybe my (probably over-complicated ) example will be clearer. In this example, using .exp > span { color: red; font-weight: 700; } shows which spans are immediate children of the things with a .exp class. The immediate children of the .exp classes are in bold, and ones that are spans are in red too, those are the ones that the CSS would affect. Note that the purple span isn't affected because it isn't an immediate child of a .exp element, even though the span that it's a child of is.

<div>
   <div class="exp">
      <h1>a header</h1>
      <span>some text</span>
   </div>
   <img src="http://image.com/loldog.jpg" />
   <span class="nope">
      <span>nothing to see here</span>
   </span>
   <span class="exp">
      <img src="http://image.com/lolcat.jpg" />
      <span>
         <p>Using this many spans probably isn't good</p>
         <span>this took 9 nbsps to "indent"</span>
      </span>
   </span>
</div>

EDIT: Just saw your edit, and in case my example doesn't explain it, it will effect more than just the first one. As long as it is being nested directly inside the div with the class, then it will be affected. If it is nested inside some other element that is then nested inside the div, it won't be affected

[Shorty]

okay i got you now. once you said the span was inside the other span i got what you meant. thank you. alright and now i get why u say i could use the moethod i said with colspan and thead. because the tr tags arent children of the table. they are of the colspan and thead. i got you now. that makes a alot more since.

[Shrike]

No worries, and thanks for making sense of my explanation