I have a table with maximum of two columns. Sometimes some rows have column span of 2. Inside of those rows are buttons:

@charset "UTF-8";

* {
    padding: 0;
    margin: 0;
}

input, button {
    font-size: 23px;
}

body {
    font-family: MontSerrat-Regular, sans-serif;
    font-size: 30px;
    text-align: center;
}

.default-toplevel-container table {
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
}

.default-toplevel-container input[type=text] {
    border-radius: 7px;
    border: 2px solid black;
    padding: 10px;
    width: 450px;
}

.default-toplevel-container input[type=submit] {
    text-decoration: none;
    background-color: #008DB9;
    color: white;
    padding: 10px;
    border: none;
}

.default-toplevel-container input[type=submit]:hover {
    color: #00D084;
    transition: 0.3s;
    cursor: pointer;
}

/*

    NEW CV TABLE

*/

.newcvtable {
    border-spacing: 5px 15px;
}

.newcvtable td:first-child {
    text-align: right;
}

.newcvtable textarea {
    border-radius: 10px;
    border: 2px solid black;
    padding: 10px;
    width: 450px;
    height: 170px;
    font-size: 19px;
}

.newcvtable td button {
    text-decoration: none;
    background-color: #008DB9;
    color: white;
    padding: 10px;
    text-align: center;
    border: none;
}

.newcvtable button:hover {
    color: #00D084;
    transition: 0.3s;
    cursor: pointer;
}

         <div >
         <table >
                <tr>
                    <td>First name:</td>
                    <td><input type="text">
                </tr>
                <tr>
                    <td>Last name:</td>
                    <td><input type="text">
                </tr>
                <tr>
                    <td>Email:</td>
                    <td><input type="text">
                </tr>
                <tr>
                    <td>Phone:</td>
                    <td><input type="text">
                </tr>
                <tr>
                    <td>Place:</td>
                    <td><input type="text">
                </tr>
                <tr>
                    <td>Summary:</td>
                    <td><textarea></textarea></td>
                </tr>
                <tr>
                    <td>Skills:</td>
                    <td><textarea></textarea></td>
                </tr>
                <tr>
                    <td>Experience name:</td>
                    <td><input type="text">
                </tr>
                <tr>
                    <td colspan="2"><button>Add experience</button></td>
                </tr>
                <tr>
                    <td>Project name:</td>
                    <td><input type="text">
                </tr>
                <tr>
                    <td colspan="2"><button>Add project</button></td>
                </tr>
            </table>
        </div>

I want these buttons to be centered, while other td's with column span of 1 to be aligned to right:

The right aligment does this css part:

.newcvtable td:first-child {
    text-align: right;
}

However it align buttons too (because they are first child, but with column span of 2).

I tried:

.newcvtable td:first-child:not(button) {
    text-align: right;
}

, but it does not work.

How to style td in table that has only certain column span? In my case: 1.

CodePudding user response：

Use the attribute selector, to exclude those TD that have colspan="2" set:

.newcvtable td:first-child:not([colspan="2"]) {
    text-align: right;
}