Select the first and last "td" elements with the class "selected" in 2 separate tables

Question

I have 2 separate tables, every one of the td elements can contain "selected" class, how can I select the first and last td elements with "selected" class in both tables.

<table class="table1">
    <tr>
        <td>Jill</td>
        <td class="selected">Smith</td>
    </tr>
    <tr>
        <td class="selected">Hill</td>
        <td class="selected">Morris</td>
    </tr>
</table>

<table class="table2">
    <tr>
        <td class="selected">Mills</td>
        <td>Garyn</td>
    </tr>
    <tr>
        <td>Lee</td>
        <td>Gutierrez</td>
    </tr>
</table>

The first item is the "td" with the class "selected" is Smith, and the last one is "Mills"

You will need script to accomplish that. CSS doesn't have a _first-of-class_ selector. Furthermore, to at all do a _first-of_ the target element need to be siblings. — Asons, Apr 28 '19 at 08:43
do the first always be in `table1` and the last in `table2`? — לבני מלכה, Apr 28 '19 at 08:43
Do you want to format the elements or select it? Remember that you can add multiple css-classes. — Jeroen Heier, Apr 28 '19 at 08:44
@HienNguyen OP asks _"how can I select the first and last td elements with `selected`"_, and the two dupe answer that. How is it then not a dupe? — Asons, Apr 28 '19 at 09:06

score 0 · Answer 1 · answered Apr 28 '19 at 08:47

Use javascript and set style to first and last with querySelectorAll

var matches = document.querySelectorAll(".selected");
if(matches.length>0){
matches[0].style.color="red";
matches[matches.length-1].style.color="red";
}

<table class="table1">
    <tr>
        <td>Jill</td>
        <td class="selected">Smith</td>
    </tr>
    <tr>
        <td class="selected">Hill</td>
        <td class="selected">Morris</td>
    </tr>
</table>

<table class="table2">
    <tr>
        <td class="selected">Mills</td>
        <td>Garyn</td>
    </tr>
    <tr>
        <td>Lee</td>
        <td>Gutierrez</td>
    </tr>
</table>

how about the last child? – Hien Nguyen Apr 28 '19 at 08:51 — Hien Nguyen, Apr 28 '19 at 08:51

Select the first and last "td" elements with the class "selected" in 2 separate tables

1 Answers1