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

Utilize API or alternative methods for analyzing Instagram data

My master's thesis requires me to dissect multiple Instagram profiles, each containing over 1000 posts. I am in need of a comprehensive list including the following details: Type of Post (Image, Multi Image, Video) Description Likes Comments (total c ...

htmlapiinstagramanalyticsinstagram-api

Enhancing image search functionality through dynamic HTML updates

I need help figuring out how to update the link address for profile pictures on my NHL stats website. Currently, I am using a script to append the image to the body, but I don't know how to properly add the player ID ({{p1_ID}}) to the link and includ ...

javascripthtmlimage

Python Selenium - encountering issues with interactability of elements

Trying to complete the form on () is proving tricky for me. When I utilize Javascript, document.getElementsByName("userName")[0].value = "Hello", I am successful in entering text into a form. However, when I apply the same logic in Sel ...

pythonhtmlseleniumxpath

Which specific transitionend (or animationend) event should I use for this application?

I'm feeling a bit lost when it comes to using transitionend (or if I should be using animationend in this scenario). I'm not sure whether to utilize var, node, or box. Essentially, I am a complete beginner in this case. My goal is to have my div ...

javascriptjqueryhtmlcssanimation

Tips on toggling the visibility of a div using jQuery and CSS via a toggle switch

Hey there, I need some help with toggling the opening and closing of a div when clicking on a toggle switch. $('.tog').on('click', function() { $('.cntr').show(); }); .switch { position: relative; display: inline-bloc ...

jqueryhtmlcss

How can CSS be utilized to style the visited links that are hovered over

Is there a way to change the font color specifically for visited hyperlinks that are being hovered over by the mouse? I am trying to achieve this: a:visited:hover {color: red} ...

htmlcssstylesheet

Using jQuery, target the specific elements that have certain data attributes assigned to them

Is there a way to target elements with a specific data attribute and a unique class using jQuery? For instance, I want to select these elements: <div data-roomid="55" data-status="NoData"></div> <div data-roomid="55" data-status="Open"> ...

javascriptjqueryhtmljquery-selectors

Leveraging the power of Material-UI and React, modify the appearance of the "carrot" icon within the

Currently implementing MUI's textfield based on the information found at this link: https://mui.com/components/text-fields/. While there are numerous resources available for changing the font of the input text, I have not come across any documentation ...

javascriptcssreactjsmaterial-ui

Update the iframe located on a different webpage

I am looking to create a dynamic button feature on my website where clicking a button on page1.html will open a new page (portal.html) with an iframe displaying the URL specified in the button. The setup involves two main pages: page1.html, and portal.htm ...

htmliframe

Is there a way to trigger a click event on an href using asp code behind?

Is there a way to programmatically trigger a click event on the href "shipping_question_ID_product_received_as_ordered_link" from the code behind of an ASP form? This href triggers a complex function in jquery when clicked by the user. I need to simulate ...

c#jqueryhtmlasp.net.net

Increasing the font size on a document

Once again, faced with my own silly problems. This time I stumbled upon the following page: http://jsfiddle.net/g3VBT/ I am trying to style the "enter your U.R.L here" text with the following properties: font-weight: 600; font-size: 1.5em; The issue ...

htmlcssbuttontext

A basic webpage created using ASP.NET featuring simple HTML text

Is it acceptable to manually code HTML, such as <p>, <ul>/<li>, <h3>, <h4>, <blockquote> tags, into a Content Page that already has an existing Master Page? The content is similar to a blog post. Are there better desig ...

asp.nethtml

Order of tabs, dialog, and forms customization using Jquery UI

I'm currently working on a jquery dialog that contains a form split into multiple tabs. In order to enhance keyboard navigation, I am looking for a way to make the tab key move from the last element of one tab to the first element of the next tab. Cur ...

javascriptjqueryhtmljquery-ui

"Discover the Step-by-Step Guide to Launching Fresh Content or Code in the Current Tab and

I have a webpage with multiple tabs, each representing different content. Now, I want to create a functionality where if a user clicks on the "Home" tab, they are prompted to enter a password (e.g., 1234). Upon entering the correct password, the user shoul ...

javascripthtml

Having trouble getting your jQuery/JavaScript function to detect the property "-webkit-clip-path"?

Exploring the clip-path feature of CSS has been a fun experiment for me. I have successfully implemented it in my project and am now trying to incorporate JavaScript to dynamically change the start/stop positions of the clip-path. Below is a snippet of my ...

javascriptjqueryhtmlcss

The complexities of stopPropagation() causing further confusion

I have encountered an issue with my code. It currently allows a dropdown functionality for a <ul> element, but when a child <li> is clicked, it also closes other menus of the same type. To fix this, I used an if clause to check if the clicked ...

javascripthtmljqueryjquery-events

Exploring the process of passing parameters in Material-UI React styled components

Recently, I developed a new component const CategoryDialog = (props) => { const classes = useStyles(); console.log(props); return ( <div> <Dialog fullScreen open={props.dilaogOpenProp} TransitionCompone ...

javascriptcssreactjsmaterial-ui

HTML DOM parser in PHP with simple space handling

Currently, I am utilizing PHP Simple HTML DOM Parser to extract text that lies between specific div tags using $html->find(div.divname) Everything runs smoothly until the divname contains a space. I've experimented with [div name] and "div name ...

phphtmlparsingdom

Creating a responsive card design with Material UI

Creating a responsive card layout for mobile applications is my current challenge const styles = { edit: { width: "40%", marginLeft: 270, background: "#76ff03" }, add: { width: "100%", background: "#18ffff", size: "large" ...

cssmaterial-ui

There is a slight gap between the svg element and the path

Here is the size of my path tag (g tag is same size) This is the size of my SVG tag There is a gap between them. These are the inline attributes... <svg preserveAspectRatio="none" class="JDicon JDicon__svg JDicon--white JDicon--large" alignment-base ...

htmlcsssvg