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

Navigation
1

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

Here is an example code sequence: 

<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 some divs are given the .date class.

Thank you for the collaboration.

    
asked by anonymous 27.08.2018 / 16:05

1 answer

1

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

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

Then you use pseudo-classes nth-child(2) and last-child to arrive at the dates you want to customize.

See the example to better understand, always the first and last date will be in a different color , regardless of the amount of content between the first date and the last date. 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>
    
27.08.2018 / 17:30
solve google speed insights problem Function to create Column