Question

I’m trying to add an asterisk symbol before the label so that it looks like *Country based on the parent node with “required” class

  <span id="Country" class="none required">
  <label for="id_Country">Country</label>
    <select name="Country[]" id="id_Country">
       <option value="Paraguay">Paraguay</option>
       <option value="Peru">Peru</option>
    </select>
  </span> 

I’m trying something like:

.required:first-child:before {
    content : "* ";
    color   : red;
}

Answer 1

If you are trying to apply the * before the label, then you need to use the CSS selector as follows:

.required > label:first-child:before {
    content : "* ";
    color   : red;
}

The :first-child selector applies to the actual element it is modifying. In other words, it needs to be read as “apply this css before the label that is the first-child to it’s parent. This parent must also have a class of required” not “apply this css before the first-child of node with required as class” as is done in your original example.