Spring, Thymeleaf with CSS how to color the errors

Question

So, I have this:

<td th:if="${#fields.hasErrors('teacher.name')}" th:errors="*{teacher.name}">Name Error</td>

It works, it prints out the desired message on the screen, but how to color the messages in my style.css file? Which class to use? I've tried using th:errors, th:if, errors... Also tried to name a class, eg.: <td class="validation-error" th:if="${#fields.hasErrors('teacher.name')}" th:errors="*{teacher.name}">Name Error</td> and then puting the validation-error in the style.css file, but nothing worked... I know it is a dumb question, but I lost my mind with it.

My style.css file looks like this:

input[type=text], textarea, select {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #DDDDDD;
border-radius: 4px;
width: 400px;
}

input[type=text]:focus, textarea:focus, select:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
border: 1px solid rgba(81, 203, 238, 1);
}

input[type=submit] {
background-color: dodgerblue;
border: none;
color: white;
padding: 10px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 4px;
}

td[class=validation-error] {
color: red;
}

Answer 1

Did you remember to precede the classname with a fullstop?

ie:

.validation-error{..}

instead of

validation-error{..}

In CSS classes need to be preceded by a full stop (.) and IDs by a hashtag (#), only native elements can be selected with their name alone.