How to add css class to a field from a select list before rendering? I have a select list which has the following values where the key values are the same name as the css class name.

List1:


prim-blue|Blue
prim-black|Black
prim-orange|Orange


We also have a text field which is surrounded by the following div tag below. Before the page renders, we want to take the value from list1 and assign it as a class to the div tag. We need assistance in figuring out how to get this to work using a preprocess hook. 

/*css*/
prim-blue {
   //some attribute
}
prim-black {
   //some attribute
}
prim-orange {
   //some attribute
}

/*field div tag */
&lt;div id="target-element"&gt; &lt;h1&gt; Some text values &lt;/h1&gt; &lt;/div&gt;


Desired results (when page renders):

**Assume list1 is set to Blue (key: prim-blue)

&lt;div id="target-element" class="prim-blue"&gt; &lt;h1&gt; Some text values &lt;/h1&gt; &lt;/div&gt;


Note (to provide more context):

I am using the paragraph module which a bundle that has a background color for list1 and the text field. Then on the basic page content type, i added a paragraph field.

Paragraph bundle fields:


text (field_text)
background color (field_bkg_clr) &lt;-- the drop down list1


Basic Page content type:


Header (field_pr_hdr, which is of type paragraph)
I have used the Field Formatter CSS class module for the same task. The client wanted to have predefined colors for heading elements in paragraph bundles. I have to admit this seems like an amendable approach, but it worked.

I had set up a vocabulary for the color names list and referenced this in the paragraph bundle as a select list (taxonomy term reference). In the display settings for the field is css-class selected. The format settings are set to target tag = entity. 

This results basically in following markup:

&lt;div class="entity entity-paragraphs-item paragraphs-item h1-colorclass-red"&gt;
    &lt;div class="field-name-field-heading"&gt;This is a headline&lt;/div&gt;
&lt;/div&gt;


CSS:

.h1-colorclass-red .field-name-field-heading {
    color: red;
}