Eugene S Eugene S - 6 months ago 24
CSS Question

How to exclude inner webelement with css selectors

I have this css selector:


that returns a list of elements as it appears in the screenshot below:

List of elements returned by selector

All these elements are are columns of a table and each column content is different. The first element in that list contains a checkbox:

Contents of the first element

I want to exclude that element from the initial list.

Please note that merely ignoring the first element won't work here as this checkbox element is not consistent and does not always appear. Hence it needs to be excluded specifically by one of its inner classes.

I have tried the following with no luck:


Any suggestions?


Here's a pure CSS option:[align="center"])

This selector uses the :not functional notation and an attribute selector.

Here's an example:

/* td elements are red */
.cv-table-panel-element { background-color: red;}

/* td elements that DO NOT have the align="center" attribute are blue */
.cv-table-panel-element:not([align="center"]) { background-color: aqua; }

td { height: 100px; width: 100px; }
    <td class="cv-table-panel-element"></td>
    <td class="cv-table-panel-element"></td>
    <td class="cv-table-panel-element" align="center"></td>
    <td class="cv-table-panel-element"></td>
    <td class="cv-table-panel-element" align="center"></td>