Using Selectors in Stylus

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

Stylus Code – New Line Delimited

Stylus Output – Same Output for Both Examples Above

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

Stylus Output

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

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

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

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

Stylus Output

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

Stylus Output

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

Stylus Output

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

Stylus Output

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

Stylus Output

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

Stylus Code

Stylus Output