Removing styling from a table header and specific table data cells with CSS

I am trying to create an HTML table where I only want to select cells that are not part of the thead section and do not have a specific class. I am having trouble with the selector for this particular case.

table :not(thead):not(.cell-class) {
    background-color: #FFFFFF;
}

+----------------+---------------+----------+----------+
|                |               |          |          |    <-- <thead>
+----------------+---------------+----------+----------+
|  .cell-class   |       x       |     x    |     x    |
+----------------+---------------+----------+----------+
|  .cell-class   |       x       |     x    |     x    |
+----------------+---------------+----------+----------+
|  .cell-class   |  .cell-class  |     x    |     x    |
+----------------+---------------+----------+----------+

I am looking to only select the cells marked with x. Can anyone provide guidance on how to achieve this correctly?

htmlcsscss-selectorscss-tables

Answer №1

Here is the selector syntax that can meet your requirements:

thead, td:not(.cell-class){

}

Answer №2

Give this a shot

tbody td:not(.cell-class) {
    background: #ffffff; 
}

This method should also be effective even if there is no additional tbody tag wrapping your tr elements after the thead. (Confirmed to work in Chrome with this example.)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with highlighting when one string overlaps with another

I am facing a challenge with handling a string that contains Lorem Ipsum text. I have JSON data that specifies the start and end offsets of certain sections within the text that I need to highlight. The approach I am currently using involves sorting the JS ...

javascriptjquerycssangularjshtml

Navigating to a different page in the app following a document update: a step-by-step guide

I am facing an issue with a page where I am trying to print a specific DIV using the script below... function printReceiptDiv() { var divElements; if (vm.isDLR) { divElements = document.getElementById("DLRreportCont ...

javascriptjqueryhtmldom

immediate removal upon pressing the button

Struggling to remove data from a datatable when clicking the delete button for quick admin side action. My code isn't functioning properly, even after attempted fixes. Here's my code: <div class="table-responsive"> <table id="datas" cl ...

phphtml

Bootstrapvalidator does not function properly with select2.js

My code is not validating the select field. What could be causing this issue? Can anyone provide a solution? Apologies for my poor English, and thank you in advance for your response. Here is my form: <form name="form_tambah" class="form_tambah"> ...

javascripthtmltwitter-bootstrapcodeigniter

Creating a dynamic table in HTML with Angular by programmatically inserting rows using components

There's a peculiar issue that I'm facing and I just can't seem to figure out why it's happening. My goal is to display an HTML table using Angular 4. When I use the following syntax to output the table, everything works perfectly: < ...

htmlangular

Attempting to align two div blocks side by side to occupy the entire page

http://jsfiddle.net/UeLMA/1/ Here's the HTML code snippet: <div id="left" style="background: red; display: inline-block; float: left"> aaaa<br /> aaaaa </div> <div id="right" style="background: yellow; float: left">&l ...

jqueryhtmlcss

Python regular expressions: eliminate specific HTML elements and their inner content

If I have a section of text that includes the following: <p><span class=love><p>miracle</p>...</span></p><br>love</br> And I need to eliminate the part: <span class=love><p>miracle</p>.. ...

pythonhtmlregextags

Display the actual runtime hyperlink while utilizing the asp tag helper

Whenever I use asp-tag helpers to create a hyperlink, the result is displayed like this: <a asp-page="/demo">Demo</a> The actual html output looks like this: <a href="/test/Demo">Demo</a> However, instead of displaying "Demo" to ...

c#htmlasp.net-core

What is the reason for the lack of letter-spacing between a nested inline element and the next character that follows?

Upon reviewing the specifications for letter-spacing, it is evident that runs of atomic inlines (e.g. inline-block) are considered as a single character (http://www.w3.org/TR/css3-text/#letter-spacing): For letter-spacing purposes, each consecutive run ...

htmlcss

When using HTML select, text alignment may not be centered properly in the Chrome

Recently, I encountered an issue where the text in select options is not centered in Chrome. Interestingly, using text-align: center on the select element works perfectly fine on Firefox, but fails to do so on Chrome. I haven't had the chance to test ...

htmlcss

Emphasize the designated drop zone in Dragula

Incorporating the Dragula package into my Angular 2 project has greatly enhanced the drag-and-drop functionality. Bundling this feature has been a seamless experience. Visit the ng2-dragula GitHub page for more information. Although the drag-and-drop fun ...

javascriptcssangularng2-dragula

Utilizing a hidden file-input, IE10 is able to transmit a FormData object via ajax

I'm encountering difficulties when trying to send a form that includes a display:none file-input via ajax. It works fine in Chrome (46.0.2490.71), but not in IE10 (10.0.9200.17492). I've tried various solutions without success, and it's cruc ...

javascriptajaxhtmlfile-uploadinternet-explorer-10

Do matrix filters in IE7 take into account white space sensitivity?

Utilizing CSS transformations, I am reverting to the following Matrix transform specifically for IE7 and IE8. filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.0, M12=0.33, M21=-0.33, M22=0.0,sizingMethod='auto expand') This method function ...

cssinternet-explorerinternet-explorer-7

How can I effectively showcase the content of a text file in HTML using Flask/Python?

Let's discuss the process of displaying large text/log files in HTML. There are various methods available, but for scalability purposes, I propose taking a log file containing space-separated data and converting it into an HTML table format. Here is ...

pythonhtmlflaskjinja2

Tips for altering the color of a specific row in JQuery by targeting its unique id

I've been struggling to accomplish a simple task using Jquery and CSS, but I seem to be stuck. My issue involves making an ajax request to update a PostgreSQL table and retrieve an id in return. This id corresponds to the id of a row in a previously ...

jquerycssajax

I'm struggling to achieve the placement of my logo and navigation bar side by side

Check out the codes here body{ margin: 0; } .logo { text-indent: -999999px; background: url('logo3.png'); width: 216px; height: 219px; } .header{ width: 100%; height: auto; background-color: #eef3f5; padd ...

htmlcss

Expanding Iframes in Joomla K2

Sorry if this question has been asked before, but I'm really struggling here... Here is the URL where the issue is happening: I am trying to embed an iframe from one of my client's websites onto my own personal website. Currently, I have the i ...

htmlcssiframejoomla3.0

Event not tracking properly due to missing label in GA event firing

Seeking assistance with a project I'm currently engaged in. I have created an HTML5 video containing a playlist and encountering difficulties setting up multiple labels in GA to track each individual video play. While I found code online, adapting it ...

javascriptjqueryhtmlgoogle-analytics

Button located beneath or above each individual image within the *ngFor loop

With the *ngFor loop, I am able to populate images but now I want to include a button below or on each image. Unfortunately, my CSS knowledge is limited. Below is the code I have: HTML Code <div class="container"> <div ...

cssangular

When the flexbox is nested in a container with a flex-direction of column, the scrolling

I'm facing a challenge in setting up a basic message container that can scroll when necessary. The issue arises when I place the message box within another container and add a side bar, causing the message box to exceed the parent container's hei ...

htmlcssflexbox