title: Unable to apply css style to span within list
body: <p>So I have quite an interesting issue here. I'd assume it's something I'm just not aware of or there's a mistake/logical issue somewhere. Anyhow long story short I have a html code with a list that is produced by thymeleaf. The idea is to hide a checkbox button behind each list element, which makes it selectable and therefor gives me a quick and easy way to handle the data java's side.</p>
  
  <p>Anyhow my issue however is with the styling of the selector  element.</p>
  
  <p>I'm trying to change pointer/color when clicked on. I have added a class into the one span element that is used in my css file as follows. I have tried so many different ways and none of it ever applies it to any of the span elements within my css. However if I simply add style within the span element inside html it works fine. So my question here is, what could be the cause as to why it does not work with the css? Or is it simply something I don't understand yet or may have overlooked? </p>
  
  <p>You can find the code below. Any help is much appreciated!</p>
  
  <p>The one in question is </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    .minionInputData {
      width: 100%;
      text-align: center;
      margin-top: 3cm;
  }
  
  .minionInputs p {
      display: inline-block;
      float: top;
      margin-left: 2cm;
  
  }
  
  .minionContent {
      width: 100%;
      text-align: center;
      margin-bottom: 1cm;
  }
  
  .minionInputs {
     margin-bottom: 2cm;
  }
  
  .rolesTableContainer {
      width: 100%;
      text-align: center;
  }
  
  .roles-table input[type=checkbox] {
      vertical-align: middle;
      position: relative;
      bottom: 1px;
  }
  
  
  .rolesText {
   cursor: pointer;
   color: red;
   display: block;
   padding: 10px;
   margin: 3px;
  }
  
  .roles-table input[type="checkbox"]:checked+span {
   color: #ffffff;
   font-weight: bold;
      background: blue;
  }
  
  .argsTableContainer {
      width: 100%;
      text-align: center;
  }
  
  .arguments-table {
      /*margin: 0 0 0 auto;*/
      display: inline-block;
      width: 40%;
      border: 3px solid green;
      padding: 10px;
      overflow:hidden;
  }
  
  .arguments {
      width: 100%;
  }
  
  .arguments table {
      font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
      border-collapse: collapse;
      width: 100%;
  }
  
  .arguments td {
      padding: 8px;
      border-style:outset;
      background-color: #4CAF50;
      height: 100%;
  }
  
  .arguments td input{
      border: 0;
      box-shadow: none;
      width:100%;
      height:40px;
      font-size:26px;
      white-space:nowrap;
      background-color: #4CAF50;
      text-align: center;
  }
  
  .arguments tr:nth-child(even){
      background-color: #ffffcc;
  }
  
  .arguments tr:hover {
      background-color: #ddd;
  }
  
  .addrowbutton {
      float: right;
      top: 200px;
  }
  
  /*.addallarguments {
    background: #ff0000;
    background-image: -webkit-linear-gradient(top, #ff0000, #3f219e);
    background-image: -moz-linear-gradient(top, #ff0000, #3f219e);
    background-image: -ms-linear-gradient(top, #ff0000, #3f219e);
    background-image: -o-linear-gradient(top, #ff0000, #3f219e);
    background-image: linear-gradient(to bottom, #ff0000, #3f219e);
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    text-shadow: 1px 1px 3px #666666;
    font-family: Arial;
    color: #ffffff;
    font-size: 20px;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
  
  }
  
  .addallarguments:hover {
    background: #311ebd;
    background-image: -webkit-linear-gradient(top, #311ebd, #3498db);
    background-image: -moz-linear-gradient(top, #311ebd, #3498db);
    background-image: -ms-linear-gradient(top, #311ebd, #3498db);
    background-image: -o-linear-gradient(top, #311ebd, #3498db);
    background-image: linear-gradient(to bottom, #311ebd, #3498db);
    text-decoration: none;
  }
  
  .confirmButtons{
    text-align: center;
    width:100%;
    bottom:0;
  }*/
  
  .confirmButtons input{
  
   -moz-box-shadow: 1px 2px 5px 0px #899599;
   -webkit-box-shadow: 1px 2px 5px 0px #899599;
   box-shadow: 1px 2px 5px 0px #899599;
   background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #a1a1a1));
   background:-moz-linear-gradient(top, #ededed 5%, #a1a1a1 100%);
   background:-webkit-linear-gradient(top, #ededed 5%, #a1a1a1 100%);
   background:-o-linear-gradient(top, #ededed 5%, #a1a1a1 100%);
   background:-ms-linear-gradient(top, #ededed 5%, #a1a1a1 100%);
   background:linear-gradient(to bottom, #ededed 5%, #a1a1a1 100%);
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#a1a1a1',GradientType=0);
   background-color:#ededed;
   -moz-border-radius:13px;
   -webkit-border-radius:13px;
   border-radius:13px;
   display:inline-block;
   cursor:pointer;
   color:#121212;
   font-family:Verdana;
   font-size:16px;
   font-weight:bold;
   padding:16px 25px;
   text-decoration:none;
   text-shadow:0px 0px 0px #e1e2ed;
  }
  
  .confirmButtons input:hover {
   background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #a1a1a1), color-stop(1, #ededed));
   background:-moz-linear-gradient(top, #a1a1a1 5%, #ededed 100%);
   background:-webkit-linear-gradient(top, #a1a1a1 5%, #ededed 100%);
   background:-o-linear-gradient(top, #a1a1a1 5%, #ededed 100%);
   background:-ms-linear-gradient(top, #a1a1a1 5%, #ededed 100%);
   background:linear-gradient(to bottom, #a1a1a1 5%, #ededed 100%);
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a1a1a1', endColorstr='#ededed',GradientType=0);
   background-color:#a1a1a1;
  }
  
  .confirmButtons input:active {
   position:relative;
   top:1px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" xmlns:th="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"/&gt;
      &lt;title&gt;Minions configurations&lt;/title&gt;
      &lt;h1 align="center"&gt;Minion configuration&lt;/h1&gt;
  &lt;/head&gt;
  
  &lt;body background="../static/images/MainBackground.jpg" th:background="@{images/MainBackground.jpg}"&gt;
  
  &lt;div id="allRolesContent"&gt;
      &lt;form action="#" th:action="@{/minions}" th:object="${selectedRole}" method="post"&gt;
          &lt;select id="allRoles" th:field="*{roleName}"&gt;
              &lt;option th:each="roleObj : ${allMinionRoles}"
                      th:value="${roleObj.getRoleName()}"
                      th:text="${roleObj.getRoleName()}"&gt;ROLES
              &lt;/option&gt;
          &lt;/select&gt;
          &lt;p&gt;&lt;input type="submit" name="addRole" value="Add Formula" /&gt;&lt;/p&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;div id="minionForm" class="minionForm"&gt;
      &lt;link rel="stylesheet" type="text/css" href="../static/css/minions.css" th:href="@{css/minions.css}"/&gt;
      &lt;script src="../static/js/buttons.js" th:src="@{js/buttons.js}"&gt;&lt;/script&gt;
      &lt;script src="../static/js/PageFunctions" th:src="@{js/PageFunctions}"&gt;&lt;/script&gt;
      &lt;div id="minionContent" class="minionContent"&gt;
          &lt;form action="#" th:action="@{/minions}" th:object="${minions}" method="post"&gt;
              &lt;div id="minionInputs" class="minionInputs"&gt;
                  &lt;p&gt;Configuration Name: &lt;input type="text" th:field="*{name}" th:required="required"/&gt;&lt;/p&gt;
                  &lt;p&gt;Enironment(eg LABOR): &lt;input type="text" th:field="*{env}" th:required="required"/&gt;&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="rolesTableContainer"&gt;
                  &lt;div class="roles-table"&gt;
                      &lt;ul&gt;
                          &lt;li style="list-style-type: none;" th:each="role : ${currentMinionRoles}"&gt;
                              &lt;label th:field="*{roleName}" th:value="${role.getRoleName()}"&gt;
                                  &lt;span class="rolesText" th:text="test"&gt;ROLE&lt;/span&gt;
                                  &lt;input type="checkbox" th:field="*{roleName}" th:value="${role.getRoleName()}"/&gt;
                              &lt;/label&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;input type="submit" name="remove" value="Remove" formnovalidate="formnovalidate"/&gt;
                      &lt;button name="moveUP" formnovalidate="formnovalidate"&gt;&amp;ShortUpArrow;&lt;/button&gt;
                      &lt;button name="moveDown" formnovalidate="formnovalidate"&gt;&amp;ShortDownArrow;&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="argsTableContainer"&gt;
                  &lt;div class="arguments-table"&gt;
                      &lt;table id="argsTable" class="arguments"&gt;
                          &lt;h1 align="center"&gt;Arguments list&lt;/h1&gt;
                          &lt;input class="addrowbutton" type="submit" name="add" value="Add Argument" formnovalidate="formnovalidate" onclick="addRow('argsTable','argumentTr')"
                                 th:onclick="'addRow(\'argsTable\',\'argumentTr\');'"/&gt;
                          &lt;tr&gt;
                              &lt;th&gt;Argument Name&lt;/th&gt;
                              &lt;th&gt;Value&lt;/th&gt;
                          &lt;/tr&gt;
                          &lt;tr id="argumentTr" th:each="argument : *{arguments}"&gt;
                              &lt;td&gt;
                                  &lt;input type="text" th:value="${argument.argName}" id="argName" name="argName"/&gt;
                              &lt;/td&gt;
                              &lt;td&gt;
                                  &lt;input type="text" th:value="${argument.value}" id="value" name="value"/&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="confirmButtonsContainer"&gt;
                  &lt;div class="confirmButtons"&gt;
                      &lt;input type="submit" name="saveAll" value="Save Configuration" /&gt;
                      &lt;input type="submit" name="updateConf" value="Update Configuration"/&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>