css - IE8 ignores rules with too many selectors -

i have sass generated css file use (sass) @extend extend various bootstrap classes.

in instances, results in styling rules have large number of selectors. example:

#bb .col-xs-1, #bb .amend .summary-wrapper .summary .summary-item .col-price, #bb .amend .summary-wrapper .summary-head .summary-item .col-price, #bb .col-xs-2, #bb .check-items .summary-wrapper .summary .summary-item .col-edit, #bb .amend .summary-wrapper .summary .summary-item .col-date, #bb .amend .summary-wrapper .summary-head .summary-item .col-date, #bb .col-xs-3, #bb .check-items .summary-wrapper .summary .summary-item .col-label, #bb .checkout .summary-wrapper .summary .summary-item .col-label, #bb .amend .summary-wrapper .summary .summary-item .col-data, #bb .amend .summary-wrapper .summary-head .summary-item .col-data, #bb .amend .summary-wrapper .summary .summary-item .col-location, #bb .amend .summary-wrapper .summary-head .summary-item .col-location, #bb .amend .summary-wrapper .summary .summary-item .col-edit, #bb .amend .summary-wrapper .summary-head .summary-item .col-edit, #bb .col-xs-4, #bb .day-nav .day-nav-left, #bb .day-nav .day-nav-title, #bb .day-nav .day-nav-right, #bb .col-xs-5, #bb .col-xs-6, #bb .col-xs-7, #bb .check-items .summary-wrapper .summary .summary-item .col-data, #bb .col-xs-8, #bb .col-xs-9, #bb .checkout .summary-wrapper .summary .summary-item .col-data, #bb .col-xs-10, #bb .col-xs-11, #bb .col-xs-12, #bb .col-sm-1, #bb .col-sm-2, #bb .bb-list-item .bb-action, #bb .week-nav .week-nav-left, #bb .week-nav .week-nav-right, #bb .service-list .filters .filter-col, #bb .col-sm-3, #bb .bb-label, #bb .field.field-sml, #bb .field.field-select, #bb .field.field-big + .messages, #bb .booking-questions .form-group.child:nth-child(even) .field, #bb .col-sm-4, #bb .field, #bb .field + .messages, #bb .field.field-sml + .messages, #bb .bb-big-picker .left, #bb .checkout .summary-wrapper .booking-options, #bb .schedule-beauty .date-select .date-picker, #bb .schedule-beauty .date-select .date-nav, #bb .schedule-beauty .treatments .treatment.third, #bb .amend .summary-wrapper .booking-options, #bb .col-sm-5, #bb .bb-store-block, #bb .bb-label.bb-label-big, #bb .booking-questions .form-group.child:nth-child(even) .bb-label, #bb .col-sm-6, #bb .category-container .category .category-content, #bb .category-container .category .category-image, #bb .field.field-big, #bb .booking-questions .form-group.child:nth-child(odd) .bb-label, #bb .booking-questions .form-group.child:nth-child(odd) .field, #bb .check-items .summary-wrapper .summary, #bb .check-items .summary-wrapper .summary-notes, #bb .schedule-beauty .treatments .treatment.half, #bb .col-sm-7, #bb .bb-map-wrapper, #bb .col-sm-8, #bb .bb-list-item .bb-txt, #bb .bb-big-picker .right, #bb .week-nav .week-nav-title, #bb .checkout .summary-wrapper .summary, #bb .col-sm-9, #bb .field.field-huge, #bb .submit-col, #bb .info-box-field-wrapper, #bb .col-sm-10, #bb .col-sm-11, #bb .col-sm-12, #bb .bb-list-item .bb-txt-big, #bb .bb-store-block .stores .store, #bb .bb-question-heading, #bb .amend .summary-wrapper .summary, #bb .amend .summary-wrapper .summary-head, #bb .col-md-1, #bb .col-md-2, #bb .col-md-3, #bb .col-md-4, #bb .col-md-5, #bb .col-md-6, #bb .col-md-7, #bb .col-md-8, #bb .col-md-9, #bb .col-md-10, #bb .col-md-11, #bb .col-md-12, #bb .col-lg-1, #bb .col-lg-2, #bb .col-lg-3, #bb .col-lg-4, #bb .col-lg-5, #bb .col-lg-6, #bb .col-lg-7, #bb .col-lg-8, #bb .col-lg-9, #bb .col-lg-10, #bb .col-lg-11, #bb .col-lg-12 {   position: relative;   min-height: 1px;   padding-left: 15px;   padding-right: 15px; } 

in testing, appears ie8 ignores rule. i'm aware of 4095 rule limit in ie8, after running blesscss, doesn't seem issue reports have total of 2,904 rules. seems ie ignoring rule because there many selectors associated it.

is there workaround issue? or should consider different approach?

ie8 ignores css declarations include non-supported selectors. in case, looks it's failing on :nth-child() selectors.

to around this, i'd set styles in mixin include in placeholder, extend placeholder anywhere need to, in cases need apply styles :nth-child, include mixin rather extend placeholder. example:

@mixin mystyles {   position: relative;   min-height: 1px;   padding-left: 15px;   padding-right: 15px; }  %styled {   @include mystyles; }  .goodselector {   @extend %styled; }  .formgroup:nth-child(even) {   @include mystyles; }