Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Can I select all child TD's using Parent TR's id?

Status
Not open for further replies.

LyndonOHRC

Programmer
Sep 8, 2005
603
US
Code:
tr[id^="W9Data"] {
 border-bottom: 1px solid black;
}
I can select the tr's but I need to select it's child TD's.
The Parent TR's have an id beginning with string "W9Data". I'm trying to select the child TD's to apply a bottom border to them.

Any help much appreciated.

Lyndon



Lyndon
 
Try:
Code:
tr[id^="W9Data"] [b]td[/b] {
 border-bottom: 1px solid black;
}

----------------------------------
Phil AKA Vacunita
----------------------------------
OS-ception: Running Linux on a Virtual Machine in Windows which itself is running in a Virtual Machine on Mac OSx.

Web & Tech
 
So I wonder if I'm misunderstanding the ^? These TR's are dynamically named W9Data1, W9Data2, W9Data3... My understanding is that the caret would select ID's that contain "W9Data".



Lyndon
 
This tr[id^="W9Data"] selects all TRs that have an ID that starts with "W9Data". If there's anything before that, it will not work.
In other words: <tr id="W9Data1"> would be selected, <tr id="something W9Data1"> would not.

Adding the TD after that, should select all TDs that are children of all TR's that have an ID that starts with "W9Data"

Just like doing tr#theID td{} would select all td that are children of Tr's that have an id of "theID".

The code works with this example HTML:
Code:
<!DOCTYPE HTML>
<html>
<style type="text/css">
td
{
	border: 1px solid blue;
}
tr[id^="W9Data"] td
{
	border: 1px solid red;
}
</style>
	<body>
		<table>
		<tr id="W9Data1"><td>cell1</td><td>cell2</td><td>cell3</td></tr>
		<tr id="W9Data1"><td>cell1</td><td>cell2</td><td>cell3</td></tr>
		<tr id="else_W9Data1"><td>cell1</td><td>cell2</td><td>cell3</td></tr>
		<tr id="W9Data1"><td>cell1</td><td>cell2</td><td>cell3</td></tr>
		</table>
	</body>
</html>

Note that the 3rd row, would not have a border as it would match the CSS selector.








----------------------------------
Phil AKA Vacunita
----------------------------------
OS-ception: Running Linux on a Virtual Machine in Windows which itself is running in a Virtual Machine on Mac OSx.

Web & Tech
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top