My current project involves styling a table. I am looking to apply a specific background color to each odd row, excluding the first row which contains headers.
I attempted the following code without success:
.new-items-table tr:nth-of-type(odd):not(.new-items-table tr:nth-of-type(1))
{
background-color: red;
}
To achieve this effect, all you have to do is:
.item-table-new tr:nth-child(2n + 3) {
background-color: blue;
}
2n + 1 can be written as odd, while 2n + 3 will skip the first two rows.
Check out the demonstration here: http://jsfiddle.net/ABCD/
Consider these alternatives:
1. ~ selector - http://jsfiddle.net/5sKqX/
.new-items-table tr ~ tr:nth-of-type(odd) {background-color:red;}
This targets rows that come after other rows, excluding the header row.
2. utilize <thead> - http://jsfiddle.net/5sKqX/1/
<thead>
<tr><th>Header</th></tr>
</thead>
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
</tbody>
Css:
.new-items-table tr:nth-of-type(even) {background-color:red;}
3. use :not(:first-child) - http://jsfiddle.net/5sKqX/2/
.new-items-table tr:nth-of-type(odd):not(:first-child) {background-color:red;}
In response to your inquiry, I recommend enclosing your headers in <thead></thead> and the main content of the table within <tbody></tbody>. Once you have done this, you can implement the following CSS rule:
.tabular-data tbody tr:nth-child(odd)
{
background-color: blue;
}
My attempt at writing AngularJS JavaScript code seems to be malfunctioning. While the root scope updates properly, the other two scopes FirstCtrl and SecondCtrl do not update as expected when the root scope is updated. I would like all three scopes to upd ...
I'm working on customizing a dropdown menu and I want to add a functionality where if a parent li menu has an arrow class before the ul element, then clicking on that parent li menu will add a class called showMenu only to that specific sub-menu. Her ...
[I'm having trouble isolating links that contain the specific text '/Archive.aspx?ADID='. Even though I have tried to filter for these specific links, I end up retrieving all of the links from the webpage. Once I am able to extract the desir ...
Help! My Bootstrap navbar is not working properly on mobile view. The menu icon shows up but when clicked, no items are displayed. Here is the HTML code for my navbar: <header class="header_area"> <div class="main-menu"> ...
Whenever a user clicks on a date in the jquery datepicker, two ajax calls are triggered. The goal is for the second ajax call to populate the response/data into a paragraph with the class spots within the first ajax call, displaying available spots for th ...
I've been facing the same issue multiple times. Whenever I use the float property to display one block, the next block ends up overlapping with the first one. For example: Consider the following block of code: .row_item{ width: 30%; display: block; ...
Two cards are currently being displayed on the page: <ion-header> <ion-navbar> <ion-title>Home</ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-card class="offersCard"> ...
I am in the process of creating a website login window with an image background, but I'm experiencing issues where the image is being cut in half and moved up. Here is the code snippet I am currently using: .loginbody { background: url(img/LoginB ...
Using static values works perfectly <div style="background: linear-gradient(to right, #0000FF 0%, #0000FF 50%, #FFA500 50%, #FFA500 100%);"></div> in my TypeScript file. this.blueColor = '#0000FF'; this.orangColor = '#FFA500&a ...
My main goal is to efficiently include external HTML files and display them on an Ext.Panel in Sencha touch 2.3 by creating a wrapper module for the HTML file that can be instantiated using xtype, with an external Javascript file for event handling. Updat ...
Currently, I am attempting to utilize jQuery to modify some HTML text by adjusting a slider. I have managed to accomplish this; however, I also need it to happen only if a checkbox is checked. How can I integrate both conditions and ensure that the text ch ...
I am facing a challenge with a form that contains multiple rows and numerous "select" drop-down menus in each row. While I'm presenting a simplified 2x2 example here, the actual form could extend up to 5x5. Here is an outline of my HTML form: <fo ...
I have encountered a situation where I am unable to edit the HTML of a document, specifically a payment page on Shopify, for security reasons. Unfortunately, editing JavaScript is also restricted in this scenario. However, there is a workaround available ...
I have a login form that triggers a JavaScript function upon submission. This function calls a PHP page to process the input. The issue I'm facing is with how the redirections are displayed based on the user's role type. It attempts to display t ...
When I click on an input field that is editable, I want the background color to change to white within the box. Can someone please assist me with this? Below is my code: HTML <div id="section{{section.index}}"> <h2 class="title" contentedit ...
I am looking to target specific CSS styles for Internet Explorer only, without affecting other browsers. Initially, I tried using conditional comments: <!--[if lt IE 7 ]><html class="ie6 ie"> <![endif]--> <!--[if IE 7 ]><html cl ...
My goal is to create an application that allows users to change the background color of a button and then copy the CSS code with the new background color from the <style> tags. To achieve this, I am utilizing a color picker tool from . I believe I ...
Is there a way to enable horizontal scrolling by holding down the mouse click, instead of relying on the horizontal scroll bar? And if possible, can the scroll bar be hidden? In essence, I am looking to replicate the functionality of the horizontal scroll ...
Recently completed my bootstrap toggle hide/show feature and everything seems to be functioning correctly, except for the transition between the different contents. The borders appear jagged and not smooth when activating the toggle. I suspect there may b ...
In a node.js application: How can I lock the top row of a table in place, similar to Excel's freeze panes feature? I think this might involve using some CSS styling, but I'm not exactly sure how to achieve it. When I tried using fixed, the entir ...