The CSS3 :nth-child(odd) Selector is not working for either columns or rows in the selection

I am facing an issue with a table where I have used tr:nth-child(odd) to alternate row background colors.

HTML

/*-----------#602 SAO Styles-----------------------------*/

/*---------SAO Global------------*/

.sao-pricing-table table {
  border-collapse: collapse;
  width: 80%;
  margin: 0 auto;
  background: #ffffff;
}
.sao-pricing-table table td {
  height: 20px;
}
table.sao-table {
  border-collapse: collapse;
}
/*-----Basic Title Cells---------*/

.sao-top-1 {
  border: 0px;
  background: #FFFFFF;
  height: 40px;
  width: 40%;
}
.sao-top-2 {
  font-size: 16px;
  text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.3);
  color: #FFFFFF;
  border: 0px solid #a8b5b9;
  background-color: #003869;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  height: 40px;
  width: 30%;
}
.sao-top-2-title {
  font-size: 110%;
}
.sao-top-2-type {
  font-size: 120%;
}
.sao-top-2-price {
  font-size: 100%;
}
/*------Gold Title Cells------*/

.sao-top-3 {
  font-size: 16px;
  text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.3);
  color: #FFFFFF;
  border: 0px solid #a8b5b9;
  background-color: #F2A405;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  height: ;
  width: 30%;
}
.sao-top-3-title {
  font-size: 110%;
}
.sao-top-3-type {
  font-size: 130%;
}
.sao-top-3-price {
  font-size: 100%;
}
/*----Regular Cells-----*/

#sao-table table {
  border-collapse: collapse;
  width: 100%;
}
th,
td {
  padding: 0.25rem;
  text-align: center !important;
  border: 1px solid #ccc;
  height: 20%;
}
tr.sao-zebra:nth-child(odd) {
  background: #23282D !important;
}
.sao-feature {
  text-align: left !important;
}
/* Checkmark Style-----*/

.sao-checkmark {
  font-size: 125%;
  color: #F2A405;
  text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.2);
}
<div class="sao-pricing-table">
  <table class="sao-table">
    <thead>
      <tr>
        <th class="sao-top-1">
        </th>
        <th class="sao-top-2">
          <span class="sao-top-2-title">Some Text</span>
          <span class="sao-top-2-type">More Text</span>
          <span class="sao-top-2-price">Even More Text</span>
        </th>
        <th class="sao-top-3">
          <span class="sao-top-3-title">Some Text</span>
          <span class="sao-top-3-type">More Text</span>
          <span class="sao-top-3-price">Even More Text</span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th class="sao-feature">Text</th>
        <td class="sao-detail">Text</td>
        <td class="sao-detail">Text</td>
      </tr>
      <tr>
        <th class="sao-feature">Text</th>
        <td class="sao-detail">Text</td>
        <td class="sao-detail">Text</td>
      </tr>

There seems to be a problem with my table layout. The nth-child pseudo selector is making every other column black instead of alternating rows. How can I fix this issue? Edit: I tried the row span example recommended, but it doesn't use the nth-child selector. I'm unsure of what I'm missing. Can someone provide some insight?

Answer №1

In your CSS selector, there seems to be an extra space before the :nth-child pseudo-class.

tr.sao-zebra:nth-child(odd) {
  background: #23282D;
}

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

Preventing the use of double-click on Grooveshark

I am currently in the process of creating a webpage to serve as a jukebox for parties. My goal is to have the page load Grooveshark with a transparent overlay (or any other necessary method) that can prevent users from forcefully adding their song to the f ...

Stable navigation for seamless website navigation

I am experiencing an issue with the fixed navigation at the top of my site. The navigation links to sections further down on the page, but it overlaps part of the section I link to instead of stopping exactly at the beginning of the section. You can see an ...

Slide in the Toggle Effect to Your Navigation Menu

Seeking help with enhancing my jQuery dropdown menu to include a slide down toggle effect similar to this example: http://jsfiddle.net/LaSsr/188/. Any assistance in applying this slide effect to the following JSfiddle would be greatly appreciated. Thank yo ...

Tips for notifying a user about leaving a page without saving their information

I created a small table where users can input product names and numbers. My question is, how can I notify the user if they try to leave the page without saving the entered information? <form action="index.php" method="post"> <input type="text" ...

Get rid of or substitute any unnecessary information at the beginning of the `class` name

I am receiving style information from the backend, but it includes an unwanted prefix. I need to remove this prefix and keep only the necessary styling. Can you suggest the correct approach? This is the current style code I am obtaining: <style> 04 ...

I am unable to reach POST; instead, I keep receiving GET

After deciding to expand my knowledge, I delved into the world of NodeJS and ReactJS, excited about learning something new. However, there is a dilemma that requires assistance. On the server side, I installed several packages such as MySQL, body-parser, n ...

Text in gray overlaying image background

I am attempting to design a layout that resembles the following: https://i.sstatic.net/S5CCK.jpg Although I can create the letter "A" using svg or clip-path, my challenge lies in maintaining the background inside the "A" aligned with the body background. ...

A guide to mastering the art of descending using three distinct class types

My script is functioning properly for a single class, but it fails to work for multiple classes with the same purpose. I attempted to transfer from div (#panel) to class (.panel) as I am using several classes. However, this adjustment did not resolve the i ...

Bootstrap button groups do not support the checking functionality of radio buttons

My bootstrap modal contains a form with two radio style buttons created using the example for normal button styled radio options found here: <form id="changePlanForm" action="/change_plan_submit.php" method="post"> & ...

Problem with Active State of DOM Element

My goal is to create an effect where clicking on a DOM element, specifically a list, will cause the target list to rotate and remain in that position. Describing it can be a bit challenging, so I have provided a visual example of what I'm working on ...

Embed a hyperlink within an informational passage

I have a search box with Ajax functionality like this; And I want to customize the NotfindText message to display as: "No results found, but you can try advanced search from here" However, I am struggling to add the link. I do not have much knowledge abo ...

Looking to retrieve just your Twitter follower count using JavaScript and the Twitter API V1.1?

I am trying to retrieve my Twitter follower count using JavaScript/jQuery in the script.js file and then passing that value to the index.html file for display on a local HTML web page. I will not be hosting these files online. I have spent weeks searching ...

What are the steps to create an endless scrolling feature?

I'm trying to create a slider with a horizontal scrolling effect, but I've hit a roadblock. How can I make the slider scroll infinitely? In my code, you can see that after Item 6, it stops scrolling and I have to scroll backward. However, I want ...

Sidebar misalignment

Apologies in advance for what may seem like a trivial question, but I have been grappling with this all day and can't seem to find the solution. I've tried adding and removing divs without success. To make things easier, I've created two liv ...

Watching a video play within a slider and transitioning seamlessly to an image once the video ends

I am currently facing an issue with a video playing inside a HeroCarousel slider. Before the slider, there is an image and after the slider, there is another image. This is my code: <div data-time="8000" data-prev-src="/media/splash/slider-left.png" ...

Is it possible to simultaneously toggle buttons and submit a form?

I am currently working on a functionality that involves toggling the display of two buttons and submitting a form. Code toggleButtons() { var btn1 = document.getElementById("start"); var btn2 = document.getElementById("pause"); if (btn1.style. ...

Possible conflict between CSS and JavaScript on Magento website

Problem Description: Visit this link for more details I am facing an issue with the product upload process when using certain attributes. It appears to be related to a positioning problem. Despite trying various solutions, such as removing the position at ...

Tips for customizing text color in a disabled MUI TextField?

In the disabled TextField, I want the text color to be black instead of the default gray. I attempted the following after finding inspiration from this source: <TextField id="outlined-basic" value={'https://git.responsive.software/my-app ...

Tips for adjusting the animation position in Off-Canvas Menu Effects

I am currently utilizing the wave menu effect from OffCanvasMenuEffects. You can view this menu in action below: ... // CSS code snippets here <link rel="stylesheet" type="text/css" href="https://tympanus.net/Development/OffCanvasMenuEffects/fonts/f ...

Enhancing text display and spacing in Safari versions 5 to 6, as well as Chrome

After creating an introductory animation using jquery, I noticed that it displays correctly on my machine in Firefox, Chrome, and Safari. However, when viewing it on the client's devices, the animation is not working properly. The client provided a s ...