Как сделать смену стилей для повторяющегося дива?

Увы, так меняется весь фон дива, а нужно, чтобы менялся цвет у a:before , a:after
Может быть как то задать условие JS через HasClass(), пробую, но не получается. Я с js мало знаком

Fouks, Вам походу не подсказка нужна, а обучение основам. Если хотите менять :before то таким же самым способом необходимо вывести класс вместо цвета и через классы задавать любые дополнительные стили тем новостям к которым вы добавите эти дополнительные классы.

Fouks, При помощи таких конструкций вы можете менять состояние шаблона новости как угодно

Виталий, Тогда это будет ограниченный цветовой диапазон, только тот который я пропишу в стилях.
А мне нужно изменить только цвет. Если были бы новости идентичны, то ради бога проблем бы никаких не было. Но это не так. И если я пропишу так, как вы написали выше, то для данного элемента это сработает, но при этом изменит другие элементы.
Допустим у 1-го элемента нужно изменить боковой градиент, меняю цвет. Он поменяется, но при этом поменяется и нижний градиент. Поэтому этот стиль заденет не эту новость, а ту у которой стоит такой градиент.

Fouks, Вы просто не понимаете, что вы можете сделать при помощи шаблона и доп полей любый модификацию, просто необходимо включить логику. Я не знаю сколько у вас вариантов цвета, поэтому предложил самый логичный и правильный вариант в таких ситуациях, но если у вас вариантов неограниченное количество, то замените свой псевдоэлемент before на div и стилизуйте его как хотите, тем способом который я написал в самом начале, только подключите стиль не к блоку, а к этому новому div. Или вы хотите чтобы за вас все написали и телепатически достали всю информацию, которую нужно учитывать? Вы же видите по комментариям, что кроме вас, ваш вопрос никто не понимает.

Виталий, Сделал по вашему. Создал div, растянул и добавил градиент. структура:
Контент /* plus вставляется рандомно и не в каждую новость */
1-ая новость(доп класс .plus)
.new div{
to left, rgba(255, 255, 255, 0) 35%, #fff 62% ) /* полностью писать не буду, не обращайте внимание */
}
2-ая новость(без доп класса) с градиентом
.new.plus div{
to bottom, rgba(255, 255, 255, 0) 40%, #fff 67%)
}
В shortstory так:
Контент

Как мне вписать сюда доп поле чтобы если есть свойство плюс, то выводился нужный градиент с написанным в доп поле цветом.
А если плюса нет, то соответственно другой градиент с написанным в доп поле цветом?

Fouks, Я немного не понял, как у вас в одном дополнительном поле может быть 2 цвета?
Создайте 2 поля с разными цветами и в зависимости от класс манипулируйте цветами. Например 1 поле div-1 втрое поле div-2 если плюс есть, то div-2 не показываем, если нет, то не показываем div-1 или как-то так. Вообще сложно понять ваше тз.

Виталий, Не два цвета на поле, одно, как и для всей новости. Только так как свойство plus появляется для новости рандомно, поэтому для него должен быть прописан и градиент который у свойства plus.
То есть за каждой новостью прикрепляется цвет. И смотря, есть ли у него свойство plus или нет, выводить нужный градиент с цветом.

Леонид, Так а в чем проблема то? Если у плюс другой градиент то переопределяйте его при помощи !important

Виталий, В прошлом сообщении редактор съел код html.
Может я очень туплю, будьте добры напишите рабочую строчку сюда. Допустим доп поле с цветом [xfvalue_x]. И они повторяются

<div class="new  (plus)"><div  style="  ...  "></div>Контент</div>
<div class="new  (plus)"><div  style=""></div>Контент</div>  
<div class="new  (plus)"><div  style=""></div>Контент</div>  
<div class="new  (plus)"><div  style=""></div>Контент</div>

Пустой блок дива это градиент. Обозначил plus в скобках, то есть появляется рандомно.

Предположим [xfvalue_имяДопПоля] = to left, rgba(255, 255, 255, 0) 35%, #fff 62% ) или любое другое значение заданное через дополнительное поле

Отдельно в css файле прописываем стиль для новости с класcом plus. Стиль со свойством !important будет перекрывать то что мы задали через дополнительное поле:

.new.plus .new__decor{
to bottom, rgba(255, 255, 255, 0) 40%, #fff 67%) !important
}

На выходе мы получим что-то вроде этого:

<div class="new"><div class="new__decor"  [xfgiven_имяДопПоля]style="background: [xfvalue_имяДопПоля];[/xfgiven_имяДопПоля]></div>Контент</div>
<div class="new"><div class="new__decor"  [xfgiven_имяДопПоля]style="background: [xfvalue_имяДопПоля];[/xfgiven_имяДопПоля]></div>Контент</div>
<div class="new  plus"><div class="new__decor"  [xfgiven_имяДопПоля]style="background: [xfvalue_имяДопПоля];[/xfgiven_имяДопПоля]></div>Контент</div>
<div class="new"><div class="new__decor"  [xfgiven_имяДопПоля]style="background: [xfvalue_имяДопПоля];[/xfgiven_имяДопПоля]></div>Контент</div>

В итоге, все стили класс .new__decor будут задаваться через дополнительное поле, но если у какого-то из блоков появиться класс .plus, то он будет перекрыт стилем из css файла

Виталий, Очень хорошая идея засунуть в доп поле всё значение. Я почему то об этом не подумал.
Но если у нас будет plus, то он будет всегда белый, а нужно, чтобы цвет сохранялся.
Что бы новость с красным боковым градиентом при появлении plus была с этим же красный, но уже с нижним градиентом.

Уже пол дня сижу думаю, надежду на html и css потерял, пробую через js, но так как знания поверхностные, не выходит

Леонид, Я вас вообще не понимаю. Я уже за вас все написал. Если вам нужно дополнить стили у плюса, а не заменить, то берите и дополняйте таким же способом через ксс файл, например для другого блока назовите его plus__decor и стилизуйте

Виталий, Хорошо, вы не совсем допоняли, но дали правильный ход мыслей! Спасибо за потраченное время