Tips for updating the color of the first td element in a table using a specific class

Below is the CSS code for my table:


table.show-my-request-table {
    border: 1px solid black;
    margin-left:auto; 
    margin-right:auto;
    border-collapse: collapse; 
}
tr.show-my-request-table-header{
    border: 1px solid black;
}
tr.show-my-request-table{
    border: 1px solid black;
}
tr.show-my-request-table:hover{
    background-color: #D3D3D3;
}

And this is the HTML code for the table:

<table class="show-my-request-table center">
    <tr class="show-my-request-table-header">
        <th>Date</th>
        <th>Priority</th> 
        <th>Question</th>
    </tr>
    <tr  >
        <td class="show-my-request-table">                                11.8.2016 15:27:13
        </td>
        <td>  
            <img src="/resources/img/priority-flag/priority-LOW-icon.png" class="priority-icon">
        </td>
        <td>
        </td>
    </tr>

    <tr  >
        <td class="show-my-request-table">
            11.8.2016 14:45:41
        </td>
        <td>  
            <img src="/resources/img/priority-flag/priority-LOW-icon.png" class="priority-icon">
        </td>
        <td>
            Jak se máš?
        </td>
    </tr>
</table>

I am trying to set a red background for the first td tag.

The problem I am facing is that the styling affects all tables, not just one specific table.

When I use the following CSS:

td:first-child {
    background-color: #ff0000; 
}

it applies to all tables, not just the targeted one.

I have also tried the following code, which doesn't seem to work either:

table.show-my-request-table > td:first-child {
    background-color: #ff0000; 
}

Could you please help me understand why this code is not working as intended and provide a solution?

htmlcssimagehtml-tablecss-selectors

Answer №1

Give this a shot:

table.my-request-table tr > td:first-child {
    background-color: #ff0000; 
}

Answer №2

Instead of using the immediate children selector >, simply use a space.

Give this a shot:

table.show-my-request-table td:first-child {
    background-color: #ff0000; 
}

Answer №3

/* select the 2nd row and color the first cell */
tr:nth-child(2) td:first-child {
  background-color: #ff0000;
}

Check out the demonstration below

table.show-my-request-table {
  border: 1px solid black;
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
}
tr.show-my-request-table-header {
  border: 1px solid black;
}
tr.show-my-request-table {
  border: 1px solid black;
}
tr.show-my-request-table:hover {
  background-color: #D3D3D3;
}
/* select the 2nd row and color the first cell */

tr:nth-child(2) td:first-child {
  background-color: #ff0000;
}
<table class="show-my-request-table center">
  <tr class="show-my-request-table-header">
    <th>Date</th>
    <th>Priority</th>
    <th>Question</th>
  </tr>

  <tr>
    <td class="show-my-request-table">

      11.8.2016 15:27:13

    </td>
    <td>
      <img src="/resources/img/priority-flag/priority-LOW-icon.png" class="priority-icon">
    </td>
    <td>

    </td>
  </tr>

  <tr>
    <td class="show-my-request-table">

      11.8.2016 14:45:41

    </td>
    <td>
      <img src="/resources/img/priority-flag/priority-LOW-icon.png" class="priority-icon">
    </td>
    <td>
      How are you?
    </td>
  </tr>

Answer №4

table.show-my-request-table > td:first-child {
    background-color: #ff0000; 
}

This specific selector is attempting to target a td that is the first child of a table element. As demonstrated in your own code snippet:

<table class="show-my-request-table center">
    <!-- snip -->
    <tr  >
        <td class="show-my-request-table">

It's important to note that there must be a tr element in between them. Furthermore, the HTML parser will automatically insert a parent tbody element for the tr unless explicitly defined with <thead> or <tbody> tags. While the <tbody> tag is not necessary in HTML, the element itself is required, so the parser includes it if the tag is absent.

To address this issue, utilizing the descendant selector is the solution:

table.show-my-request-table td:first-child {
    background-color: #ff0000; 
}

An observant individual may notice that the > combinator has been substituted with a space combinator.

Answer №5

If you want to style a specific element within a table, use the following code:

table.my-table-class tr td:first-child {
    color: blue; 
}

Feel free to test it out on this CodePen http://codepen.io/anon/pen/PoqjJXW

Happy coding!

Answer №6

When targeting the first column of a table with the class "show-my-request-table", the background color is set to #25a3c2.

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

Guide to creating a vertical handler that can be resized

Did you know that you can resize tables in http://www.jsfiddle.net? I'm curious about how to resize just the "Vertical Handler". Could someone share the source code with me? If possible, please provide an example on http://www.jsfiddle.net. ...

javascripthtmlcss

What are the best ways to incorporate mistakes into my JavaScript mortgage calculator?

I am struggling to set up my calculator so that it triggers an error message if the APR goes over 25% or falls below 0. Also, the Loan Term should be greater than 0 and less than or equal to 40, otherwise display an error message. I have attempted differen ...

javascripthtmlcsserror-handlingevent-handling

When the user clicks on the body, I want the element to slide up, which will then slide down when the button is clicked

As a novice in Jquery, I am currently implementing a simple slide toggle on a button. Initially, the div is set to display none, and when the button is clicked, the slide toggle function is triggered. This works well. However, I also want the div to slide ...

jqueryhtmlcss

Implementing validation for multiple email addresses in JavaScript: A step-by-step guide

Currently, I am utilizing Javascript to perform validation on my webpage. Specifically, I have successfully implemented email validation according to standard email format rules. However, I am now seeking assistance in enhancing the validation to allow for ...

javascripthtmlvalidationemail

What is the maximum number of JavaScript functions allowed in a single HTML file?

My HTML5 file includes JavaScript (created from CoffeeScript) directly within the HTML file, as I prefer this approach for my HTML/JavaScript programming. The code consists of four JavaScript functions that convert one temperature unit to another. Strang ...

javascripthtmlcoffeescript

The color of the link remains blue when using Firefox

Check out my website at kenastonchiropractic.com When viewing the site in Chrome, the "Home" link remains the same color as the other links and they all turn white when hovered over. However, in Firefox, the "Home" link stays blue even after being clicked ...

htmlcssfirefox

What is the best way to dynamically call a different PHP file each day for an entire year?

As a PHP novice, my goal is to integrate a daily meditation feature that corresponds to the current day. For example, on January 1st, I would like to display content from 1_1.php, and on the following days, it should load 1_2.php, 1_3.php, continuing unti ...

phpjqueryhtml

The HTML file seems to be having trouble connecting to the JavaScript file

I am currently working on a small, fun website project and have an HTML file along with a JavaScript file in the same directory. However, my HTML seems to be unaware of the existence of my JavaScript file. It fails to execute the function during the load e ...

javascripthtml

Guide to Embedding an Image in a List in HTML

How do I resize an image according to the size specified in CSS, and ensure that it fits within a list of items where each item consists of both an image and a name? Currently, my code only displays the image in its original size. for(var i =0; i< o ...

javascripthtmlcss

How come my div can alter its own attributes on hover, but its sibling cannot?

As I delve into the realm of web development, my initial project involves creating a portfolio site. However, I am facing difficulties with the dropdown section in one of the menus. I incorporated a :hover pseudo-class to the dropdownhover div to signal ...

htmlcss

The size of the panel header does not seem to be adjusting as expected within the React

I need help adjusting the header size in a React-Bootstrap Panel within a Typescript application. I've tried wrapping the text in <h1> tags as specified in the documentation, but there seems to be no change. Even with attempts to add inline sty ...

cssreactjsbootstrap-4react-bootstrap

Display a JQuery dropdown menu depending on the ID of the current section

In my one-page structure, I have multiple sections with a categorized nav-bar that includes drop-down lists for each category. My goal is to display the drop-down menu of the category corresponding to the current section. if($("#About").hasClass('act ...

jquerycssdrop-down-menunavbar

PHP does not automatically escape HTML special characters

Within my ZF2 application, there is a .phtml layout that includes the following code: <p>Created in 2015 <?php echo htmlspecialchars("by Jérôme Verstrynge",ENT_HTML5); ?></p> However, when I review the source of the pages returned by ...

phphtmlzend-framework2html-escape-characters

Switching Over to Burger Menu

I created a burger menu using HTML, CSS, and jQuery that switches from a full-width menu to a burger menu. However, I'm facing an issue with toggling the dropdown when the menu collapses. Here's my code: <!DOCTYPE html> <html> < ...

javascriptjqueryhtmlcssmenu

Adjust SVG size as per parent container in AngularJS custom directive

I have a unique situation where I am integrating an angular directive into a dynamically-sized element. The directive itself is made up of an SVG which adjusts based on the size of the container. I am working on making sure the SVG automatically resizes an ...

javascriptcssangularjssvgcross-browser

Struggling with showcasing database information in HTML using Node.js and Sequelize

In the server.js file, I have the following code: TABLE .findAll({ raw: true }) .then(function(asd) { console.log(asd); }); This code displays all data from my database in the console. Now, my question is: how can I display this data on my website? ...

htmlnode.jssequelize.js

Hover events in the browser are currently operating at a sluggish pace

When I hover over a photo, an overlay is supposed to appear. However, if I move the mouse quickly (from the top to the bottom of the page, for example), the overlay remains visible even after I stop hovering over the photo. I have tried different event ha ...

cssreactjshover

When utilizing a JQuery .animate function to transition a div from 0px to 450px in height, an unintended margin is produced during the process

I have been attempting to implement a collapsible footer using JQuery. While I have successfully integrated all the animation functions, there seems to be an issue with the animate function affecting the div (id=draw) by creating an unseen margin beneath i ...

jquerycssjquery-animate

Populating a read-only field with information from a database upon selecting an option

My goal is to select a name from an option field and then display the user's ID in a non-editable field. Essentially, when I choose a username, I want to automatically show their user ID. Below is the PHP and HTML code I currently have: <form id=" ...

phphtmlsql

Issue with activation of onClick event in case/switch statement

Currently working on a JavaScript project to recreate the Fallout terminal game, with one of the main aspects being comparing words selected by the user to those chosen by the computer. The concept of this hacking game is reminiscent of the board game Mas ...

javascripthtmlfunctiondomswitch-statement