Внезапно вопрос по азам CSS! У меня есть структура из десяти div 'ов, вложенных друг в друга как матрешка. К первому (самому внешнему) я применяю класс red. Я хочу, чтобы он и все вложенные div 'ы стали красными. К четвертому я применяю класс blue. Я хочу, чтобы начиная с четвертого и далее вглубь элементы были синие. А к восьмому я применяю снова red. Чтобы, значит, 1-3 и 8-10 были красные, а 4-7 -- синие. Вопрос: как реализовать это на CSS, не применяя JS и не генерируя простыни CSS-кода вроде лесенок из *:not(.red) > *:not(.red) > *:not(.red)? Вопрос не такой простой, как кажется на первый взгляд.

задай первому красный цвет, 4 синий, 8 красный

Без заказов, это же бесплатные макеты брать? Да невооруженным глазом видно, что они не настоящие

Не сработает.

Мне порекомендовали лучше не использовать их

Не сработает.

Берешь в гугол вбиваешь free psd и пошло поехало

Не, там шляпа одна. Чтобы красивый портфель был можно например на elements.envato.com скачать макетов

https://codepen.io/cp3r/pen/jLpJJW

А где сделать портфолио? Как вёрстку туда воткнуть?

На енвато шаблоны платные

https://codepen.io/cp3r/pen/jLpJJW

А теперь просто div задай белый фон

Это значит :где разместить свой код?

А теперь просто div задай белый фон

На енвато шаблоны платные

но если задача стоит так то

но если задача стоит так то

Меня интересует общий случай: применять при помощи классов темы оформления к компонентам. Это должно работать на дочерние элементы, и на все свойства, с любыми дефолтными значениями. Т. е. не полагаться на прозрачность или inherit. Прошу прощения, что изначально сформулировал слишком примитивно.

Меня интересует общий случай: применять при помощи классов темы оформления к компонентам. Это должно работать на дочерние элементы, и на все свойства, с любыми дефолтными значениями. Т. е. не полагаться на прозрачность или inherit. Прошу прощения, что изначально сформулировал слишком примитивно.

У Marcel не получилось. :)

Мое видел? То нужно?

https://codepen.io/VladislavV/pen/yoqrBV

А теперь представь, что у тебя не просто div, а компонент со вложенными элементами. Тогда твой прием сработает, только если использовать селекторы вида .foo.is-red >>>> .foo--bar вместо .foo.is-red .foo--bar, а я хочу этого избежать.

не вижу на самом деле проблемы в том, чтобы начиная с первого блока, снова вернуть inherit

Я вот нифига не понял

Проблема в том, что какой-то внешний стиль может влиять на это.

не, тут nth-child не катит

https://codepen.io/nikfakel/pen/PKBgYM

Задача -- избежать селектора > , чтобы не замусоривать стили и не усложнять до невозможности переопределение стилей.

перед каждым .myBlock.is-blue добавить .myBlock.is-red/.myBlock.is-green и все остальные темы. На миксине можно запилить, чтобы не делать простыню

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