CODEWITHSUNDEEP
sass
CLL
CLL

Reputation: 1342

How can I apply one property to multiple descendent selectors in Sass selector list

If I use this:

.ui-collapsible-themed-content
    .ui-listview:not(.ui-listview-inset)
        >li.ui-last-child,
.ui-collapsible-themed-content
    .ui-listview:not(.ui-listview-inset)
        >li.ui-last-child
            >a.ui-btn
                border-bottom: 1px solid $border-color

... the whole section before the comma is ignored in the CSS output:

.ui-collapsible-themed-content .ui-listview:not(.ui-listview-inset) > li.ui-last-child > a.ui-btn {
  border-bottom: 1px solid #a7a7a7; }

I also tried this, thinking the ampersand would put the parent selector (before the comma) in its place:

.ui-collapsible-themed-content
    .ui-listview:not(.ui-listview-inset)
        >li.ui-last-child,
            & >a.ui-btn
                border-bottom: 1px solid $border-color

It seems the comma is ignored.

Same result with this:

.ui-collapsible-themed-content
    .ui-listview:not(.ui-listview-inset)
        >li.ui-last-child,
            >a.ui-btn
                border-bottom: 1px solid $border-color

It seems the only way I can get what I'm looking for is this:

.ui-collapsible-themed-content
    .ui-listview:not(.ui-listview-inset)
        >li.ui-last-child,
            border-bottom: 1px solid $border-color
            >a.ui-btn
                border-bottom: 1px solid $border-color

Which gives me:

.ui-collapsible-themed-content .ui-listview:not(.ui-listview-inset) > li.ui-last-child {
  border-bottom: 1px solid #a7a7a7; }
  .ui-collapsible-themed-content .ui-listview:not(.ui-listview-inset) > li.ui-last-child > a.ui-btn {
    border-bottom: 1px solid #a7a7a7; }

Is there any way to get the same output while only listing the "border-bottom" property once?

Upvotes: 0

Views: 34

Answers (1)

cimmanon
cimmanon

Reputation: 68329

Your comma is in the wrong location. What you're looking for is this:

.ui-collapsible-themed-content
    .ui-listview:not(.ui-listview-inset)
        >li.ui-last-child
            &, >a.ui-btn
                border-bottom: 1px solid $border-color

Upvotes: 1

Related Questions