How to take the first and last class Parent of a div contained within a TD via CSS/SASS?

Asked

Viewed 439 times

1

I would like to know how to get the first and last Rent of a class set (.date) that is contained in a div within an element .

Following is an example of a code tree:

<table>

    <tr>
        <td>Nome</td>
        <td>Sobrenome</td>
        <td>Data Nascimento</td>
    </tr>
    <tr>
        <td class="range">Thiago</td>
        <td class="range">Cunha</td>
        <td class="range">
            <div class="date">
                22/12/1988
            </div>
        </td>
    </tr>
    <tr>
        <td class="range">Caroline</td>
        <td class="range">Cunha</td>
        <td class="range">
            <div class="date">
                22/12/1988
            </div>
        </td>
    </tr>
    <tr>
        <td class="range">Thalita</td>
        <td class="range">Cunha</td>
        <td class="range">
            <div class="date">
                22/12/1988
            </div>
        </td>
    </tr>
    <tr>
        <td class="range">Thiago</td>
        <td class="range">Cunha</td>
        <td class="range">22/12/1988</td>
    </tr>
    <tr>
        <td class="range">Caroline</td>
        <td class="range">Cunha</td>
        <td class="range">
            <div class="date">
                22/12/1988
            </div>
        </td>
    </tr>
    <tr>
        <td class="range">Thalita</td>
        <td class="range">Cunha</td>
        <td class="range">
            <div class="date">
                22/12/1988
            </div>
        </td>
    </tr>


</table>

Note that in the code, only a few Divs receive the class . date.

Grateful for the collaboration.

html css html5 css3 front-end

  • Related https://answall.com/questions/111535/pega-primeiro-elemento-da-linha-e-ultimo

  • I got to take a look, but it’s still not that!

  • Wouldn’t it be an option to create a class and put it in the first and last . date? Type class="date first"

1 answer

1


You can, but for that you need to select the TR and not the div, this is due to the hierarchy of selectors.

So first you need to select yours second TR, because the first is where the column titles are and not the dates, and then select the last TR where the last date is.

Then you use the pseudo-class nth-child(2) and last-child to get the dates you want to customize.

See the example to better understand, always the first and last date will be in different color, does not matter the amount of content between the first date and the last. I left the comments in the css code.

/* pega sempre a segunda última TD da segunda TR e  troca a cor da classe .date */
tr:nth-child(2) > td:last-child .date {
  color: red;
}
/* pega sempre a última TD da última TR e troca a cor da classe .date */
tr:last-child > td:last-child .date {
  color: blue;
}
<table>

    <tr>
        <td>Nome</td>
        <td>Sobrenome</td>
        <td>Data Nascimento</td>
    </tr>
    <tr>
        <td class="range">Thiago</td>
        <td class="range">Cunha</td>
        <td class="range">
            <div class="date">
                22/12/1988
            </div>
        </td>
    </tr>
    <tr>
        <td class="range">Caroline</td>
        <td class="range">Cunha</td>
        <td class="range">
            <div class="date">
                22/12/1988
            </div>
        </td>
    </tr>
    <tr>
        <td class="range">Thalita</td>
        <td class="range">Cunha</td>
        <td class="range">
            <div class="date">
                22/12/1988
            </div>
        </td>
    </tr>
    <tr>
        <td class="range">Thiago</td>
        <td class="range">Cunha</td>
        <td class="range">22/12/1988</td>
    </tr>
    <tr>
        <td class="range">Caroline</td>
        <td class="range">Cunha</td>
        <td class="range">
            <div class="date">
                22/12/1988
            </div>
        </td>
    </tr>
    <tr>
        <td class="range">Thalita</td>
        <td class="range">Cunha</td>
        <td class="range">
            <div class="date">
                22/12/1988
            </div>
        </td>
    </tr>


</table>

Browser other questions tagged html css html5 css3 front-end

You are not signed in. Login or sign up in order to post.