Селекторы дочерних элементов и вложенные талицы

F315 · July 27, 2011

Добрый день!

Столкнулась с такой проблемой:

есть таблица с другой вложенной таблицей.

Нужно применить стили ко всем первым ячейкам только внешней таблицы.

Конструкция table tr>td:first-child применяет стили и первым ячейкам и внешней, и внутренней таблицы.

Конструкция table>tr>td:first-child - не работает

Например (нужно применить синий фон только первой ячейке внешней таблицы):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>Шаблон Html</title>
	<style type="text/css">
		table {
		border-collapse: collapse; 
		width:100%;
		}

		table td{
		border:solid 1px red;
		padding:10px;
		}

		div{
		width:200px;
		height:100px;
		background:green;
		}

		.table1 tr>td:first-child{ /*синий фон для первой ячейки*/
		background:blue;
		}

	</style>
</head>

<body>
<table class="table1">
		<tr>
			<td>
				<div></div>
			</td>
			<td> 
				<table>	
					<tr>
						<td>
							<div></div>	
						</td>
						<td>
							<div></div>	
						</td>						
					</tr>
				</table>
			</td>
		</tr>

	</table>
</body>
</html>

В результате синий фон у первых ячееек всех таблиц.

Таблиц много, поэтому прописывать каждой первой ячейке класс очень муторно.

Может есть какие варианты кроме этого?

SelenIT · July 27, 2011

Конструкция table>tr>td:first-child - не работает

Потому что там неявный tbody еще: table>tbody>tr>td:first-child

Возможно, проще будет сделать, как в старые времена делали ради IE6: для td:first-child задать нужный фон, а для table table td:first-child — переопределить обратно на нейтральный...

Softlink · July 27, 2011

.table1 tr>td:first-child{ /*синий фон для первой ячейки*/
                background:blue;
                }

				.table1 tr>td>table td:first-child{
				background:none;
				}

так же работает.

о, SelenIT уже опередил)

Edited July 27, 2011 by Softlink

F315 · July 27, 2011

Потому что там неявный tbody еще: table>tbody>tr>td:first-child

спасибо огромное! :rolleyes: два дня билась над этим

как раз переопределяла стили для вложенных таблиц через !important, но это не вариант, потому что работаю с фреймворком jsf, а там вложенность таблиц может достигать пяти и больше

Sign In

Селекторы дочерних элементов и вложенные талицы

Question

F315

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

SelenIT

Link to comment

Share on other sites

Softlink

Link to comment

Share on other sites

F315

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information