Am I using the correct combination of CSS selectors (and/or/negation)? - html

Question

I am arranging my CSS stylesheet for a responsive website, and some elements become hidden under a given screen width (please see the media query in CSS code).
The problem occurs when I have to hide a table column (th, td both identified by a class) for a certain table, whereas the layout of all my tables uses selectors such as last-of-type or last-child, without any class indication. Here, the class which is hidden is .teacher.
I can not make it work with attached CSS, the line I am struggling with is the following:
table.rounded thead th:last-of-type:not([style*='display: none'])
It's my first time so far using the not() selector, and as far as I know CSS is sometimes sensitive to spaces in the selector combination, so as I could spend much time trying to fix syntax whereas it is a misuse issue, or vice versa, I am requesting for support.
I'm looking for:
a way to fix the mistake(s) my combination of selectors, if any. Or
know why it wouldn't work in any way.
otherwise, find an alternative combination of selectors, even if it
is long.
In both cases, I don't want a solution using JS as I have the constraint of not using JS. If there is no solution to above, I will find a turnaround (additional class / IDs, font size/color, width, etc.).
body {
background-color: #ffffff;
/* White */
}
* {
font-family: palatino, verdana;
word-wrap: break-word;
}
em {
font-style: normal;
font-weight: bold;
}
strong {
/* bold by default */
}
p {
color: #000000;
/* Black */
}
.centered {
text-align: center;
}
th.hours,
td.hours {
width: 120px;
}
td.hours {
font-size: 0.9em;
}
th.teacher,
td.teacher {
min-width: 90px;
max-width: 130px;
}
td.teacher {
font-size: 0.9em;
}
/* Section */
section {
float: center;
border: solid black 1px;
background-color: blue;
padding: 5px;
-webkit-border-radius: 0px 0px 8px 8px;
/*Safari,Opera,Chrome*/
-moz-border-radius: 0px 0px 8px 8px;
border-radius: 0px 0px 8px 8px;
}
section p {
color: #000000;
/* Black */
font-size: 1em;
}
section table {
float: center;
max-width: 90%;
margin: auto;
border-collapse: collapse;
/* does not work with property Radius */
border-spacing: 0px;
}
section table th {
background-color: silver;
/*gray*/
}
section table td {
background-color: #ffffff;
/* White */
}
section table th,
section table td {
color: #000000;
/* Black */
font-size: 1em;
margin: 5px 0px 3px 0px;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 5px;
padding-right: 5px;
border: 1px solid black;
vertical-align: middle;
text-align: left;
}
/* Table with rounded corners */
/* - borders */
table.rounded {
border-collapse: separate;
}
table.rounded tr {
border: 0px;
}
table.rounded th,
table.rounded td {
border-top: 1px solid black;
border-bottom: 0px;
border-left: 0px;
border-right: 1px solid black;
}
table.rounded th:first-of-type,
table.rounded td:first-of-type {
border-left: 1px solid black;
}
table.rounded tr:last-of-type td {
border-bottom: 1px solid black;
}
table.rounded td.afterrowspan {
/* follows in next tr, after the tr including the td which has rowspan defined */
border-left: 0px;
}
/* - corners */
table.rounded thead th:first-of-type {
/* 10px 0 0 0 : Top Left, for table with min 2 columns */
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
}
table.rounded thead th:last-of-type:not([style*='display: none']) {
/* 0 10px 0 0 : Top Right, for table with min 2 columns */
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
border-top-right-radius: 10px;
}
table.rounded tbody tr:last-child td:last-child {
/* 0 0 10px 0 : Bottom Right, for table with min 2 columns */
/* tr:last-child td:last-child because tr:last-of-type td:last-of-type doesn't work with IE */
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
}
table.rounded tbody tr:last-of-type td:first-of-type {
/* 0 0 0 10px : Bottom Left, for table with min 2 columns */
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
}
/* Mobile - or thin screens - specificities */
#media (max-width: 600px) {
section {
box-sizing: border-box;
max-width: 100%;
overflow: hidden;
}
section table th,
section table td {
font-size: 0.80em;
}
th.hours,
td.hours {
width: 105px;
}
td.hours {
font-size: 0.80em;
}
th.teacher,
td.teacher {
display: none;
}
}
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link type="text/css" rel="stylesheet" href="style.css">
<title>Courses</title>
</head>
<body>
<section class="element_2">
<p class="centered">
<table class="rounded">
<thead>
<tr>
<th class="centered">Day</th>
<th class="centered hours">Hours</th>
<th class="centered">Course</th>
<th class="centered teacher">Teacher</th>
</tr>
</thead>
<tbody>
<tr>
<td class="centered" rowspan="3"><strong>Monday</strong></td>
<td class="centered hours afterrowspan">19:00 - 20:00</td>
<td><em>How to climb a building</em> (beginners)</td>
<td class="teacher" rowspan="3">The Amazing Spiderman</td>
</tr>
<tr>
<td class="centered hours afterrowspan">20:00 - 21:00</td>
<td><em>How to fall from a building's wall</em> (beginners)</td>
</tr>
<tr>
<td class="centered hours afterrowspan">21:00 - 22:00</td>
<td><em>How to climb a building</em> (experienced)</td>
</tr>
<tr>
<td class="centered" rowspan="2"><strong>Thursday</strong></td>
<td class="centered hours afterrowspan">19:00 - 20:30</td>
<td><em>How to stay calm</em> (beginners)</td>
<td class="teacher" rowspan="2">The Incredible Hulk</td>
</tr>
<tr>
<td class="centered hours afterrowspan">20:30 - 22:00</td>
<td><em>How to stay calm</em> (experienced)</td>
</tr>
<tr>
<td class="centered"><strong>Friday</strong></td>
<td class="centered hours">19:00 - 22:00</td>
<td colspan=2>Description of various events in a loooooooooooonger text. Longer than that. About this long.</td>
</tr>
</tbody>
</table>
</p>
</section>
</body>
</html>