CODEWITHSUNDEEP
htmlcss
Rune Wars
Rune Wars

Reputation: 85

Is there a way to target individual elements?

Is there a way to target the bottom tds of just the first and second rows? I have tried just using tr > td{border-bottom:black solid 1px;} but it goes through all tds.

<!DOCTYPE html>
<html>
<head>
    <title>Index.html</title>
    <link rel="stylesheet" type="text/css" href="style.css">


</head>
<body>
    <table>
        <tr>
            <td>        </td>
            <td>        </td>
            <td>        </td>
        </tr>
        <tr>        
            <td>        </td>
            <td>        </td>
            <td>        </td>
        </tr>
        <tr>
            <td>        </td>
            <td>        </td>
            <td>        </td>
        </tr>

    </table>
</body>
</html>

Heres what I have so far for css

td{
    height:100px;
    width:100px;
}
tr > td:nth-of-type(1){
    border-right:1px solid black;
}
tr > td:nth-of-type(3){
    border-left:1px solid black;
}

Upvotes: 0

Views: 53

Answers (3)

Zhaph - Ben Duguid
Zhaph - Ben Duguid

Reputation: 26956

For a traditional grid of nine squares, you can use table tr:not(:last-child) td to target all cells in all rows except the last one:

td{
    height:100px;
    width:100px;
}
tr > td:nth-of-type(1){
    border-right:1px solid black;
}
tr > td:nth-of-type(3){
    border-left:1px solid black;
}
table tr:not(:last-child) td {
  border-bottom: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
    <title>Index.html</title>
    <link rel="stylesheet" type="text/css" href="style.css">


</head>
<body>
    <table>
        <tr>
            <td>        </td>
            <td>        </td>
            <td>        </td>
        </tr>
        <tr>        
            <td>        </td>
            <td>        </td>
            <td>        </td>
        </tr>
        <tr>
            <td>        </td>
            <td>        </td>
            <td>        </td>
        </tr>

    </table>
</body>
</html>

Changing that to table tr:not(:last-child) td:not(:last-child) will target the first two squares in each row, leaving the third column bare.

Upvotes: 1

Ramon de Vries
Ramon de Vries

Reputation: 1342

Yes, with :nth-of-type you can do for example this:

selecting nothing but the first 2 tr and nothing but the first 2 td inside

td{
    height:100px;
    width:100px;
}
tr > td:nth-of-type(1){
    border-right:1px solid black;
}
tr > td:nth-of-type(3){
    border-left:1px solid black;
}
table tr:nth-of-type(-n+2) td:nth-of-type(-n+2){
  border-bottom: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
    <title>Index.html</title>
    <link rel="stylesheet" type="text/css" href="style.css">


</head>
<body>
    <table>
        <tr>
            <td>        </td>
            <td>        </td>
            <td>        </td>
        </tr>
        <tr>        
            <td>        </td>
            <td>        </td>
            <td>        </td>
        </tr>
        <tr>
            <td>        </td>
            <td>        </td>
            <td>        </td>
        </tr>

    </table>
</body>
</html>

Upvotes: 1

John
John

Reputation: 5335

Sure you can use this:

tr:nth-of-type(-n + 2) > td:nth-of-type(-n +2){
    border-bottom:1px solid black;
}

working example:

td{
    height:100px;
    width:100px;
}
tr > td:nth-of-type(1){
    border-right:1px solid black;
}
tr > td:nth-of-type(3){
    border-left:1px solid black;
}

tr:nth-of-type(-n + 2) > td:nth-of-type(-n +2){
    border-bottom:1px solid black;
}
<!DOCTYPE html>
<html>
<head>
    <title>Index.html</title>
    <link rel="stylesheet" type="text/css" href="style.css">


</head>
<body>
    <table>
        <tr>
            <td>        </td>
            <td>        </td>
            <td>        </td>
        </tr>
        <tr>        
            <td>        </td>
            <td>        </td>
            <td>        </td>
        </tr>
        <tr>
            <td>        </td>
            <td>        </td>
            <td>        </td>
        </tr>

    </table>
</body>
</html>

Upvotes: 1

Related Questions