Tengo este marcado simple de una tabla:
<div class="table"> <div class="table__headers"></div> <div class="table__row"></div> <div class="table__row"></div> </div>Y lo he diseñado usando este CSS:
<style lang="scss" scoped> .grid { display: grid; grid-gap: 0.5rem; } .table { &__headers, &__row { @extend .grid; padding: 0.5rem 0.75rem; :first-child { text-align: start; } :last-child { text-align: end; } p { font-size: 0.8rem; font-weight: bold; text-align: center; margin: 0; } } &__row { background: #f8f8fa; } } </style> Mi único problema es que no puedo apuntar específicamente a los elementos de la primera y la última table__row de la tabla, por lo que puedo diseñarlos de manera diferente.
Lo siguiente no funciona:
&__row:first-of-type { border: solid 1px red; } &__row:last-of-type { border: solid 1px blue; } last-of-type funciona pero no first of type. ¡Cualquier ayuda sería apreciada!
Gracias,
Aquí hay una solución de JavaScript:
let rows = document.querySelectorAll(".table__row"); // Get all rows into an "array-like" object rows[0].classList.add("firstRow"); // Get and style first row rows[rows.length-1].classList.add("lastRow"); // Get and style last row .firstRow { background-color:red; } .lastRow { background-color:green; } <div class="table"> <div class="table__headers"></div> <div class="table__row">blah</div> <div class="table__row">blah</div> <div class="table__row">blah</div> <div class="table__row">blah</div> <div class="table__row">blah</div> <div class="table__row">blah</div> </div>La razón por la que :first-of-type no funciona es porque es el equivalente funcional de :nth-child(1) , cuando lo que necesita es :nth-child(2) debido al elemento <div> anterior.
Estos selectores están pensados para trabajar usando elementos (TagName) y no clases.