Use CSS nth-child to select elements based on class only

I am currently utilizing vue's v-if feature to dynamically display and hide table elements. I have implemented zebra backgrounds for these elements, but encounter an issue when showing a row - the background colors change due to the varying number of elements in the table. This inconsistency can be confusing visually, so my preference is to maintain consistent zebra coloring by not allowing hidden rows to impact the formatting.

Below is the CSS code snippet used to highlight every other tr element:

.content-table {
    .table-content {
        table {
            tbody {
                tr:nth-child(even) {
                    background-color: #00ff0d;
                }
            }
        }
    }
}

Additionally, here is a simplified example of the code structure I am working with:

<tbody>
    <template v-for="item in list">
        <tr class="zebra">
            //blah
        </tr>

        <tr v-if="item.accordion">
            //blah
        </tr>
    </template>
</tbody>

The default value for the accordion property of each item is false, thus expanding will reveal the new row and alter the background color of all subsequent items in the table.

Although I am aware of using CSS's .zebra:nth-of-type(even) selector from similar examples, it seems unsuitable for my specific code scenario as it counts all tr elements within the same parent class. Any suggestions or guidance on how to resolve this issue would be greatly appreciated.

Thank you

Answer №1

I achieved the desired formatting by utilizing vue's conditional styling feature.

<tbody>
    <template v-for="(item, index) in list">
        <tr :style="(index % 2 == 0) ? {'background-color': '#f7f8f9'} : {'background-color': '#f1f3f5'}">
            //blah
        </tr>

        <tr v-if="item.accordion">
            //blah
        </tr>
    </template>
</tbody>

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

Navigating to a specific div on page load with pjax enabled

Utilizing pjax, when a user clicks a link the content is dragged in instead of loading a new page. The content includes a navigation bar at the top with the rest of the content underneath. When clicking on the navigation bar, it hides and displays certain ...

What is the best way to ensure that my drop-down menu items match the size of the parent nav bar?

I'm having trouble creating a dropdown menu using only CSS. Specifically, I am struggling to ensure that the dropdown menu is the same size (width and height) as its parent element. Here is a link to a working example: HERE This is the snippet of HT ...

Decreasing the size of the image will not cause its height

Is there a way for an image to automatically adjust its size based on the height of the container? I have specified a height, but my nested img tag refuses to scale down and keeps overflowing my .modal-wrapper .modal div. To prevent this, I currently have ...

Leverage the power of v-model props in your Vue 3 component to efficiently retrieve API breakpoints

I am currently working on integrating the API breakpoints in my child component. These components are designed for my football web application. The breakpoints are sourced from: api-football My challenge lies in passing multiple prop values into a c ...

Turn off autocomplete feature for forms using React and Material UI

I've been diving into React and Material UI to enhance my web development skills. While working on a web form, I encountered an issue where Chrome autofills the text fields with previous data and changes the background color to yellow upon page load. ...

Bootstrap 4's hamburger icon in the navbar toggler displaying only two lines, rather than three

I have created a navbar using Bootstrap 4. Although the navbar is functional, I am facing an issue that I have not been able to resolve on my own. When collapsed, the hamburger icon only displays two lines instead of three. I suspect that the problem lie ...

How can I feature an image at the top of the page with large 3 and jQuery in FireFox?

I am interested in showcasing a single image at the forefront of the page when it is selected. While there are numerous plug-ins that offer this feature, many come with unnecessary extras like galleries, video support, and thumbnails which I do not requir ...

Center Button Horizontally and Vertically with CSS Code

I really need some assistance with getting this button I made to be perfectly centered on both the vertical and horizontal axes of the page. So far, I've managed to center it horizontally, but not vertically. Any advice or guidance would be greatly ap ...

Elements that are added dynamically will not inherit the correct CSS styles, requiring JavaScript to style them properly

My <ul> element dynamically adds <li> elements, and I am attempting to make the first <li> wider at 63% while the others are at 60%. However, the first one is only getting a width of 60%. Any thoughts on why this might be happening? I ne ...

Customize the switch option in your data tables

Currently, I am attempting to integrate a custom switch feature into my Datatables setup. To achieve this, I have implemented the following function that includes an Action column in Datatables: function getdata(Request $request) { if(request()->aj ...

Stopping smart highlighting on mobile email clients like Outlook

After sending a test email to Outlook and opening it in the Outlook iOS app, I noticed that the default style of the text for dates/times appears with its own color. https://i.sstatic.net/iydYd.png (The white/gray part is only to conceal the text, reveal ...

The VueJS Store concept featuring data access with get and set functions

I run a small boutique using the state pattern in VueJS (not VUEX). Here's how it looks: export default { get selectedPartner() { return localStorage.getItem('selectedPartner'); }, set selectedPartner(item) { ...

Identify the specific button that triggers a JavaScript function

Currently, I am working on an admin page that displays a list of posts using EJS for template rendering engine. <table> <tr> <th>Name</th> <th>Description</th> </tr> <% projects.for ...

How can I align Bootstrap 4 button toggle menu items to the right side?

One issue I am facing is with a button (class="navbar-toggler") that collapses, which works fine. However, when I click on it, all the menu items (links) appear on the left-hand side and it looks awful!!! I've tried various solutions to move the menu ...

When PHPMailer is integrated with AJAX, it encounters issues and fails to function

Please note that despite reading other questions, none have provided a solution to my issue. Initially, I successfully tested the functionality on my localhost using AJAX and PHPMailer. The email was received as expected and the AJAX message indicated tha ...

The last value label in Google Charts bar chart getting cut off

I've searched extensively for a solution to this issue regarding the haxis labels, but I have not been able to find one that addresses it... In the image provided below, you'll observe that the last percentage label on the horizontal axis is mis ...

What could be the reason for my clickable div not functioning as a link in this particular code?

Here is my jQuery script: $('.projektet').click(function(){ var url = $(this).find("a").attr("href"); window.location = url; }); <div class='projektet'> <h3>".$alias." ".$expertis." ".$other."</h3> & ...

issue with phonegap android app not logging to console

When trying to use console.log("Test Text") on the android emulator, I encountered an issue where it doesn't work. Strangely enough, it works perfectly fine on the iPhone emulator. I am currently working with phonegap using HTML/CSS/JavaScript and I n ...

Interacting with jQuery UI Droppable by setting acceptance criteria before submitting a form

My goal is to create a draggable item that can be dropped onto a specific zone. The challenge I'm facing is in displaying a form for inputting information and storing it in a database. If the input is successfully stored, the drop action will be succe ...

Displaying Name Values in a <v-select> Component and Passing the Corresponding ID in the Axios POST Request in Vue.js

UPDATE: Issue resolved by including the return-object prop in v-select When a new student is added to the database using a vuetify form, I want to be able to assign them a course that exists within a list of available courses (also stored in the database) ...