Unable to apply css style to span within list - html

Question

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.
Anyhow my issue however is with the styling of the selector element.
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?
You can find the code below. Any help is much appreciated!
The one in question is
.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;
}
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8"/>
<title>Minions configurations</title>
<h1 align="center">Minion configuration</h1>
</head>
<body background="../static/images/MainBackground.jpg" th:background="#{images/MainBackground.jpg}">
<div id="allRolesContent">
<form action="#" th:action="#{/minions}" th:object="${selectedRole}" method="post">
<select id="allRoles" th:field="*{roleName}">
<option th:each="roleObj : ${allMinionRoles}"
th:value="${roleObj.getRoleName()}"
th:text="${roleObj.getRoleName()}">ROLES
</option>
</select>
<p><input type="submit" name="addRole" value="Add Formula" /></p>
</form>
</div>
<div id="minionForm" class="minionForm">
<link rel="stylesheet" type="text/css" href="../static/css/minions.css" th:href="#{css/minions.css}"/>
<script src="../static/js/buttons.js" th:src="#{js/buttons.js}"></script>
<script src="../static/js/PageFunctions" th:src="#{js/PageFunctions}"></script>
<div id="minionContent" class="minionContent">
<form action="#" th:action="#{/minions}" th:object="${minions}" method="post">
<div id="minionInputs" class="minionInputs">
<p>Configuration Name: <input type="text" th:field="*{name}" th:required="required"/></p>
<p>Enironment(eg LABOR): <input type="text" th:field="*{env}" th:required="required"/></p>
</div>
<div class="rolesTableContainer">
<div class="roles-table">
<ul>
<li style="list-style-type: none;" th:each="role : ${currentMinionRoles}">
<label th:field="*{roleName}" th:value="${role.getRoleName()}">
<span class="rolesText" th:text="test">ROLE</span>
<input type="checkbox" th:field="*{roleName}" th:value="${role.getRoleName()}"/>
</label>
</li>
</ul>
<input type="submit" name="remove" value="Remove" formnovalidate="formnovalidate"/>
<button name="moveUP" formnovalidate="formnovalidate">&ShortUpArrow;</button>
<button name="moveDown" formnovalidate="formnovalidate">&ShortDownArrow;</button>
</div>
</div>
<div class="argsTableContainer">
<div class="arguments-table">
<table id="argsTable" class="arguments">
<h1 align="center">Arguments list</h1>
<input class="addrowbutton" type="submit" name="add" value="Add Argument" formnovalidate="formnovalidate" onclick="addRow('argsTable','argumentTr')"
th:onclick="'addRow(\'argsTable\',\'argumentTr\');'"/>
<tr>
<th>Argument Name</th>
<th>Value</th>
</tr>
<tr id="argumentTr" th:each="argument : *{arguments}">
<td>
<input type="text" th:value="${argument.argName}" id="argName" name="argName"/>
</td>
<td>
<input type="text" th:value="${argument.value}" id="value" name="value"/>
</td>
</tr>
</table>
</div>
</div>
<div class="confirmButtonsContainer">
<div class="confirmButtons">
<input type="submit" name="saveAll" value="Save Configuration" />
<input type="submit" name="updateConf" value="Update Configuration"/>
</div>
</div>
</form>
</div>
</div>
</body>
</html>

Answer 1

I'm not sure if you are looking for something like this, cus I could not understand quite clear. I made a simple example with jQuery. So, if your list is checked, it will add another class to that span, and this span will take style from stylesheet file, not just if you add inline style.
P.S, you could do this with css too, without jQuery, but I did not change your code structure, so I had to do a simple demo with jQuery.
Hope this helps you!
$("input").on("change", function(){
var _this = $(this);
var checkboxElement = _this.parent().find(".rolesText");
if(_this.is(':checked')) {
checkboxElement.addClass("checked");
}
else {
checkboxElement.removeClass("checked");
}
})
.roles-table input[type=checkbox] {
vertical-align: middle;
position: relative;
bottom: 1px;
}
.rolesText {
cursor: pointer;
color: red;
display: inline-block;
padding: 10px;
margin: 3px;
}
.rolesText.checked {
color: blue;
font-weight: bold;
}
.roles-table input[type="checkbox"]:checked {
color: #ffffff;
font-weight: bold;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="rolesTableContainer">
<div class="roles-table">
<ul>
<li style="list-style-type: none;" th:each="role : ${currentMinionRoles}">
<label th:field="*{roleName}" th:value="${role.getRoleName()}">
<span class="rolesText" th:text="${role.getRoleName()}">Role Name Here</span>
<input type="checkbox" th:field="*{roleName}" th:value="${role.getRoleName()}"/>
</label>
</li>
<li style="list-style-type: none;" th:each="role : ${currentMinionRoles}">
<label th:field="*{roleName}" th:value="${role.getRoleName()}">
<span class="rolesText" th:text="${role.getRoleName()}">Role Name Here</span>
<input type="checkbox" th:field="*{roleName}" th:value="${role.getRoleName()}"/>
</label>
</li>
<li style="list-style-type: none;" th:each="role : ${currentMinionRoles}">
<label th:field="*{roleName}" th:value="${role.getRoleName()}">
<span class="rolesText" th:text="${role.getRoleName()}">Role Name Here</span>
<input type="checkbox" th:field="*{roleName}" th:value="${role.getRoleName()}"/>
</label>
</li>
</ul>
<input type="submit" name="remove" value="Remove" formnovalidate="formnovalidate"/>
<button name="moveUP" formnovalidate="formnovalidate">&ShortUpArrow;</button>
<button name="moveDown" formnovalidate="formnovalidate">&ShortDownArrow;</button>
</div>
</div>

Answer 2

Cascading styles sheets are as they sound - cascading so you cannot go backwards or upwards, only forwards and downwards. If you want to style something if the checkbox is checked, place it after the checkbox and use a sibling selector - either + or ~:
.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 {
/* this means the span that directly follows a checked input */
color: #ffffff;
font-weight: bold;
background: blue;
}
/* if you need the span to appear first, use the following */
label {
display: flex;
align-items: center;
}
label>span {
order: 1;
}
label>input {
order: 2;
}
<div class="rolesTableContainer">
<div class="roles-table">
<ul>
<li style="list-style-type: none;" th:each="role : ${currentMinionRoles}">
<label th:field="*{roleName}" th:value="${role.getRoleName()}">
<input type="checkbox" th:field="*{roleName}" th:value="${role.getRoleName()}"/>
<span class="rolesText" th:text="${role.getRoleName()}">test</span>
</label>
</li>
</ul>
<input type="submit" name="remove" value="Remove" formnovalidate="formnovalidate" />
<button name="moveUP" formnovalidate="formnovalidate">&ShortUpArrow;</button>
<button name="moveDown" formnovalidate="formnovalidate">&ShortDownArrow;</button>
</div>
</div>