CODEWITHSUNDEEP
csscss-selectorssass
sawa
sawa

Reputation: 168081

Is there a way to shorten the css selector?

I am using SCSS. I have tables whose column widths and text alignments are to be specified. Right now, I have a bunch of css selectors like this:

.some-table-class{
  &>colgroup>col{
    &:nth-child(1){width: /* some value */}
    &:nth-child(2){width: /* ... */}
    ...
  }
  &>tbody>tr>td{
    &:nth-child(1)>*{text-align: /* some value */}
    &:nth-child(2)>*{text-align: /* ...*/}
    ...
  }
}

Is there a way to simplify this using some functionality of SCSS so that I don't have to repeat writing &>colgroup>col, &>tbody>tr>td>, and >*? Is there a way to apply a function to css selectors so that I can write something like this:

some_function(.some-table-class){
  &:nth-child(1){width: /* some value */, text-align: /* some value */}
  &:nth-child(2){width: /* ... */, text-align: /* ...*/}
}

Upvotes: 0

Views: 890

Answers (2)

cimmanon
cimmanon

Reputation: 68319

Unless you're expecting to have nested tables or instances where you only want to target cols that are within colgroups (and not outside), then you have a lot of redundancies.

table.test {
    // must the col appear within a colgroup?
    col {
        $i: 1;
        @each $w in (10em, 5em, 10em, 20em, 15em) {
            &:nth-child(#{$i}) {
                width: $w;
            }
            $i: $i + 1;
        }
    }

    // a td can't appear outside of a tr
    tbody td {
        $i: 1;
        @each $a in (left, left, center, right, left) {
            // is the alignment only for direct descendants of the td necessary?
            &:nth-child(#{$i}) {
                text-align: $a;
            }
            $i: $i + 1;
        }
    }
}

Generates:

table.test col:nth-child(1) {
  width: 10em;
}

table.test col:nth-child(2) {
  width: 5em;
}

table.test col:nth-child(3) {
  width: 10em;
}

table.test col:nth-child(4) {
  width: 20em;
}

table.test col:nth-child(5) {
  width: 15em;
}

table.test tbody td:nth-child(1) {
  text-align: left;
}

table.test tbody td:nth-child(2) {
  text-align: left;
}

table.test tbody td:nth-child(3) {
  text-align: center;
}

table.test tbody td:nth-child(4) {
  text-align: right;
}

table.test tbody td:nth-child(5) {
  text-align: left;
}

Or...

$list: 10em left, 5em left, 10em center, 20em right, 15em left;

table.test {
    // must the col appear within a colgroup?
    $i: 1;
    @each $child in $list {
        col {
            &:nth-child(#{$i}) {
                width: nth($child, 1);
            }
        }

        // a td can't appear outside of a tr
        tbody td {
            // is the alignment only for direct descendants of the td necessary?
            &:nth-child(#{$i}) {
                text-align: nth($child, 2);
            }
        }
        $i: $i + 1;
    }
}

Generates:

table.test col:nth-child(1) {
  width: 10em;
}

table.test tbody td:nth-child(1) {
  text-align: left;
}

table.test col:nth-child(2) {
  width: 5em;
}

table.test tbody td:nth-child(2) {
  text-align: left;
}

table.test col:nth-child(3) {
  width: 10em;
}

table.test tbody td:nth-child(3) {
  text-align: center;
}

table.test col:nth-child(4) {
  width: 20em;
}

table.test tbody td:nth-child(4) {
  text-align: right;
}

table.test col:nth-child(5) {
  width: 15em;
}

table.test tbody td:nth-child(5) {
  text-align: left;
}

Upvotes: 2

Alvaro Lourenço
Alvaro Lourenço

Reputation: 1341

I would suggest:

.some-table-class {

  > colgroup > col
    @for $i from 1 through N {
      &:nth-child($i) {width: /* some value */}
    }
  }

  > tbody > tr > td {
    @for $i from 1 through N {
      &:nth-child($i) > * {text-align: /* some value */}
    }
  }

}

What about?

Upvotes: 0

Related Questions