Using class in <td> element - styling

Question

This is probably a very basic question but I cant figure it out with standard approach. I have a table in which I am trying to do a different styling for one column. I thought that the easiest way to do this would use a class="class" property inside this column and then apply styling on it but it doesnt work.

This is exmaple of my table (its filled with JSON objects but its not important now):

<table id="logtable" class="pretty">
        <thead>
            <tr>
                <th>Time</th>
                <th>From</th>
                <th>To</th>
                <th>Payload</th>
            </tr>
        </thead>
        <tbody>
            <c:forEach var="message" items="${messages}">
                <tr>
                    <td><c:out value="${message.timestamp}" /></td>
                    <td><c:out value="${message.sender}" /></td>
                    <td><c:out value="${message.receiver}" /></td>
                    <td class="message"><c:out value="${message.payload}" /></td>
                </tr>
            </c:forEach>
        </tbody>
    </table>

This is the CSS I use (part of it):

table.pretty tbody td {
    text-align: center;
    background: #DEE7EF;
}

This works but when I try to style the last column like this, it doesnt do anything:

table.pretty tbody td .message {
    text-align: left;
}

What am I doing wrong? Thanks for any tips!

Answer 1

You just need:

table.pretty tbody .message {
    text-align: left;
}

(skip the td).

This is because .message means basically "any element with the class message".

On the other hand, td .message means "any element with the class message inside any td element.

Answer 2

You have space betweeb td and message,

replace

table.pretty tbody td .message {

with

table.pretty tbody td.message {

td .message this css selector means you are selecting .message which parent is td. while td.message means td having message class.