How To Style Specific Youreka Form Elements

When adding custom CSS to a Youreka form to fulfill a styling need, it sometimes may be necessary to isolate and style a specific element among many potential duplicate elements with the same CSS selector. For example, you may want to change the color of a question label on a form without changing all other question labels as well.

As you can see in the below examples, each Youreka form question label has the same element (<span>) and class (class="label-width").

How the styling applies when using the form question label element (<span>) and class (class="label-width"):

The CSS code for question labels based on their element and class is:

span.label-width {
color: red;
}

Where span is the element and dot notation is used to identify the span with class label-width.

How to style a specific element

In the instance that each element and class is the same, how can we style one element without styling the others?
The answer is to use a data-randomid.

Let’s start by continuing with our example of form question labels, lets style Question 2 in this form section.

1. To style Question 2, start by right-clicking over the label selecting Inspect.
   
2. The console should open with the element for Question 2 highlighted.
   
3. When viewing the Question 2 span element, you should see another span element above it with a class called: class=”control-label”. You should also see the next element above that, a div with a class called: class=”control-group”. Within this div, you will find the data-randomid value.
4. Copy the data-randomid value and save it somewhere.
5. Next, we are going to use this unique value to style our Question 2 element.
6. Previously, we used CSS code to target question labels based on their element and class:
   

   span.label-width {
   color: red;
   }

7. Now, we want to update this code to utilize the data-randomid in the selector so that we can style our specific question label:

   div.control-group[data-randomid="1e2cdee4"] span.label-width {
   color: red;
   }

8. In front of our previous selector, we have added the parent element: div.control-group[data-randomid="1e2cdee4"].
   
   The data-randomid value inside the brackets is where you would paste your unique data-randomid value you copied in the previous steps [data-randomid="Paste Id"].
   
   • .control-group is the class of the div
   • [data-randomid=" "] specifies which div with class control-group we are targeting
   • Finally, we include the child element span.label-width to the right of the parent element with a space in between.

By updating our CSS with a parent element that has a specific data id, we can direct the styling to a specific question label instead of all question labels.

Result:

For more information about CSS syntax: https://www.w3schools.com/css/css_syntax.asp

For more information about CSS selectors: https://www.w3schools.com/css/css_selectors.asp