CSS: в отдном столбце текс одним цветов, в другом другим

mishamrv · March 5, 2011

Ребят, нужно с помощью CSS сделать так, что бы не использовать классы для изменения цвета текста. Есть ли возможность как то указать порядок ячейки или что-то в этом роде в CSS, чтобы не прописывать атрибут класса как каждому td тегу, если таблица большая?

<table>
	<tr>
		<td>text 1 (color 1)</td>
		<td>text 2 (color 2)</td>
	</tr>
	 ...............
	 ...............
	 ...............
	 ...............
	 ............... 
	<tr>
		<td>text 1 (color 1)</td>
		<td>text 2 (color 1)</td>
	</tr>
<table>

psywalker · March 5, 2011

Есть, но не понимает ИЕ6.

td {}

td+td {}

SelenIT · March 5, 2011

IE (6 в том числе) зато понимает задание color для тега <col>. Имхо, можно иногда комбинировать, как минимум с :first-child...

mishamrv · March 5, 2011

Это кроссбраузерный метод?

Ок, в Мозилле вроде работает. В ИЕ 6 что-то не пашит.

А есть что-нибудь подобное для colspan в CSS?

Edited March 5, 2011 by mishamrv

psywalker · March 5, 2011

Это кроссбраузерный метод?
Ок, в Мозилле вроде работает. В ИЕ 6 что-то не пашит.
А есть что-нибудь подобное для colspan в CSS?

Не colspan, а <col> - почитай про него http://htmlbook.ru/html/col

IE (6 в том числе) зато понимает задание color для тега <col>.

Слушай, а какие ещё свойства понимают <col> в ИЕ6 например?

mishamrv · March 5, 2011

Не colspan, а <col> - почитай про него http://htmlbook.ru/html/col
Слушай, а какие ещё свойства понимают <col> в ИЕ6 например?

Нет, нет, я именно мею в виду тег colspan для объединения колонок. Как-нибдуь можно его в CSS задать?

SelenIT · March 5, 2011

а какие ещё свойства понимают <col> в ИЕ6 например?

Честно говоря, не помню, нагуглить сходу тоже не выходит. Но по-моему всё, связанное со шрифтами (цвет, жирность и т.п.), прокатывало (и табличка Styles в msdn как бы подтверждает). Мне казалось, что и text-align срабатывал, но не уверен (чуть позже проверю)...

Vlad · March 6, 2011

Наиболее грамотно использовать :nth-child, но с кроссбраузерностью проблемы. Или так — с кроссбраузерностью всё отлично, только картину портит одна маленькая противная пчёлка с дёгтем.

psywalker · March 6, 2011

Честно говоря, не помню, нагуглить сходу тоже не выходит. Но по-моему всё, связанное со шрифтами (цвет, жирность и т.п.), прокатывало (и табличка Styles в msdn как бы подтверждает). Мне казалось, что и text-align срабатывал, но не уверен (чуть позже проверю)...

Понял, сппасибы

MagAssist · March 16, 2011

Здравствуйте!

А насколько плохо использовать nth-child и к каким классам его можно привязать, в примере показан tr. А у меня такая ситуация, что код выглядит так:

.spec_eshop_tree_links .level_1 {  }
.spec_eshop_tree_links .level_1 .item_normal {  }
.spec_eshop_tree_links .level_1 .item_selected {  }
.spec_eshop_tree_links .level_1  a:link , .spec_eshop_tree_links .level_1 a:visited,
.spec_eshop_tree_links .level_1  a:active, .spec_eshop_tree_links .level_1  a:hover  { 
	text-decoration: underline; 
	font-size: 1em; 
	text-transform: none;
}

Получается в таком случае нужно использовать его совместно с .spec_eshop_tree_links .level_1? Т.е. .spec_eshop_tree_links .level_1:nth-child(2n). Только что-то не работает пока что, может где-то я накосячил.

Этот код отображает список ссылок категорий товаров и хочется выделить каждую четную другим фоном, я на правильном пути, подскажите, пожалуйста.

swetlana · March 16, 2011

:nth-child использовать не плохо, а хорошо.

минус только в том, что старые ослы его не понимают. Так что окончательный выбор решения — применять или нет — принимается на основании того, насколько даннный элемент оформления критичен и насколько критична поддержка безнадёжно устаревших браузеров.

Применяется к тем элементам, которые и надо считать.

То есть, если делать полосатую таблицу, то к tr. Если каждую ячейку по своему оформлять — к td. Каждый элемент списка по своему — к li.

Если покажете сайт и опишете требуемый результат, вполне вероятно, получите развёрнутый ответ с примерами.

MagAssist · March 16, 2011

Спасибо большое за ответ!

Ну в данный момент это выглядит так - www.deloks.ru (левый блок каталог), а хотелось бы так - http://s015.radikal.ru/i331/1012/48/a1ea87119b84.png .

Код который за это отвечает:

.spec_eshop_tree_links { 
	line-height: 2.5em; 
}
.spec_eshop_tree_links .item_popup_picture {}
.spec_eshop_tree_links .item_small_picture {}
.spec_eshop_tree_links .item_picture {}

.spec_eshop_tree_links .level_0  {  }
.spec_eshop_tree_links .level_0  a:link , .spec_eshop_tree_links .level_0  a:visited,
.spec_eshop_tree_links .level_0  a:active, .spec_eshop_tree_links .level_0  a:hover  { 
	text-decoration: underline; 
	font-size: 1.2em; 
	text-transform: uppercase; 
}
.spec_eshop_tree_links .level_0  a:hover { text-decoration: none; }
.spec_eshop_tree_links .level_0 .item_normal {  }
.spec_eshop_tree_links .level_0 .item_selected { }

.spec_eshop_tree_links .level_1 {  }
.spec_eshop_tree_links .level_1 .item_normal {  }
.spec_eshop_tree_links .level_1 .item_selected {  }
.spec_eshop_tree_links .level_1  a:link , .spec_eshop_tree_links .level_1 a:visited,
.spec_eshop_tree_links .level_1  a:active, .spec_eshop_tree_links .level_1  a:hover  { 
	text-decoration: underline; 
	font-size: 1em; 
	text-transform: none;
	border-style: solid;
	padding: 5px; 
}
.spec_eshop_tree_links .level_1  a:hover { text-decoration: none; }

Как я понял я неправильно его применяю, ставлю сразу после .spec_eshop_tree_links .level_1

swetlana · March 16, 2011

во!

все бы вопрошающие так делали.

Здесь просто:

.level_1 > div:nth-child(even) { background: описать_как_надо; }

только это не будет работать в старых ослах. Надеюсь, не критично.

Edited March 16, 2011 by swetlana

MagAssist · March 16, 2011

Я не употребил div. Спасибо большое за урок!

SelenIT · March 16, 2011

Если критично, для старых IE можно вбить экспрешн, напр., из этой давней статьи моего бывшего коллеги. Элементов в списке вроде немного, сильно страницу это не перегрузит (а если и... — то так им, ретроградам, и надо!)

wanntuzz · March 17, 2011

экспрешны не будут в мазиле работать

SelenIT · March 18, 2011

И не надо. Зато бихевиоры будут, если поговорить с ними "по-взрослому" (подробности по ссылке выше)

MagAssist · March 28, 2011

Большое спасибо за предложения и такую интересную статью! Но к сожалению, я еще новичок и нужно будет мне ее поразбирать на досуге как следует, чтобы понять

Пока что использую первый вариант, вроде неплохо. Единственное столкнулся с такой непоняткой: если для всего списка элементов задан, например отступ слева и для него нужно же применить полосатость для каждой второй записи... как в таком случае поступить?

Great Rash · March 28, 2011

Ващет есть <col>...


<table>
	<col style="background: red;" />
	<col style="background: green;" />
	<col style="background: blue;" />

	<tbody>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
		</tr>
	</tbody>
</table>

MagAssist · March 29, 2011

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

psywalker · March 29, 2011

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

Ну а что мешает так же сгенерировать и col?

Sign In

CSS: в отдном столбце текс одним цветов, в другом другим

Question

Link to comment

Share on other sites

20 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information