2

Here I have SCSS to style list items. What I'm wondering is if the order of selection for classes and pseudo-selectors. So basically, does &:before.active equal &.active:before?

Here is the full example of the latter:

.sidebar-list {
  list-style-type: none;
  padding: 0;

  & li {
    padding: 4px 0;

    &:before {                      // Here,
      color: darken($font-color, 60%);
      font-family: "FontAwesome";
      content: "\f101\00a0";
    }

    &.selected:before {             // And here.
      color: darken($font-color, 30%);
    }
  }
}

And the former of the part that matters (inside the li):

    &:before {                 // Here,
      color: darken($font-color, 60%);
      font-family: "FontAwesome";
      content: "\f101\00a0";

      &.selected {             // And here. This would evaluate to "li:before.selected"
        color: darken($font-color, 30%);
      }
    }

Which one would be correct for styling the :before psuedo-selector for a list item?

Thanks!

BoltClock
  • 630,065
  • 150
  • 1,295
  • 1,284
spikespaz
  • 1,594
  • 2
  • 19
  • 42

1 Answers1

2

Yes, the order does matter. li:before.selected will basically be ignored because it is invalid.

Here's a snippet for example:

span::before {
  content:'span::before (Normal)';
  background-color: #ddd;
}

/* Valid */
span.ribbon::before {
  content: "span.ribbon::before (Valid)";
  background-color: #0f0;
}

/* Invalid. Will be ignored */
span::before.ribbon {
  content: "span::before.ribbon (Invalid)";
  background-color: #f00;
}
<span></span>
<span class="ribbon"></span>

Also, you'll want to use double-colons for the ::before pseudo-element (updated in CSS3).

Wes Foster
  • 8,202
  • 4
  • 36
  • 57
  • The CSS psuedo-selectors (or content) require only one colon. It's only psuedo-elements that require the `::`. (I looked it up to make sure: https://stackoverflow.com/a/41867706/2512078) Thank you! This is a good answer. – spikespaz Jun 23 '17 at 18:37