Selecting the first child within a table using the first-child

Question

Selecting the first child within a table using the first-child

I recently set up a login portal page for three different websites. The layout consists of three separate login portals displayed neatly in two columns within a table named "loginPortals". I am currently working on styling the page using CSS, aiming to enhance my skills and keep the code streamlined.

To give you an idea of the structure, here is a snippet of the HTML:

<table class="loginPortals">
    <tbody>
        <tr>
            <td>Picture 1</td>
            <td>Login form 1</td>
        </tr>
        <tr>
            <td>Picture 2</td>
            <td>Login form 2</td>
        </tr>
        <tr>
            <td>Picture 3</td>
            <td>Login form 3</td>
        </tr>
    </tbody>
</table>

Although I have started working on the CSS, it's far from complete. One issue I am facing is with applying borders between each row. My current attempt is not achieving the desired outcome, as it adds unwanted thickness in the middle of rows due to top border being applied to all cells.

.loginPortals{
    width:100%;
}
    .loginPortals tbody:first-child td{
        border-top:1px solid #000;
    }
    .loginPortals tbody tr td{
        border-bottom:1px solid #000;
        padding:1em 0;
    }

The use of the first-child selector did not work as intended, resulting in thicker borders than expected. How can I resolve this issue without adding more classes or inline styles?

Any input would be greatly appreciated!
Joe

html css css-selectors

Answer 1

Answer №1

To ensure your table borders are tidy, it is important to set them to collapse:

.loginPortals{
    width:100%;
    border-collapse: collapse;
}

Once you have done this, you can skip the :first-child rule and simply add top and bottom borders to all rows in your table:

.loginPortals tbody tr td{
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    padding:1em 0;
}

Additionally, it's worth noting that this selector:

.loginPortals tbody:first-child td

Actually means:

Select any td element
within a tbody
that is the first child of its parent.

Not:

Select any td element
within the first child of a tbody.

Since the only child of .loginPortals is the tbody, all td elements within their parent tr will be selected. For a visual guide, refer to this answer. If you were looking for this specific selector, you would want:

.loginPortals tbody tr:first-child td

However, by setting your table borders to collapse, this becomes unnecessary.

Answer 2

To ensure your table borders are tidy, it is important to set them to collapse:

.loginPortals{
    width:100%;
    border-collapse: collapse;
}

Once you have done this, you can skip the :first-child rule and simply add top and bottom borders to all rows in your table:

.loginPortals tbody tr td{
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    padding:1em 0;
}

Additionally, it's worth noting that this selector:

.loginPortals tbody:first-child td

Actually means:

Select any td element
within a tbody
that is the first child of its parent.

Not:

Select any td element
within the first child of a tbody.

Since the only child of .loginPortals is the tbody, all td elements within their parent tr will be selected. For a visual guide, refer to this answer. If you were looking for this specific selector, you would want:

.loginPortals tbody tr:first-child td

However, by setting your table borders to collapse, this becomes unnecessary.

Answer 3

Answer №2

If my understanding is correct, you are dealing with 3 forms but only wish to have two visible lines - this is the impression I got from your statement "I want a border of some sort appearing between each row". If that's the case, you can try the following code snippet for a solution.

.customForms tr:first-child td{
    border-top:none;
}
.customForms tbody tr td{
    border-top:1px solid #000;
    padding:1em 0;
}

Check out this JSFiddle link for a live example.

Answer 4

If my understanding is correct, you are dealing with 3 forms but only wish to have two visible lines - this is the impression I got from your statement "I want a border of some sort appearing between each row". If that's the case, you can try the following code snippet for a solution.

.customForms tr:first-child td{
    border-top:none;
}
.customForms tbody tr td{
    border-top:1px solid #000;
    padding:1em 0;
}

Check out this JSFiddle link for a live example.

Answer 5

Answer №3

In my opinion, this solution seems viable...

th {border-bottom:1px solid #333;}

Answer 6

In my opinion, this solution seems viable...

th {border-bottom:1px solid #333;}

Answer 7

Answer №4

When looking to enhance your CSS abilities, it is vital to move away from using tables for layout purposes.

Additionally, the :first-child pseudo class applies to elements that are the initial child within their parent element. Considering you have only one tbody element and it serves as the first child of the table, using either tbody or tbody:first-child will produce the same outcome.

Note: If you intend to specifically target only the cells in the first row of the table, you can utilize the selector tr:first-child td.

To address this issue, you could apply a border-bottom to all td elements. Alternatively, if a top border is also required, you have the option of setting it on the actual table, or giving each td both a border-top and border-bottom. To prevent the double border effect, consider implementing border-collapse: collapse to make the borders collapse together.

In summary: Use

table {border-collapse: collapse}

to manage table borders effectively. However, refrain from relying on tables for layout purposes.

Answer 8

When looking to enhance your CSS abilities, it is vital to move away from using tables for layout purposes.

Additionally, the :first-child pseudo class applies to elements that are the initial child within their parent element. Considering you have only one tbody element and it serves as the first child of the table, using either tbody or tbody:first-child will produce the same outcome.

Note: If you intend to specifically target only the cells in the first row of the table, you can utilize the selector tr:first-child td.

To address this issue, you could apply a border-bottom to all td elements. Alternatively, if a top border is also required, you have the option of setting it on the actual table, or giving each td both a border-top and border-bottom. To prevent the double border effect, consider implementing border-collapse: collapse to make the borders collapse together.

In summary: Use

table {border-collapse: collapse}

to manage table borders effectively. However, refrain from relying on tables for layout purposes.

Selecting the first child within a table using the first-child

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

"Utilizing Bootstrap to create a space-saving table layout with an

What are some of the top languages, libraries, and modules used to create a web application for constructing templates?

Leverage Bootstrap 4 for achieving flexible layouts and centering content with two elements using flex and justify-content

Is it better to store CSS and JavaScript in separate files or within the main HTML document

Issue with aligning CSS in Internet Explorer 7

What is the best way to layer multiple navigation menus on top of each other using z-index?

Is there a way to ensure consistent heights for various elements within a column, even if their heights are

use angularjs directive to position a div absolutely aligned with the right edge of another div

Correctly align the div on the screen as the viewport is scrolled

What is the correct way to utilize ng-if/ng-show/ng-hide to hide or show HTML elements within the app.run function

Is it possible to style an element that has extended beyond its parent container using CSS?

Achieving a centered Title while aligning Nav all the way to the right using flexbox: tips and tricks

What is the best way to create a div that maintains a consistent size while displaying images inside?

What is the process for developing multiple screens or views in PhoneGap?

Creating a dynamic trio of graphs with HTML5, CSS3, and Vanilla JavaScript

Different options exist for top layers with flexible widths aside from using position: absolute

Glitch in jQuery causing multiple instances of text being added to a textarea consecut

Tips for integrating CSS keyframes in MUI v5 (using emotion)

What is the process for outputting JSON data from a script page?

"Email signature design with sleek black borders incorporated for a professional touch in responses