Jump to content
  • 0

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

mishamrv

Asked by mishamrv,

 Share

Question

mishamrv Explorer

mishamrv

Posted
Posted

Ребят, нужно с помощью 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>

c72e79c5581a.jpg

Link to comment
Share on other sites

20 answers to this question

Recommended Posts

  • 0
psywalker Explorer

psywalker

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

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

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

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

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

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

Link to comment
Share on other sites
  • 0
mishamrv Explorer

mishamrv

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

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

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

Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

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

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

Link to comment
Share on other sites
  • 0
Vlad Explorer

Vlad

Posted
Posted

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

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

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

Link to comment
Share on other sites
  • 0
MagAssist Explorer

MagAssist

Posted
Posted

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

А насколько плохо использовать 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). Только что-то не работает пока что, может где-то я накосячил.

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

Link to comment
Share on other sites
  • 0
swetlana Explorer

swetlana

Posted
Posted

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

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

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

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

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

  • Like 1
Link to comment
Share on other sites
  • 0
MagAssist Explorer

MagAssist

Posted
Posted

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

Ну в данный момент это выглядит так - 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

Link to comment
Share on other sites
  • 0
swetlana Explorer

swetlana

Posted
Posted (edited)

во!

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

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

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

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

Edited by swetlana
Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted

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

Link to comment
Share on other sites
  • 0
MagAssist Explorer

MagAssist

Posted
Posted

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

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

Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

Posted
Posted

Ващет есть <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>

Link to comment
Share on other sites
  • 0
MagAssist Explorer

MagAssist

Posted
Posted

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept