Conditionally change CSS class for a table based on a certain condition

I am facing an issue with styling a table that has the following class applied:

<table class="table table-striped table-borderless nowrap">

Specifically, I want to change the background color of certain rows based on user conditions like this:

<tr class="@(item.Assigneee == UserSession.User.Id  ? "alert alert-primary" : " ")">

However, despite using !important in my CSS, the table class background color still takes precedence over the individual row styling. Even though the class is added to the row:

<tr class="alert alert-primary odd" role="row">

The background color specified in the original table class still shows up, as seen in this snippet of code:

.table-striped tbody tr:nth-of-type(odd) { 
    background-color: rgba(0, 0, 0, 0.05);
}

If you would like to see a visual representation of the issue, click on this link: https://i.sstatic.net/K2qBo.png

Answer №1

Here's a way to customize your CSS.

If you're using Bootstrap 4

.table-striped tbody tr:not(.alert-primary):nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}

If you're using Bootstrap 3.7

.table-striped>tbody>tr:not(.alert-primary):nth-of-type(odd) {
    background-color: #f9f9f9;
}

Answer №2

Here is a suggestion for your code:

.table-striped tbody tr.alert.alert-primary:nth-of-type(odd) {
  background-color:red !important;
}

Keep in mind that this solution is based on speculation since you have not provided any code snippet.

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

How to Customize the Drawer Color in Material-UI v5

I'm currently using MUI v5 in my project and I am encountering some challenges while attempting to style a Drawer component with a black background color. As this update is relatively new, I have not been able to find much information on customizing t ...

Ways to retrieve the clicked item's index in a jQuery collection without using the index() method

Is there a way to obtain the index of clicked elements easily? var $inputs = $("input"); $inputs.click(function() { console.log($(this).index()) }); This method correctly works for the structure below: div>(input+input+input) However, I am encoun ...

JS unable to insert new row in table

I checked the input value before submitting it in the form and confirmed that it is correct, returning as a string.enter image description here const saveList = () => { const inputListNameText = inputListName.value; fetch('/api/lists' ...

Validating Form Inputs with Multiple Button Options

I currently have a form with multiple buttons that trigger PHP processing. The existing code for the buttons is as follows: <button id="btn_back" class='ym-button ym-success' name="action_back">Back</button> <button id="btn_finis ...

various images in a flexbox container with varying sizes

I am having an issue with align-items: stretch flexbox. Inside this flexbox, I have an image and some static text content. The height of the image varies depending on the aspect ratio of the image, but I want all images to have the same height as the text ...

Exploring the World of Design in Next JS

When styling a Next.js app, is it necessary to use import styles from "./stylesheet.css" and apply classes with className={styles.aClassName}? If so, what if I need to style an element by ID or tag name? Is there a way to style a Next.js app li ...

Vertically and horizontally align an SVG within 2 divs without modifying the parent div of the SVG

Is there a way to center an SVG both vertically and horizontally inside a div? The issue is that the width and height of the SVG are determined using the vx-responsive library, resulting in the following DOM structure: https://i.sstatic.net/3p2wc.png Edi ...

Is the Sass variable for Bootstrap 4 navbar height not available?

In looking through the sass files of Bootstrap 4, I noticed that the $navbar-height variable is not present. Can someone please provide me with the specific sass variable to adjust the navbar height in Bootstrap 4? ...

Design a dynamic rectangular division using CSS and Bootstrap 4 that adapts to different screen sizes

I am encountering difficulties attempting to replicate a full-width rectangle div on a website, particularly with issues related to responsiveness and mobility. Here is an example of the design I am trying to recreate. And here's what I've acco ...

Mobile devices are failing to display the logo as expected

Can anyone help me figure out why the logo is not displaying on mobile devices? I've already tried resetting my phone's network and web browser, as well as reducing the size of the logo from 100px to 80px. Despite these efforts, the logo still wo ...

Node.js is great at hosting HTML files, but struggles when it comes to loading script files within those pages

Recently, I’ve been working on creating a simple login page using a mongoDB database along with Node.js and express. Since I'm still new to Node.js, I'm facing an issue that seems more complicated than it actually is. The main problem I’m en ...

Icon in navigation dropping down and moving to next line

Trying to use Bootstrap 4 and dropdown-toggle:after to display siblings as a wordpress menu. The issue is that I can't seem to keep the carrot on the same line as the text on smaller screens. https://i.sstatic.net/rJBM5.png Check out the code snippe ...

Issue with loading HTML file correctly in Django

I have been attempting to integrate my Django app with an admin dashboard from a repository on GitHub. After successfully logging in, the app redirects to the dashboard, but only the HTML part loads and none of the fancy features are visible on the dashboa ...

Ensure that pressing the ENTER key on a form will only activate a specific submit button, even when there are multiple buttons present

I have a form containing two submit buttons - name="submit_button" and name="search_me_logo". Depending on which button is pressed, the form should perform different actions when it reaches the action location. Currently, when the enter key is pressed, th ...

LFT Etica font showcases digits with varying heights

In the project I am working on, we are required to use the font LFT Etica. However, there is an issue with the height of certain digits when displayed. Specifically, some numbers appear taller than others. Is there a way to make all digits have equal heigh ...

Is there a way to prevent a square from disappearing and instead make it change color when animating in HTML5 using a canvas tag?

When coding in HTML5, I encountered an issue with animating a blue square inside a canvas tag. Whenever I added a red square as an enemy and tried to move the blue square, the red one would disappear and the blue one would turn red instead. This was not ...

Notifications for AngularJS tabs

I need help finding a method to incorporate "tab notification" using AngularJS, in order to show that there are important alerts that require attention. For example: (1) (3) TAB_ONE TAB_TWO TAB_THREE Could you provide any recom ...

Display or conceal a division underneath a dropdown menu based on selections retrieved from a SQL Server database

Presented here is my JavaScript code. function appendItemforPurchaseOrder() { debugger var rowNumber = parseInt($(".itemmapContainer").attr("data-rownumber")); rowNumber = isNaN(rowNumber) ? 1 : rowNumber + 1; var addNewItemDetailHtml = ...

Getting checkboxes from an HTML form in Django: A comprehensive guide

I am trying to create a form that displays checkboxes for each item in a list. Here is the structure of my form: <form action="/test"> <ul style="font-size:30px"> {% for d in Dlist %} <li type="none"><input typ ...

What is the best way to align an image with the position of a div?

Looking for assistance on positioning an image to a div's position after it has been cloned. $(".raindrop1").clone().removeClass("raindrop1").appendTo("body"); $("img").css({"left": "div".x, "top": "div".y}); .shape{ border-radius: 50px; width: 10p ...