How can you pinpoint a particular td using both col class and td class?

.col2 .positive {
  background:green;
}
.col2.positive {
  background:green;
}

.col3 .positive {
  background:blue;
}
td{
  border:1px solid blue;
  padding:5px;
}
<table>
  <col class="col1" />
  <col class="col2" />
  <col class="col3" />
  <tbody>
    <tr>
      <td></td>
      <td class="positive"></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td class="negative"></td>
      <td class="positive"></td>
    </tr>
    <tr>
      <td></td>
      <td class="positive"></td>
      <td></td>
    </tr>
  </tbody>
</table>

Given the HTML code provided, what is the correct way to select all positive values in col2 using CSS? The current method used does not seem to work as intended.

Any suggestions on how to achieve this properly?

htmlcsscss-selectors

Answer №1

Utilize the CSS selector td:nth-child(2).positive.

This specific selector targets the 2nd td elements with the class of positive.

tr td:nth-child(2).positive {
  background: green;
}
<table>
  <col class="col1" />
  <col class="col2" />
  <col class="col3" />
  <tbody>
    <tr>
      <td>1</td>
      <td class="positive">2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td class="negative">2</td>
      <td class="positive">3</td>
    </tr>
    <tr>
      <td>1</td>
      <td class="positive">2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

Answer №2

If you want to target specific elements in your CSS, you can utilize the nth-child selector.

Here is an example of how you could implement it:


  tbody td:nth-child(2).positive {
    background: green;
  }
  tbody td:nth-child(2).positive {
    background: green;
  }
  tbody td:nth-child(3).positive {
    background: blue;
  }

This code snippet will style certain table cells based on their position within the table. You can customize the styling further to suit your needs.

Answer №3

tbody td:nth-child(2).positive {
   background: green;
}
tbody td:nth-child(3).positive {
   background: blue;
}
td{
  border:1px solid blue;
  padding:5px;
}
<table>
  <col class="col1" />
  <col class="col2" />
  <col class="col3" />
  <tbody>
    <tr>
      <td></td>
      <td class="positive"></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td class="negative"></td>
      <td class="positive"></td>
    </tr>
    <tr>
      <td></td>
      <td class="positive"></td>
      <td></td>
    </tr>
  </tbody>
</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

Troubleshooting: WordPress post not uploading to custom PHP file - Issue causing ERROR 500

Our website is built using WordPress, and I was tasked with adding a function to our newsletter subscription that sends an email to a specific address based on the selected value in the form. Everything was working perfectly on my local host, but when I tr ...

javascriptjqueryhtmlajaxwordpress

I am facing an issue where the inline CSS is not being applied in my

I recently integrated tcpdf in my CodeIgniter project and encountered an issue with applying inline CSS to td. This is a snippet of my code: <table style="float:left;width:100%; border:1px solid #c2c2c2; margin-top:10px;"> <tr style="float:l ...

htmlcsspdf

Aligning text to the left center

I am looking to center left-aligned text in the yellow box (txtbox). The current look is like this: and I want it to appear like this: HTML: <div class="content container small"> <div class="txtbox"> ...

htmlcss

The hover effect for changing the style of one element when hovering over another element is not functioning as

I've encountered an issue with styling a triangle element using the .something:hover .another{...} selector. Can anyone help me understand what might be causing this problem? .actions { display: flex; margin-top: 20px; max-width: 260px; } .a ...

css

What is the best method for removing a class with JavaScript?

I have a situation where I need to remove the "inactive" class from a div when it is clicked. I have tried various solutions, but none seem to work. Below is an example of my HTML code with multiple divs: <ul class="job-tile"> <li><div ...

javascriptjqueryhtml

What is the best way to assign a percentage width based on a variable in jQuery?

Is there a way to assign a dynamic width value to an element? Here is the code I am using: $(".menu_list_item").css({ width: width + "%" }); Unfortunately, this doesn't appear to be functioning correctly. If anyo ...

javascriptjquerycss

JavaScript: Launching the current page in a new tab or window

Is it feasible to open a new window or tab from the existing HTML page? Absolutely, I am referring to the current HTML page itself. Not triggered by an external call like this: window.open('page.html', '_blank'); Possible through Jav ...

javascripthtmlinternet-explorer

Tips for utilizing a particular style from a font collection?

I am currently in the process of building my first website and I am experimenting with different fonts available on fontsquirrel. However, I am encountering an issue where I am only able to utilize certain fonts that I have downloaded from the site. One ...

htmlcssfonts

Encountered a compiling error when attempting to watch for changes on the ./folder directory using the

An unexpected exception occurred: NullError: method 'length' not found on null File: /usr/local/lib/node_modules/sass/sass.dart.js Line: 8583:23 Function: tF.eA File: /usr/local/lib/node_modules/sass/sass.dart.js Line: 8585:28 Function: tF. ...

cssnode.jsnpmwebpacksass

Basic click event triggered every second click in JavaScript and HTML

onclick="HandleAction(\'playnow\');HandleAction(\'stop\');" This element performs two functions simultaneously. However, it only executes the actions \playnow\ and then \stop\ immediately after. ...

javascripthtml

When switching windows or tabs, the user interface of the browser extension vanishes

As someone who is new to web application development and browser extension creation, I have encountered a challenge with my browser extension. When the extension popup is open and I switch browser windows, the UI (popup.html) disappears. It reappears whe ...

javascriptjqueryhtmlgoogle-chrome-extension

Creating a design utilizing HTML columns with a set height and the ability to scroll horizontally

For my android project, I have a requirement to display a view (WebView) that dynamically loads content. The content will consist of <div class="content-item"> tags that are added by JavaScript to <div class="content-holder"> after the page has ...

javascripthtmlcsshorizontal-scrollingfixed-width

Attempting to customize react-bootstrap styling within a NextJS application

I'm currently working on a project using Next.js and attempting to integrate Bootstrap as the CSS framework. After installing react-bootstrap into the project, I proceeded to create the navigation bar. My goal is to assign an '.active' class ...

cssreactjsnext.jsreact-bootstrapbootstrap-5

A method for automatically refreshing a webpage once it switches between specific resolutions

On my page www.redpeppermedia.in/tc24_beta/, it functions well at a resolution of over 980px. However, when the resolution is brought down to 768px, the CSS and media queries alter the layout. But upon refreshing the page at 768px, everything corrects itse ...

javascriptjqueryhtmlcssparallax

Vacant area on the right side of the page

There seems to be an issue with the website where there is an empty space to the right, causing a horizontal scroll bar to appear at the bottom. Despite my efforts, I cannot seem to identify the root cause of this problem. While one solution would be to si ...

htmlcsswordpress

Updating Content in HTML Code Generated by JavaScript

My goal is to change the innerHTML of a div when it's clicked. I have an array of dynamically generated divs, and I want to target the specific table that the user clicks on. I attempted to set the IDs of the tables dynamically in my JavaScript code: ...

javascripthtmldom

The CSS float puzzle - text alignment dilemma

Recently, I created a simple float-based banner with tiles which you can see here on jsfiddle. However, I encountered a major issue with centering text in each tile. My goal is to have all the "Sample text" content centered both horizontally and vertically ...

htmlcss

Manage the number of items in each column using flexbox or grid layout strategy

Here's a similar situation .items { width: 100%; display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; background: #cecece; padding: 10px; margin: 20px; } .item { height: 100%; flex: 0 0 calc(50% ...

cssflexboxgrid

How can I effectively display the city weather information that I have chosen from the drop-down menu?

Is there a way to display city weather information that I have selected from a drop-down menu using JSON? I am able to retrieve the city using jQuery, but I am not sure how to load the weather data for that city. Any guidance on this would be appreciated ...

htmlcssjsonapi

Creating a dynamic dropdown menu triggered by a button click using Angular

I am a beginner in Angular (typescript) and I am facing some challenges in adding a new dropdown menu when a user clicks a button. My main struggle is creating additional attribute fields. I'm considering keeping track of the newly added dropdowns wit ...

htmlangulartypescriptngfor