Tips for targeting a specific class selector instead of an n-th child selector in CSS

My table element is generated dynamically by Angular, with rows that change based on data. The layout of the page is as follows:

<table class="myDataGrid">
    <thead>
        <tr>
            <th>In Service</th>
            ....
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in data" ng-class="{'offline': item.InService}">
            <td>{{item.InService}}</td>
            ...
        </tr>
    </tbody>
</table>

Even though I have defined CSS selectors to set row background colors alternately, the "offline" class does not apply as expected:

.myDataGrid tbody tr 
{
    background-color:black;
}

.myDataGrid tbody tr:nth-child(2n + 1)
{
    background-color:gray;
}

The issue arises when trying to style the "offline" class separately from the existing classes:

.offline
{
    background-color: darkred;
}

To address this problem, I attempted to enhance specificity:

.myDataGrid .offline
{
    background-color: darkred;
}

While it worked for the black rows, the gray ones remained unaffected.

The query then becomes: how can I target the gray rows specifically? Attempts with different selectors such as:

.myDataGrid .offline tbody tr:nth-child(2n + 1)

And

.myDataGrid tbody tr:nth-child(2n + 1) .offline

Did not yield desired results or appear in the inspector tree.

Answer №1

To make sure the offline class is applied to the tr itself and not one of its children, remove the space between tr:nth-child and .offline.

.myDataGrid tbody tr:nth-child(2n + 1).offline

Alternatively, you can use:

.myDataGrid tbody tr.offline:nth-child(2n + 1)

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

Imagine a webpage with a width of 1000 pixels. Can you determine the precise horizontal position (from the left) of the div element with the unique id of "inner_div"?

Hello everyone, I hope you're doing well. I recently took a test and unfortunately got this question wrong. Imagine a web page with a width of 1000px. What is the exact horizontal (from the left) position of the div element with id "inner_div"? < ...

Effortless Table Extraction using PHP's Simple HTML DOM Parser

I am in the process of extracting HTML data from a local weather channel's website in order to gather closing information for schools, businesses, and churches in my area. However, I am facing an issue as the information is housed within tables that ...

aligning buttons vertically within a dual-column design

I'm trying to create a two-column layout, where the left column contains a vertically centered button and the right column is text only. Although I have successfully implemented the two-column layout, I am facing difficulty centering the button due t ...

Is it possible to ensure that an <a href stays at the top of the page with jQuery

I have implemented the supersized plugin to display a rotating fullscreen image background that includes <a> tags. However, since it is positioned behind my site content, the images cannot be clicked. I am curious if there is a way to bring an < ...

Providing the full response object when resolving a promise from $http

Recently, I encountered an issue with a method in one of my service used for making API calls. The method looks like this: this.postData = function(requestURL, requestObj) { var deferred = $q.defer(); console.log("Reached APIService @POST", reques ...

The HTML dropdown menu is malfunctioning

I've been struggling to create a website with a dropdown menu. Despite following various guides and searching for solutions, the menu is behaving strangely. I've tried numerous tactics, so some lines of code may be unnecessary. The submenu is ap ...

Storing a JSON object using the caching capabilities of HTML5

As an intern with minimal technical experience, I apologize if my question appears basic. I have been searching for an answer for days without much success. My current project involves developing a Phone Directory. I am now working on creating a frequentl ...

What is the technique for creating a repeating image rather than stretching it?

Is there a way to repeat a background image to fit its content? I have a background image that needs to be repeated in this manner: https://i.sstatic.net/qVKkp.png However, when using the following code: .imgbord { background: url('https://i.imgur ...

Is there a directive in AngularJS that allows for binding HTML templates using ng-bind-html

I'm working on a directive that has the ability to use dynamic templates with expressions inside them. The challenge I face is if I use ng-bind-html, the expression won't be evaluated properly. On the other hand, using ng-bin-template results in ...

add the closing </div> tag using jquery only

Having a slight issue here, it seems that jQuery is being overly clever. Within my HTML code, I am attempting to insert this string into a div container: </div><div class="something"> You'll notice that the closing tag comes first, foll ...

calculate total using Angular JS version 1.5.5

<div ng-app="myApp" ng-controller="myCtrl"> First Number: <input type="text" ng-model="firstNum"><br> Last Number: <input type="text" ng-model="lastNum"><br> <br> Result: {{firstNum + lastNum}} </div> I'm ...

Tips for making a rounded text box

How can I design a circular textarea where the text conforms to the shape? Here is my attempt, but I'm unsure how to keep the text inside the circle without relying on javascript. ...

Filtering Firebase JSON data with AngularJS: A step-by-step guide

Utilizing AngularJS to retrieve and filter Firebase Database JSON data is causing Array errors while trying to filter through the code: Error: [filter:notarray] http://errors.angularjs.org/1.4.9/filter/notarray? Here is a snippet of my HTML: <form> ...

Guide on incorporating database-sourced audio playback using buttons in PHP and HTML

Building my website with an audio player inside has been a bit challenging. I encountered an issue when trying to combine songs loaded from the database with a play button. My goal is to have the play button change when clicked and load the song from the d ...

Remove a table along with its contents from HTML code using PHP

I'm working with some HTML code that includes a table, and I need to completely remove the table and its contents using PHP. While I know how to strip the table tags using PHP's strip_tags function, I'm not sure how to delete the table conte ...

stop automatic resizing of windows

My CSS is written using percentages. I need to maintain the percentages intact. Is there a way to stop the layout from changing when the browser window is resized? I want the percentages to remain unaffected, even when the browser window is being resized ...

Storing various values in the database using CakePHP 3

While working on receiving data, I encountered an issue where the saved time in the database is different from what was input. For example, when I send 8:00 pm, it gets saved as 12:00 am due to a +4 hour difference. When I receive data from a form and che ...

How can I retrieve the name of an HTTP status code using JavaScript and AngularJS?

My web application is built using AngularJS, JS, JQ, HTML5, and CSS3. It interacts with our projects' REST API by sending various HTTP methods and manipulating the data received. The functionality is similar to what can be achieved with DHC by Restlet ...

Counting newlines in a variable length in AngularJS is not being considered

Whenever I input text and include new lines using test.length, the new lines are not counted within the string. Since I am utilizing this text for sending SMS messages where all newlines need to be accounted for, this is an issue. Any suggestions? Press e ...

Ways to shift placeholder text slightly to the right within a select dropdown?

Struggling with this issue for hours, I can't seem to figure out how to: Adjust the position of the placeholder text (Search) by 10 pixels to the right in my select component Reduce the height of the field (maybe by 5px) without success. Could someo ...