Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > CSS объединение элементов по родителькому

Автор: Molodec 11.3.2011, 16:05

Добрый вечер! Помогите, пожалуйста, решить проблему.
Она заключается в следующем. Есть элементы (колонки таблицы). Подобных таблиц на странице несколько, поэтому у каждой таблицы ей свой класс(идентификатор) и как мне быть, чтобы установить свойства для перечисленных столбцов, определенной таблицы, указав ее класс всего один раз. То, есть, как сократить код приведенный ниже?

Код


table.t-data-grid tbody tr td.Short,
table.t-data-grid tbody tr td.isObsolete,
table.t-data-grid tbody tr td.Name,
table.t-data-grid tbody tr td.action,
table.t-data-grid tbody tr td.isDirection,
table.t-data-grid tbody tr td.isArea

Заранее благодарен.

Автор: ayax2005 11.3.2011, 16:28

Не совсем ясно что вы имеете ввиду - в коде вижу классы, не вижу идентификаторов.

Именно приведённый кусок можно сократить так, и то что быть уверенным в результате нужно видеть ваш html:

Код


.t-data-grid .Short,
.t-data-grid .isObsolete,
.t-data-grid .Name,
.t-data-grid .action,
.t-data-grid .isDirection,
.t-data-grid .isArea

Автор: Molodec 11.3.2011, 16:35

ayax2005, простите.
Дело в том, что у меня классы выступают идентификаторами. А именно для таблиц. Это я изменю. И буду обращаться не через ".", а "#". Но сама суть, если бы можно было бы отобрать элементы один раз указав .t-data-grid.
То есть, хотелось бы чтобы была подобная конструкция:
.t-data-grid(.Short, .isObsolete, .Name, .action, .isDirection, .isArea){
Свойства CSS
}

Автор: ayax2005 11.3.2011, 17:41

У вас каждый столбец каждой таблицы имеет какие-то особенные свойства?
Вряд ли.
Для одинаковых столбцов разных таблиц укажите просто одинаковый класс и объявляйте его один раз.

Если для всех ваших столбцов в рамках одной таблдицы необходимо задать идентичные стили - делайте .tableclass td{}

Вашу "конструкцию" я не понимаю - вы в ней вроде подрузамеваете одинаковые стили, а из текста следует обратное.

Автор: SelenIT 11.3.2011, 17:55

В современном CSS напрямую группировать ничего нельзя, таких "скобок" не предусмотрено :(. Есть инструменты типа LESS/SASS, где можно так писать, но на выходе это всё равно разворачивается в обычный громоздкий синтаксис.

А надо ли вообще указывать родительскую таблицу? Эти классы могут использоваться где-то еще? Таблицы с разным id оформлены по-разному?

И нужно ли везде повторять tbody tr? Неужели ячейки с этими классами бывают еще в thead/tfoot и там у них стили другие?

Автор: Molodec 14.3.2011, 09:11

Цитата(ayax2005 @ 11.3.2011, 17:41

)

Если для всех ваших столбцов в рамках одной таблдицы необходимо задать идентичные стили - делайте .tableclass td{}

В пределах каждой таблицы есть 6 стобцов, каждый из которых имеет в данной таблице уникальный класс.

Цитата(SelenIT @ 11.3.2011, 17:55

)

А надо ли вообще указывать родительскую таблицу? Эти классы могут использоваться где-то еще? Таблицы с разным id оформлены по-разному?

Таблицы одинаковы. То есть в каждой из таблиц есть столбцы с данными классами.

Цитата(SelenIT @ 11.3.2011, 17:55

)

И нужно ли везде повторять tbody tr? Неужели ячейки с этими классами бывают еще в thead/tfoot и там у них стили другие?

Да. В thead и tbody будут повторяться.

Автор: SelenIT 14.3.2011, 12:47

Цитата(Molodec @ 14.3.2011, 09:11

)

Таблицы одинаковы. То есть в каждой из таблиц есть столбцы с данными классами.

Цитата(Molodec @ 14.3.2011, 09:11

)

В thead и tbody будут повторяться.

Тогда, имхо, достаточно указывать только то, от чего реально зависит итоговый стиль:

Код


.t-data-grid td { ... } /* общие стили ячеек всех таблиц */
tbody td.Short { ... }
tbody td.isObsolete { ... }
...
thead td.Short { ... }
thead td.isObsolete { ... }
...
/* и т.д. */

Автор: Molodec 21.3.2011, 11:07

Код


tbody td

tbody, к сожалению, есть во всех таблицах.
Поэтому данной строкой мы изменим стиль во всех таблицах.
Только в первом случае определенной таблицы.

Автор: SelenIT 21.3.2011, 15:32

Так эти классы Short, isObsolete и т.д. для разных таблиц определены всё-таки по-разному? И различия никак не объединить и не вынести в отдельную запись а-ля .t-data-grid td?

Если так, тогда, конечно, чуть сложнее. Но уж tr-то точно можно каждый раз не писать, td-шек вне tr-ок и подавно не бывает...

Автор: Molodec 22.3.2011, 09:15

Цитата(SelenIT @ 21.3.2011, 15:32)

Если так, тогда, конечно, чуть сложнее. Но уж tr-то точно можно каждый раз не писать, td-шек вне tr-ок и подавно не бывает...

Да

Верно. Думаю, вопрос стоит считать решенным.
Спасибо, ребята. smile