Having trouble selecting the first td within a tr using CSS3 selectors

I'm encountering an issue with selecting the first td in the tr of a dynamically generated table.

I've attempted to do this using:

.record_list tbody tr td:first-child {
    text-align: center;
}

However, the styles are not being applied as expected.

Here is the HTML where I'm attempting to target the td with the check mark:

<table class="records_list">
        <thead>
            <tr>
                <th>✔</th>
                <th>Title</th>
                <th>Notes</th>
                <th>Project</th>
                <th>Context</th>
                <th>Flagged</th>
                <th>Deferuntil</th>
                <th>Due</th>
                <th>Repeattask</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>✔</td>
                <td>This is another task title</td>
                <td>This is another note that will go with this task, just so nothing is forgotten.</td>
                <td>second project</td>
                <td>second context</td>
                <td>1</td>
                <td></td>
                <td>2014-02-12 08:17:00</td>
                <td></td>
                <td>
                <ul>
                    <li>
                        <a href="/workspace/symfony/web/task/10">View</a>
                    </li>
                    <li>
                        <a href="/workspace/symfony/web/task/10/edit">Edit</a>
                    </li>
                </ul>
                </td>
            </tr>
                    <tr>
                                <td></td>
                <td>Lorem ipsum dolor sit amet</td>
                                <td>This is a note that will describe anything that needs to be remembered about the note.</td>
                <td>this is a project</td>
                <td>this is a context</td>
                <td>1</td>
                <td></td>
                <td></td>
                <td></td>
                <td>
                <ul>
                    <li>
                        <a href="/workspace/symfony/web/task/9">View</a>
                    </li>
                    <li>
                        <a href="/workspace/symfony/web/task/9/edit">Edit</a>
                    </li>
                </ul>
                </td>
            </tr>
                </tbody>
    </table>

Answer №1

the example shows .record_list, but in your HTML it's .records_list. Is this the correct code you're searching for?

JSFIDDLE

Answer №2

There was a typo in records_list:

Correction:

.record_list tbody tr td:first-child { text-align: center; }

Should be:

.records_list tbody tr td:first-child { text-align: center; }

Answer №3

Don't forget to add the "s" in .records_list when styling the table rows!

.records_list tbody tr td:first-child{ background: blue; }

View Example on Fiddle

Answer №4

There seems to be a typo in the code. It should be .record_list instead of .records_list

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 automating the versioning of static assets (css, js, images) in a Java-based web application

To optimize the efficiency of browser cache usage for static files, I am seeking a way to always utilize cached content unless there has been a change in the file, in which case fetching the new content is necessary. My goal is to append an md5 hash of th ...

Error message notifying user that an index is not defined in an ajax

https://i.sstatic.net/AbqOp.pngThis may appear to be a repetitive question, but I assure you it's not. Despite my efforts on Google, the bug persists. The problem lies in the php script's inability to set the $_POST array to the value passed by ...

Currently working on enhancing the responsiveness of the login form

I am encountering difficulties while trying to make the page responsive. I've checked my basic code, but something seems off. Could you please take a look at the plnkr link below and give me some feedback on where I might have gone wrong? Here's ...

Navigate through the options on the left menu by sliding your

I'm attempting to create a menu that slides in a submenu from the left on hover, but the issue is that with this code, all submenus open instead of just the one related to the hovered link. Here is my HTML code: <ul id="NavMenu"> ...

The loading of charts and animations is sluggish on mobile devices

My Chart.js chart starts with 0 values and updates upon clicking submit to load data from an external database. While this works efficiently on a computer browser, the load time is significantly longer when accessing the page on a mobile device. It takes a ...

Disordered block elements

I am having trouble centering a div in my footer. When I try to center it, the div ends up floating on top of the footer instead. Here is the link to the codepen. footer { text-align: center; background-color: grey; position: fixed; bottom: 0; width: 100 ...

Display a div based on search results

I recently encountered an issue with a script that needs modification to display different divs based on search criteria. Originally, I used this script for a contact list but now need it to perform another function. View the original code (JSFiddle) Here ...

Exploration of features through leaflet interaction

Attempting to plot bus routes on a map using leaflet with geojson for coordinates. Facing issues with making the bus line bold when clicked, and reverting the style of previously clicked features back to default. Current Progress function $onEachFeature( ...

Certain iFrame instances are unable to display specific cross-domain pages

I'm currently working on a project to create a website that can embed external cross-domain sites, essentially like building a browser within a browser. I've been experimenting with using iFrames for this purpose: While it works for some pages, ...

What is the best way to style the currently selected option element in a select dropdown?

I am trying to change the font color of specific option elements within a select dropdown by adding style="color: #D4D4D4". When I apply this style directly to an option element like <option value="TEST" style="color: #D4D4D4">TEST</option>, it ...

Arranging elements and buttons inside of components to create a cohesive design

My React application consists of two components: Open and Save. The Save component has a button labeled as saveButton. On the other hand, the Open component contains an openButton, as well as a stopButton and executeButton that are conditionally displayed ...

"Is there a way to verify the existence of checkbox array values within a database using PHP Laravel

In order to display checkboxes for each country that exists in the database, I need to verify if the countries in the database match with those in the list. Since the values are retrieved directly from the database and can't be set as input values due ...

Customize Vue Element UI table cell appearance depending on the data

I am utilizing Element UI for my project. How can I dynamically change the color of the rate cell value in the table? I want the color to be red when rate is less than 0, and green when it is greater than or equal to 0. I wonder if the table attribute cel ...

When scrolling down a webpage, the background color of the content does not stretch along with the page

I've created a webpage with a sticky header and footer, along with a scrollbar on the main content. However, I'm facing an issue where the background color of the content does not extend beyond the viewport when scrolling down. The text is visibl ...

What is the process for including points to the scoreboard?

I am currently working on a simple JavaScript game as my very first project. The game involves clicking a button to generate random numbers for both the user and computer, and the winner is determined by the larger number. I have set up a scoreboard to kee ...

Tips for preventing words from being split between lines in an error message

I am encountering a problem in Angular 2 where error messages are being split onto two lines when there isn't enough space for the entire word. Check out this screenshot for reference Is it possible to prevent words from being divided across lines? ...

Scroll left to erase using PhoneGap

After following a tutorial that resulted in creating a web app to store form input data locally, I attempted to create a native app using phonegap and Xcode. However, I am struggling to figure out how to implement a swipe to delete feature for individual ...

Access the Smarty variable directly from the HTML code rather than through PHP

CODE EXAMPLE: <html><body> {section name=a loop=$items} {$items[a].title} {include file="/directory/showstuff.html" video=$items[a]} {/section} </body> </html> PHP SETUP: $pid = '12'; $items = $cbvid->get_c ...

Why does my text keep drifting towards the left edge?

After spending a day learning CSS and HTML, I decided to recreate a website from a YouTube video and add my own customizations. I was able to center the text in my introduction successfully. However, upon reviewing my progress (see screenshot here), it is ...

What is the process for adding information to datatables using jQuery?

I have been struggling to make a data table in jQuery function correctly. I am able to append data to the table, but the sorting, pagination, and search features are not working. Even though the data is visible in the table, it shows as 0 records. I am wor ...