Selectors are a way to pick the elements that you want styled. In Stylus, similar to CSS, you can apply a set of styles to any element by separating them by a comma delimited list. Stylus though, also allows you to select multiple elements by separating each on their own line.

Let’s look at an example of each to see how this works.

Stylus Code – Comma Delimited

b, .strong
  color: green
  font-style: italic

Stylus Code – New Line Delimited

b
.strong
  color: green
  font-style: italic
  font-weight: bold

Stylus Output – Same Output for Both Examples Above

b,
.strong {
  color: #008000;
  font-style: italic;
  font-weight: bold;
}

Parent Selector

You can also reference the parent elements for a particular style by using the & ampersand symbol. For instance, let’s assume you want to add a hover for color changes to some elements.

If you need to use the ampersand symbol within a selector without it referencing the parent, then you can use the backslash character to escape it. \&

Stylus Code

textarea, input
  color: lightgray

  &:hover
    color: gray

Stylus Output

textarea,
input {
  color: #d3d3d3;
}
textarea:hover,
input:hover {
  color: #808080;
}

Partial Reference

Partial selectors ^[N] can be used anywhere within your selectors allowing you to reference a specific level of the parent where N is your numeric level starting at 0, which is the highest element with in your chain. When rendered, they contain the entire chain of your selectors until the specified nested level.

If you use a positive number then the higher the number, the closer to your actual element in the chain you’re styling you are.

If you use a negative number, it would be the complete reverse. Instead of starting from the first element in your chain, you would start from the current element and reversely traverse the chain.

They are especially useful when using them within your mixin’s when you are unaware of the nesting level your mixin may be called from.

Let’s look at an example to see how this can be used in application.

We’ll start by setting up our HTML

HTML Code

<h1 class="page-header">
    Page Title
    <span class="page-header--highlight-word">
        Here
    </span>
</h1>

Now, lets make it so that when you hover over any part of the title that the word “Here” changes from one color to another.

Stylus Code

.page-header
  color: darkgreen

  &--highlight-word
    color: lightgreen

    ^[0]:hover &
          color: greenyellow

You’ll see that we were able to select “.page-header” and state that on hover of that element apply the color change to the element “&—highlight-word”.

Stylus Output

.page-header {
  color: #006400;
}
.page-header--highlight-word {
  color: #90ee90;
}
.page-header:hover .page-header--highlight-word {
  color: #adff2f;
}

Initial Reference

A shortcut really to ^[0], the initial reference ~/ can only be used at the start of your selector. We can update our example code above to take advantage of this shortcut like so.

Stylus Code

.page-header
  color: darkgreen

  &--highlight-word
    color: lightgreen

    ~/:hover &
          color: greenyellow

Stylus Output

.page-header {
  color: #006400;
}
.page-header--highlight-word {
  color: #90ee90;
}
.page-header:hover .page-header--highlight-word {
  color: #adff2f;
}

Relative Reference

The relative reference ../ can also only be used at the start of your selectors. They can be used to go as far up the chain as you’d like.

Stylus Code

.page-header
  color: darkgreen

  &--highlight-word
    color: lightgreen

    ../:hover &
          color: greenyellow

Stylus Output

.page-header {
  color: #006400;
}
.page-header--highlight-word {
  color: #90ee90;
}
.page-header:hover .page-header--highlight-word {
  color: #adff2f;
}

Root Reference

The root selector /, is a reference to your document root. For instance, let’s assume you had a set of styles that you also wanted to assign to a root level class.

In our example we’ll create a class .hover-color, which does just that. On hover it changes the color of the text it is applied to. We’ll just append to our existing code to show off how to do this.

Stylus Code

.page-header
  color: darkgreen

  &--highlight-word
    color: lightgreen

    ~/:hover &,
      /.hover-color:hover
          color: greenyellow

Stylus Output

.page-header {
  color: #006400;
}
.page-header--highlight-word {
  color: #90ee90;
}
.page-header:hover .page-header--highlight-word,
.hover-color:hover {
  color: #adff2f;
}

selector() and selectors()

There are 2 functions available to you as well that allow you to get the currently rendered selectors from the current chain.

Here’s an example using the selector() function.

Stylus Code

.page-header
  color: darkgreen

  &--highlight-word
    color: lightgreen
    content: selector()

Stylus Output

.page-header {
  color: #006400;
}
.page-header--highlight-word {
  color: #90ee90;
  content: '.page-header--highlight-word';
}

You’ll see that the content is now filled with the current rendered class name.

If we were to change the above from selector() to selectors(), you’d see that all of the classes from the chain would appear.

Stylus Code

.page-header
  color: darkgreen

  &--highlight-word
    color: lightgreen
    content: selectors()

Stylus Output

.page-header {
  color: #006400;
}
.page-header--highlight-word {
  color: #90ee90;
  content: '.page-header', '&--highlight-word';
}

You can also use the selector() function to create your nested selector structure.

Stylus Code

{ selector('.page-header') }
   color: darkgreen

{ selector('.page-header', '&--highlight-word') }
  color: lightgreen

{ selector('.page-header', 'span') }
  font-weight: bold

Stylus Output

.page-header {
  color: #006400;
}
.page-header--highlight-word {
  color: #90ee90;
}
.page-header span {
  font-weight: bold;
}