Choosing siblings of a particular element that meet certain criteria

I am faced with the following situation:

<table>
  <tr class="header">
  <tr class="data1">
  <tr class="data2">
  <tr class="data3">
  <tr class="header">
  <tr class="data1">
  <tr class="data2">
</table>

My goal is to change the text color of the data elements under the first header to blue, and the data elements under the second header to red.

I have attempted different methods using nth-child and adjacent sibling (+) selectors, but I have not been successful so far.

tr[class^=data] selects all the elements I want to target, but I need them divided into two groups based on the headers.

While I do not know the exact number of data elements, I am aware that there are only 2 header elements present.

I am restricted from using javascript/jquery in this scenario, therefore I must rely solely on CSS selectors

htmlcsscss-selectors

Answer №1

If you only anticipate two header rows, a simple solution is to have the styles for the second set of data rows take priority over the styles for the first set:

.header ~ tr[class^=data] {
  color: #f00;
}

.header ~ .header ~ tr[class^=data] {
  color: #00f;
}

To streamline your HTML code, consider grouping your header and data rows within tbody elements so you can style them more efficiently without having to select individual rows:

tbody:first-child td {
  color: #f00;
}

tbody:last-child td {
  color: #00f;
}
<table>
  <tbody>
    <tr class="header"><th>Header
    <tr class="data1"><td>Data1
    <tr class="data2"><td>Data2
    <tr class="data3"><td>Data3
  <tbody>
    <tr class="header"><th>Header
    <tr class="data1"><td>Data1
    <tr class="data2"><td>Data2
</table>

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 can I alter the text color on hover within a Material UI card? My goal is to have the text color change when hovering over the card itself, rather than just the text

When I apply CSS to the card hover effect, it works fine. However, I also want to change the text color along with the card color on hover. card: { maxWidth: 350, height: 300, '&:hover': { backgroundColor: '#373737 !impor ...

cssmaterial-uicard

ASP repeater exceeding container boundaries

Having trouble with my asp repeater that reads from a database and generates repeatable divs. The issue arises when the h4 spills over the div, particularly when using <%Eval. Any suggestions on how to fix this? Manual input divs don’t seem affected o ...

c#htmlcssasp.net

Design Shapes in Sketch with CSS Styling

Here is the CSS code I am working with: shadowColor: '#444', shadowOffset: { width: 5, height: 5 }, shadowOpacity: 0.2, shadowRadius: 8, backgroundColor: 'white', borderRadius: 10, I want to recreate this style in Sketch, but it uses ...

csssketchapp

The background image item in C# Outlook Mail does not repeat as expected when used inline

Hey there, I need to set up an email campaign with data in the mail body and a background image. However, I'm running into issues with the background image repeating. When I try to prevent repetition using background-repeat: no-repeat;, the image does ...

c#htmlcssoutlook

Changing the font-family to 'Symbol' and using Windows-1252 character encoding

I have a collection of HTML documents that contain basic text encoded in Windows-1252, but scattered throughout the content are various instances of span elements styled with font-family: Symbol. For instance: <span style='font-family:Symbol& ...

htmlcssencodingcharacter-encodingfonts

When utilizing the 'checkAll' method in a Bootstrap table, it will only select the checkboxes displayed on the current page

I currently have a Bootstrap table on my HTML5 page. When I use the code $('#bk-table').bootstrapTable('checkAll'), only the checkboxes on the current page are checked. Is there a way to check all the checkboxes on all pages? Here i ...

javascripthtmlbootstrap-table

Issues with Image and Product Name Rendering in Outlook for Windows

Having a bit of trouble with Outlook PC not cooperating with my product images and names. While other email clients show the product names below the images as intended, Outlook PC is causing the names to appear next to the images like this - Product name ...

htmlcssemailoutlookhtml-email

Attempting to grasp the intricacies of HTML5/JS video playback quality

I've been diving deep into research on this topic, but I can't seem to find a straightforward answer to my specific query. My main focus is understanding the inner workings of how video players transition between different quality settings (480p, ...

javascripthtmlvideovideo-streaming

Getting the string value from a table row using JavaScript

I need to capture the value of result_status from the row labeled status. If all values in the row labeled status are 'pass', then the result_status will also be 'pass'. However, if any one of the values in the row labeled status is &a ...

javascripthtmlajax

Can 'fr' units be used in the `calc()` function of CSS?

In this particular scenario, the query arises whether the CSS calc() function extends its support to the fr unit as presented in the below example? .sample-grid { --main-fr: 60fr; grid-template-columns: var(--main-fr) 1rem calc(100 - var(--main-fr ...

htmlcsscss-grid

Alter the button's color seamlessly while staying on the same page

I have implemented a feature that allows me to change the category of photos without having to leave the page and it works perfectly. My next goal is to create a button system where the pre-defined category of a photo is indicated by a button with a green ...

javascriptjquerycssforms

Learn the ins and outs of utilizing *ngIf in index.html within Angular 8

Can anyone explain how I can implement the *ngIf condition in index.html for Angular2+? I need to dynamically load tags based on a condition using the *ngIf directive, and I'm trying to retrieve the value from local storage. Below is my code snippet b ...

javascripthtmlangularangular8

Make the mp3 file automatically download/save as by forcing the link

My website has links to mp3 files using normal <a href="file.mp3"> tags. However, many users with Apple Quicktime installed experience the mp3 files opening instead of saving when clicking on the links. Is there a way to force the browser to save t ...

c#javascripthtml

`A dynamically captivating banner featuring animated visuals created with JQuery`

I am currently in the process of designing a banner for the top of my webpage, but I have yet to come across any code that meets all my requirements. To provide clarification, I have attached an illustration showcasing what I am aiming to achieve. 1) The ...

javascriptjquerycss

When attempting to print a Bootstrap 4 HTML page in Chrome, the browser headers and footers are being clipped

Currently experiencing an issue with printing an HTML page styled using Bootstrap 4 (Bootstrap 3.3.7 works fine) on Chrome where the header and footer are partly covered up. Take a look at this screenshot to see what I mean - the date, title, and file/url ...

htmlcsstwitter-bootstrapbootstrap-4

What could be causing my JavaScript try/catch block to not trigger?

I'm having trouble getting any code within my function to execute unless I completely comment out the try/catch block. Why could this be happening? I've tried adding code before and after the try/catch, as well as within each block, but nothing s ...

javascripthtmlfunctiontry-catch

Modifying the data attribute within the div does not result in a different image for the 360-degree spin view

My current project involves utilizing js-cloudimage-360-view.min.js to create a 360-degree view of images. I have successfully retrieved the images, but I am encountering difficulty in updating the images by clicking a button. index.html <!DOCTYPE html ...

javascripthtml

Unable to select dropdown button in Python while using Selenium

My goal is to click on the "Project" element in order to display a dropdown list (as shown in the image below). When using the selenium library in Python, I encountered the following error: could not be scrolled into view This error was triggered by code ...

pythonhtmlseleniumfirefoxbutton

Unexpected output from Material UI Textfield

When attempting to print a page of my React app using window.print(), everything prints correctly except for the Textfield component from Material UI. It works fine when there are only a few lines of text, but when there is a lot of text, it appears like t ...

htmlreactjsprintingmaterial-uitextarea

HTML is appearing as unformatted text on the screen

I am utilizing deta for rendering cloud-based HTML content. Below is the code snippet in use: from deta import Deta from fastapi import FastAPI, Request, Response, Form, File, UploadFile from fastapi.templating import Jinja2Templates from fastapi.response ...

pythonhtmlfastapi