Use :*-of-type instead of :*-child so that <template>s don't break selectors

Created by: JonathanWolfe

Example of markup this fixes:

<ul class="list-group style-scope list-of-items">

    <li class="list-group-item  style-scope list-of-items" id="25016000000350">
        AAA
    </li>

    <li class="list-group-item  style-scope list-of-items" id="25016000000001">
        Admin
    </li>

    <li class="list-group-item  style-scope list-of-items" id="25016000002594">
        asasd
    </li>

    <template is="dom-repeat" as="row" class="style-scope list-of-items">
        ...
    </template>

</ul>

scss/_list-group.scss

@@ -22,11 +22,11 @@
   background-color: $list-group-bg;
   border: $list-group-border-width solid $list-group-border-color;
 
-  &:first-child {
+  &:first-of-type {
     @include border-top-radius($list-group-border-radius);
   }
 
-  &:last-child {
+  &:last-of-type {
     margin-bottom: 0;
     @include border-bottom-radius($list-group-border-radius);
   }