CODEWITHSUNDEEP
htmlcss
DrewB
DrewB

Reputation: 1536

CSS Child selector not working as expected

I have an HTML table with another table embedded in it like:

table.index {
  border-radius: 10px;
  border: solid 1px #61a2d1;
  border-spacing: 0;
}
table.index > thead > tr:first-child {
  background-color: #61a2d1;
}
table.index > thead > tr:first-child > td:first-child {
  border-top-left-radius: 10px;
}
table.index > thead > tr:first-child > td:last-child {
  border-top-right-radius: 10px;
}
table.index > thead td {
  font-weight: bold;
  text-align: center;
}
table.index > tr:nth-child(3) {
  background-color: rgba(97, 162, 209, 0.5);
}
table.index > tr:hover {
  background-color: #ffda6d;
}
table.index > tbody > tr:last-child td:first-child {
  border-bottom-left-radius: 10px;
}
table.index > tbody > tr:last-child td:last-child {
  border-bottom-right-radius: 10px;
}
table.index .no-right-borrder {
  border-right: none;
}
table.index .no-left-border {
  border-left: none;
  text-align: right;
}
table.details {
  margin: 0;
  padding: 0;
  border: solid 1px #61a2d1;
  border-spacing: 0;
}
	<table class="index" style="width:100%">
	<thead>
		<tr>
			<td style="width:2%"></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="no-right-borrder" style="vertical-align:middle"><span class="fa fa-caret-right fa-lg"></span></td>
			<td class="no-left-border" style="text-align:left;"></td>
			<td class="no-right-borrder" style="text-align:center"></td>
			<td class="no-left-border"></td>
		</tr>
		<tr>
			<td colspan="4" style="padding:0;margin:0">
			<table class="details" style="width:100%">
				<tbody>
					<tr>
						<td colspan="2"><label for=""></label></td>
						<td colspan="2"></td>	
					</tr>
					<tr>
						<td colspan="2"><label for=""></label></td>
						<td colspan="2"></td>
					</tr>
					<tr>
						<td colspan="2"><label for=""></label></td>
						<td colspan="2"></td>
					</tr>
					<tr>
						<td colspan="2"><label for=""></label></td>
						<td colspan="2"></td>
					</tr>
				</tbody>
			</table>
			</td>
		</tr>
	</tbody>
</table>

When I open this page, the cells in the table with the class details have rounded corners just like the cells in the table with the class index.

I've used the direct child selector to indicate that I only wanted the routed borders to be applied to direct children of a table with the index class, so I'm not sure why it's happening. When I examine the DOM in Google Developer Tools, it tells me that the border-radius attribute is coming from the .index class. What do I need to do to stop that from happening?

edit: This is what I'm seeing on my local machine. CSS code is copied exactly from my code. Table was simplified because it's auto-generated, but the classes are applied identically.

enter image description here

Upvotes: 1

Views: 704

Answers (1)

Oli Beatson
Oli Beatson

Reputation: 841

I suspect you need to change table.index > tbody > tr:last-child td:first-child into table.index > tbody > tr:last-child > td:first-child (putting the direct descendant selector between tr > td), and the same for the td:last-child selector that directly follows.

Upvotes: 2

Related Questions