Home/ Questions/Q 7898681
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T08:30:00+00:00

How come these two don’t come out equivalent? The first one shows a green

  • 0

How come these two don’t come out equivalent? The first one shows a green row, while the second doesn’t. The only difference is in html c Furthermore, what is the specificity of the nth-child selector?

<!DOCTYPE html>
<html>
    <head>
        <title>Stripe Test</title>
        <style type='text/css'>
            tr:nth-child(2n+1)
            {
                background-color: red;
            }
            tr.c
            {
                background-color: green;
            }
        </style>
    </head>
    <body>
        <table class='stripe'>
            <tr class='c'>
                <td>one</td>
            </tr>
            <tr>
                <td>two</td>
            </tr>
            <tr>
                <td>three</td>
            </tr>
        </table>
    </body>
</html>

-vs-

<!DOCTYPE html>
<html>
    <head>
        <title>Stripe Test</title>
        <style type='text/css'>
            tr:nth-child(2n+1)
            {
                background-color: red;
            }
            tr .c
            {
                background-color: green;
            }
        </style>
    </head>
    <body>
        <table class='stripe'>
            <tr class='c'>
                <td>one</td>
            </tr>
            <tr>
                <td>two</td>
            </tr>
            <tr>
                <td>three</td>
            </tr>
        </table>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    tr.c (no space)` is a table row of class c.

    tr .c (with space) is a table row, followed by some OTHER unspecified tag with class c.

    The space implies a parent/child relationship. Since you’ve got the c class ON the tr tag itself, there is no child below the tr that has a c class.

    • 0