jmashburn jmashburn - 8 days ago 4
CSS Question

Last child of table stylized in CSS (no classes)

I'm applying a style to have every odd cell with 2px solid bottom border, and every even has 1px solid bottom border. I want to target last child to have the 2px solid bottom. this is my code as of right now (which works except the bottom having the 2px solid.)

(please note: I am VERY new to CSS, following twitter bootstrap CSS to do what I can and adapting some of it to my site. this is my first CSS project. I know there are a lot of compatibility issues with older browsers in here, but I frankly don't care...)

.table-bordered {
border: 1px solid #dddddd;
border-collapse: separate;
*border-collapse: collapse;
border-left: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

.table-striped tbody > tr:nth-child(odd) > td,
.table-striped tbody > tr:nth-child(odd) > th {
border-bottom: 2px solid #333;
}

.table-striped tbody > tr:nth-child(even) > td,
.table-striped tbody > tr:nth-child(even) > th {
border-bottom: 1px solid #333;
}

.table-striped
tbody tr:last-child td {
border-bottom: 2px solid: #333;!important
}

Answer

The issue is dirty syntax, you are using a colon and !important at wrong places, so this

border-bottom: 2px solid: #333;!important
                      --^-- --^--

Should be replaced with

border-bottom: 2px solid #333 !important;