Как прокинуть border-color вниз по каскаду, минуя color?

Question

[Николай Чуприк]

<div class = "A">
	<div>
		...
			<div class = "B">...</div>
		...
	</div>
</div>

.A	{
	border-color: red;
}

.B	{
	color: green;
}

Для внешнего дива задан цвет рамки. Я хочу прокинуть border-color в глубоко вложенный див, у которого задан какой-то свой color для текста. И этот color, зараза, перекрывает border-color, и рамка становится тоже green. Как быть?

Важно, что внутренний див находится глубоко, и вариант с border-color: inherit не годится, т.к. надо делать border-color: inherit у всех промежуточных дивов, что не хочется. Есть более разумный путь?

Answer 1

[lamer350]

Не совсем понятно, если вы указали class A и B, значит вы заранее знаете class B? Пропишите ему так же border-color который вам нужен.
Если цель просто задавать цвет рамки в одном месте - пишите просто: .A, .B {}, а если класс неизвестен заранее - .A, .A * {}

UPD: color в вашем случае не перекрывает border-color, просто есть свойства которые унаследуют (color, font и тд), а есть те которые не унаследуют (border как раз к таким относится). Почитайте об этом отдельно. Потому у вас просто border-color по сути не задан и потому используется цвет из color

Comments

[Николай Чуприк]

Ну да, конечно, ничего сложного. Так и надо было сразу: .A * { border-color: inherit }

А класс B ничего не знает и не хочет знать про класс А и цвет рамки. Тем более класс может меняться быть А, а может быть A2, A3, каждый со своей рамкой Тем более этих вложенных дивов целая куча и классов у них там: B1, B2,... B22. Всем прописывать рамку — совсем неправильно.

Answer 2

[ⓒⓢⓢ]

как вариант можете использовать css переменные
https://codepen.io/anon/pen/MRLxdb
потому что унаследует значение первого попавшегося свойства border-color или color

Comments

[Николай Чуприк]

Спасибо. Не совсем то. Дело в том, что у внешнего дива класс А может быть, а может и не быть, или может быть класс C, с третьим цветом рамки, который должен спуститься до внутреннего дива.

В тоже время по логике приложения и его вёрстки класс B не интересно знать про цвет рамки вообще, какая к нему "придёт" сверху каскада, такой и быть. И я не хочу всем внутренним классам писать цвет рамки: есть так, то цвет такой, если иначе, то другой. Тем более я упростил вопрос. Реально там много разных вложенных элементов разных типов, а не только B, и всем им надо отдать общий цвет рамки, определяемый во внешнем диве классом А.

В итоге прокинул с помощь inherit:

.A  {
     border-color: red;
}

.A * {
     border-color: inherit;
}

[ⓒⓢⓢ]

Николай Чуприк, в моём примере классов вообще может не быть - не в этом цель примера была
везде где вам нужен контроль цвета от родителя - используете одну переменную.
Сам родитель так же использует эту переменную.

Дальше при необходимости эта переменная меняется в одном месте (из js или css другого родительского блока) и все дочерние блоки так же меняют цвет без наследования.
Но собственно я предложил вариант, использовать его или нет решайте конечно же сами

[Николай Чуприк]

JRK_DV, спасибо. Ваш ответ заставил-так меня разобраться с переменными CSS.