CSS, потомки второго уровня

[Oleh]

Непонятна ситуация с указанием потомков элемента.

Есть таблица (2 столбца, 5 рядов). В правой ячейке третьего ряда вложена такая же таблица.

Для внешней таблицы задан стиль #table1 { border: 1px solid black; }

Если указан только этот стиль для внешней таблицы, то он не наследуется внутренней таблицей.

Задаю стиль для ячеек внешней таблицы: #table1 td { border: 1px solid black; height: 30px; width: 100px; }

Стиль для ячеек внешней таблицы наследуется для ячеек внутренней таблицы, хотя на сайте http://htmlbook.ru/css/border написано, что свойство "border" не наследуется.

В книге ("Изучаем HTML, XHTML и CSS", Эрик Фримен, Элизабет Фримен, с.466) написано, что для того, чтобы выбрать только дочерний элемент, нужно поставить знак "больше" между элементов и потомком, т.е. #table1 > td. Но в таблице между ними ещё есть строки ("<tr>"). Получается нужно #table1 tr > td ?

Как применить стиль только к элементам <td> внешней таблицы, чтобы не затрагивались ячейки внутренней таблицы ?

<table id="table1">

<tr>
<td>Выберите кофе:</td>
<td>
<select name="beans">
<option value="Смесь">Домашняя смесь</option>
<option value="Боливия">Боливия</option>
<option value="Гватемала">Гватемала</option>
<option value="Кения">Кения</option>
</select>
</td>
</tr>

<tr>
<td>Тип:</td>
<td>
<input type="radio" name="beantype" value="зерна" checked="checked" />Кофе в зёрнах<br />
<input type="radio" name="beantype" value="молотый" />Молотый кофе
</td>
</tr>

<tr>
<td>Дополнительные услуги:</td>
<td>
<input type="checkbox" name="extras[]" value="упаковка" />Подарочная упаковка<br />
<input type="checkbox" name="extras[]" value="каталог" checked="checked" />Доставка каталога вместе с заказом
</td>
</tr>

<tr>
<td>Доставить по адресу:</td>
<td>

[indent]<table>
<tr>
<td>Имя:</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td>Адрес:</td>
<td><input type="text" name="address" /></td>
</tr>
<tr>
<td>Город:</td>
<td><input type="text" name="city" /></td>
</tr>
<tr>
<td>Страна:</td>
<td><input type="text" name="state" /></td>
</tr>
<tr>
<td>Индекс:</td>
<td><input type="text" name="zip" /></td>
</tr>
</table>[/indent]

</td>
</tr>

<tr>
<td>Комментарии клиентов:</td>
<td><textarea name="comments" rows="10" cols="48"></textarea></td>
</tr>

<tr>
<td></td>
<td><input type="submit" value="Заказать сейчас" /></td>
</tr>

</table>

Edited February 18, 2012 by alexriz
Для кода есть специальный тег [code]

[buddah]

Вам нужно вот этому куску задать определенный стиль?

<tr>
<td>Выберите кофе:</td>
<td>
<select name="beans">
<option value="Смесь">Домашняя смесь</option>
<option value="Боливия">Боливия</option>
<option value="Гватемала">Гватемала</option>
<option value="Кения">Кения</option>
</select>
</td>
</tr>

Задайте класс тегу tr и используйте конструкцию

.myclass td {} либо #table1 .myclass td {}

Edited February 19, 2012 by buddah

[Oleh]

Вам нужно вот этому куску задать определенный стиль?

Нет, мне наоборот, определённому куску (внутренней таблице) НЕ нужно задавать стиль.

Мне нужно, чтобы внутренняя (вложенная) таблица (в которой: Имя, Адрес, Город, Страна, Индекс) не наследовала стиль ячейки (внешней таблицы), в которой она находится.

Проблема в том, что если для ячеек внешней таблицы (#table1) задать границу "border: 1px solid black;", то ячейки внутренней таблицы унаследуют этот стиль, что мне не нужно. Эту ситуацию приходится исправлять переопределением стиля для ячеек внутренней таблицы.

В книге написано, что есть возможность выбирать только дочерние элементы. Например, есть элемент с id - #table1, у него есть дочерние элементы первого уровня - это строки <tr>, дочерние элементы второго уровня - ячейки <td> и т.д.

Ну я вроде бы сам разобрался.

Пример с <div> и <p> (который приводится в книге).

Есть возможность применять стиль только к дочерним элементам первого уровня через знак ">", например "#cont1 > p { }". Стиль элементов <p> контейнера #cont1 не будет применяться к элементам <p> вложенных контейнеров #cont2 и #cont3.

<div id="cont1">
<p></p>

  <div id="cont2">
  <p></p>

    <div id="cont3">
    <p></p>
    </div>

  <p></p>
  </div>

<p></p>
</div>

Но не получится написать так: "#cont1 div > p { }", т.к. <p> уже будет дочерним элементом второго уровня для "#cont1". Придётся контейнеру второго уровня присваивать id или class и писать "#cont2 > p { }". Я думал, что с помощью знака ">" есть возможность выбирать только дочерние элементы как первого уровня, так и второго, третьего и т.д.

В общем, я так понял, что с таблицей не получится так, как с <div> и <p> из-за элемента <tr>.

[Yazon_Nile]

Все проще, чем вы думаете

Вместо #table1 td напишите #table1 > tr > td.

То есть, идет селекция только первой вложенности tr и только первой вложенности td

#table1 td = #table1 tr > td = #table1 > tr td

Все эти селекторы выберут ВСЕ ячейки таблицы.

Только первый уровень - #table1 > tr > td.

[Oleh]

Все проще, чем вы думаете

Вместо #table1 td напишите #table1 > tr > td.

То есть, идет селекция только первой вложенности tr и только первой вложенности td

#table1 td = #table1 tr > td = #table1 > tr td

Все эти селекторы выберут ВСЕ ячейки таблицы.

Только первый уровень - #table1 > tr > td.

Это не работает.

Если написать #table1 > tr > td, то пропадают границы ячеек и внешней, и внутренней таблиц.

Я такой CSS-код и сам пробовал.

Не получается с помощью знака ">" выбирать только потомки второго и далее уровней. Знак ">" работает только с потомками первого уровня.

Edited February 28, 2012 by Oleh

[Yazon_Nile]

Ну так а тебе что надо?

Задай стили для ячеек всей таблицы. + перебей стили для дочерних ячеек.

[Oleh]

Ну так а тебе что надо?

Задай стили для ячеек всей таблицы. + перебей стили для дочерних ячеек.

Так в том и дело, что я спрашивал можно ли задать стиль ТОЛЬКО для ячеек внешней таблицы так, как это делается только для дочерних элементов с помощью знака ">". Но в таблице <td> не является непосредственно дочерним для <table>, т.к. между ними ещё есть <tr>.

Я хотел задать стиль ТОЛЬКО для ячеек внешней таблицы, чтобы НЕ приходилось перебивать стиль для ячеек внутренней таблицы.

Но как я понимаю, применить стиль ТОЛЬКО (">") для дочерних элементов можно только в случае, если эти дочерние элементы являются дочерними элементами первого уровня (т.е., напр., div > div ), а выбрать ТОЛЬКО дочерние элементы второго и дальше уровня с помощью знака ">" не получится (div div > div).

[SelenIT]

Но в таблице между ними ещё есть строки ("<tr>").

И не только

#table1 > tbody > tr > td {...} /* если вы не видите суслика, это не значит, что его нет =) */