Selecting only the ODD or EVEN columns from the table

I want to implement a feature that changes the background of ODD/EVEN rows in a table, but only for cells with the class "important". The table is dynamic and generated by PHP with data from Mysql.

<tr class="change">
   <td>1111</td>
   <td>2222</td>
   <td>3333</td>
   <td>4444</td>
   <td class="important">5555</td>
   <td class="important">6666</td>
<tr>
<tr class="change">
   <td>1111</td>
   <td>2222</td>
   <td>3333</td>
   <td>4444</td>
   <td class="important">5555</td>
   <td class="important">6666</td>
<tr>

Therefore, I aim to apply an ODD or EVEN effect to each <TR>, affecting only specific cells in the table based on the CLASS IMPORTANT.

htmlcssclasshtml-table

Answer №1

Have you found a solution to your issue?

tr.change:nth-child(even) td.special {
  background: #CCC;
}

tr.change:nth-child(odd) td.special {
  background: #FFF;
}

Answer №2

To achieve this task, consider utilizing jQuery's odd or even selector. Additionally, you may need to use the hasClass selector to verify the presence of the important class.

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

Show all menu items in a single row, allowing for customization of the line height

My goal is to showcase all of my menu items in a line while keeping the sub-menus hidden until their parent is hovered over. I achieved the inline display using 'display: inline', but encountered an issue where the sub-menu disappears when the cu ...

htmlcssflexboxinline-styles

Using JQuery toggleclass to add transitioning effects to a :after element

I'm using the toggleClass function to add the class .expend to a div with an ID of #menu, which increases the height of the menu from 100px to 200px with a smooth transition effect. I also have a pseudo-element #menu:after for aesthetic purposes. My ...

javascriptjqueryhtmlcss

Guide on how to print a particular DIV along with its corresponding CSS styling

Is there a way to print a specific DIV in JavaScript while including the styles within it? I have searched through several posts, but haven't found a solution that suits my needs. Is there a single function in JavaScript that can accomplish this? I h ...

javascripthtmlcssprinting

Safari is causing issues with HTML5 Video playback

I have a client with a media-heavy website containing numerous video and audio files. While the videos load perfectly on Chrome, Firefox, and IE, they do not load on Safari for Windows. Here's a snippet of the code: <video controls="controls" type ...

javascripthtmlvideohtml5-video

Appear and disappear div

I am seeking to achieve a specific goal: I want to fade in a div with text after a certain number of seconds, then fade it out. I also want to repeat this process for 4 other divs, ensuring that they do not interfere with each other by appearing while the ...

javascriptjqueryhtml

Steps to repairing the __delitem__ function

{'a': [{'c','d'}, {'d'} ], 'b': [{'d'}, set() ], 'c': [set(), {'a','b','d'}], 'd': [{'a','c'}, {& ...

pythonclass

Guide on integrating CSS into a Vue Bootstrap table design

I am having trouble adding a CSS to my bootstrap vue table template. <template slot="actions" slot-scope="data" :style="{min-width:'150px'}"> <b-button variant="info" @click="showViewModel(data.item)"> <i class="fa fa-e ...

cssvue.jshtml-table

Adding a JSON array to HTML using JavaScript

Looking to incorporate JSON Array data into an HTML list with Headings/Subheadings using JavaScript. I experimented with two methods - one involving jQuery and the other mostly vanilla JS. The initial attempt (link here: http://jsfiddle.net/myu3jwcn/6/) b ...

javascripthtmljquery

Exploring the application of physics in three.js using physi.js and mirror.js on a plane

I'm utilizing mirror.js in three.js to create a mirror plane. I now want to add gravity to that plane, but I encountered an error while trying the following code: var planeGeo = new THREE.PlaneBufferGeometry( 300, 300 ); var groundMirror = new THRE ...

htmlthree.jsgame-physicsphysics-engine

Having trouble retrieving data from the database using php and ajax

I am currently working with bootstrap, php, and ajax. I'm facing some issues that I can't seem to resolve. Additionally, I've noticed that the mysqli_connect function is not highlighting in blue when I type it in Notepad++. Is this normal? ...

phpcssmysqlsqlajax

Implementing dynamic dropdown population in Angular 2 based on selection from another dropdown

I am relatively new to Angular 2 and currently facing a challenge in populating a dropdown menu based on the selection from another dropdown menu from MongoDB. The Issue: While I can successfully load the rooms, I encounter a problem when trying to load t ...

javascripthtmlangularjsmongodbangular2-forms

Designing the presentation of two overflowing text containers positioned next to each other

Hey there, I'm currently working on styling something that shows both the user's username and the title of an item on the same line, similar to how it's done on GitHub: username / title I want to make sure that if the combined width of the ...

javascriptcssangular

Angular: Transforming input types

When the div is pressed, it triggers a function that changes the type of input. There are two password inputs that are changed to text when the function is triggered. Issue Error 1: 'password' may be null. If I enter '' in the password ...

htmlangular

I'm looking for a library or plugin that can be used to develop a customizable sidebar window with docking, resizing, and pinning capabilities similar to the ones found

In Visual Studio, the solution explorer and toolbox windows can be hidden at the side unless pinned. They are also resizable. Is there a way to achieve this same behavior using CSS? Has anyone created a jQuery plugin or similar tool for this? ...

jquerycssjquery-ui

Header sticking in place (Wordpress layout)

As a newcomer to HTML/CSS/PHP, I am taking on the challenge of building a website using an existing WP theme called onetone with a sticky header feature. Despite customizing it extensively, I have encountered a frustrating issue with the header. You can v ...

jqueryhtmlcsswordpressheader

Is there a way to have the card appear on the side when using a foreach loop in PHP?

The card design displayed here needs to be aligned to the side I am attempting to showcase data from my database using PHP Codeigniter. The data is displaying correctly, but the issue I'm facing is that the card layout is positioned vertically instea ...

htmlcssbootstrap-4

Customizing the appearance of all Angular components with styles.scss

Is there a way to create a universal style in styles.scss that can be applied to all Component selectors (e.g. app-componentA, app-componentB ...)? I understand that I could manually add the style to each selector, but I am concerned that it may be forgot ...

cssangular

Aligning the h1 element in a heading section

I'm having trouble centering my h1 element in the header. It should be positioned in the middle of a 450px header, while keeping the nav bar at the top right. Additionally, I would like to add a logo to the top left. I've tried using align, posit ...

htmlcssheaderpositioncentering

Tips for retrieving file data from an input html element

Trying to perform a quick client-side file check for better user experience in JavaScript, but encountering an error that is puzzling. The file is obtained through an input element: The specific error message received is: Uncaught TypeError: Cannot read p ...

htmlfilejscript

Activate just the show more / show less button on the website that has several buttons with identical ids

Whenever the "show more" button is clicked, additional images are displayed in the gallery and the button text changes to "show less". However, in my ExpressionEngine (CMS) templates and entries, all "show more" buttons share the same id, causing other but ...

javascripthtmlbootstrap-4toggle