+ is for the next sibling. Is there an equivalent for the previous sibling?

47 upvote
  flag
I suppose css does not provide backward navigation – Tarun

12 Answers 11

up vote 606 down vote accepted

No, there is no "previous sibling" selector.

On a related note, ~ is for general successor sibling (meaning the element comes after this one, but not necessarily immediately after) and is a CSS3 selector. + is for next sibling and is CSS2.1.

See Adjacent sibling combinator from Selectors Level 3 and 5.7 Adjacent sibling selectors from Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification.

9 upvote
  flag
From the CSS3 standard: The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence precedes (not necessarily immediately) the element represented by the second one. – Lie Ryan
20 upvote
  flag
@Lie Ryan: Yeah, but the point cletus is making in his answer is that you don't select the preceding element. – BoltClock
27 upvote
  flag
Here's an example I made to see what this can, and can't, do. jsfiddle.net/NuuHy/1 – Abacus
5 upvote
  flag
The jquery function useful for this is prev(). For example $("#the_element").prev().css("background-color", "red") – Satbir Kira
3 upvote
  flag
This comment: //allinonescript.com/questions/1817792/… says that the specification allows previous sibling selection with previous:has(+ next). So there seems to be a working solution. – Edward
upvote
  flag
Whoops, the :has selector is currently, at time of writing, a W3 draft and not in the specification. For details see my comment //allinonescript.com/questions/1817792/…. – Edward
upvote
  flag
Want to downvote this answer because its not possible ... nevertheless correct answer so +1 :P – Johannes Grandy

I had the same question, but then I had a "duh" moment. Instead of writing

x ~ y

write

y ~ x

Obviously this matches "x" instead of "y", but it answers the "is there a match?" question, and simple DOM traversal may get you to the right element more efficiently than looping in javascript.

I realize that the original question was a CSS question so this answer is probably completely irrelevant, but other Javascript users may stumble on the question via search like I did.

4 upvote
  flag
+1 for beautiful simplicity :) – okeen
13 upvote
  flag
I believe that works when y can be found easily. Problem is if y can only be found relative to x, and in reversing it, you can't find y because you have to find x first. This is of course in reference to the question of y being preceding sibling rather than next, but may also apply for y being a following sibling. – David
17 upvote
  flag
You're being kind of harsh, Harsh. (sorry, couldn't resist.) The point is that sometimes you just need to know "does y exist?". Other times you can use ":before" to put something between the two elements. Finally, if you do have to drop into jQuery, using find("y ~ x").prev() is easier than many alternatives. – Bryan Larsen
127 upvote
  flag
The idea of a previous sibling selector is that it will select the previous element. Unfortunately, reversing it, as described here, doesn't provide this functionality. – Zenexer
1 upvote
  flag
@BryanLarsen Applying logic without testing properly. That's not expected even though your answer seems smart enough. – Rajesh Paul
14 upvote
  flag
Thanks @Zenexer for the clarification that this answer doesn't provide an actual solution to the original question, I was starting to feel myself stupid thinking about how y ~ x could solve my problem – Jaime Hablutzel
upvote
  flag
I don't see how this works, it's this the same y > x? – Mindthetic
1 upvote
  flag
You're right, @sevenupcan, it doesn't work. The point of this answer is to get people to ask themselves if they really need x ~ y, can they make y ~ x work for them? Some people can, some people can't. It often times it makes sense to re-examine your question while looking for an answer. – Bryan Larsen
upvote
  flag
but I cannot using this when I am using the same tags but it is only possible when I have to use id , class or different tags – Muhammad
3 upvote
  flag
I understand the idea behind this answer, however the reasoning given in the answer doesn't quite make sense. The selector y ~ x doesn't answer the "is there a match?" question, because the two selectors given here mean completely different things. There is no way y ~ x could ever produce a match given the subtree <root><x/><y/></root> for example. If the question is "does y exist?" then the selector is simply y. If the question is "does y exist given a sibling x in any arbitrary position?" then you'd need both selectors. (Though maybe I'm just nitpicking at this point...) – BoltClock

Selectors level 4 introduces ! which (if I'm interpreting the draft correctly) will allow you to select the desired subject of the selector (in this case previous) with:

!previous + next {}

… but at the time of writing, it is some distance beyond the bleeding edge for browser support.

upvote
  flag
The real question is: why css's DOM traversal abilities so much worse, then Javascript's? Makes us, sitebuilders really sad... – Lajos Meszaros
131 upvote
  flag
The real answer is: css selectors are designed to be easy (fast) to implement for the browser. The document can be traversed once, matching elements as you go, with no need to ever go backward to adjust a match. – chowey
10 upvote
  flag
Continuing from what @chowey has stated, if implementing ! proves detrimental to stylesheet performance, then chances are it won't be usable in CSS. See Fast vs Complete Selector Profiles in the latest revision of the spec. – BoltClock
34 upvote
  flag
Please note, this has since been removed from the draft. The current revision (18 December 2014) does not have the ! selector. – Mike
42 upvote
  flag
@Mike: It has been replaced with the :has() pseudo-class, making the equivalent selector previous:has(+ next), with the same performance caveat however. – BoltClock
1 upvote
  flag
A bit of research about the :has selector "BoltClock" referenced gave more information. w3.org/TR/#tr_CSS - W3 Standards and drafts led me to the currently latest (at time of writing) working draft w3.org/TR/selectors4 gave the link to drafts.csswg.org/selectors-4 which has the section drafts.csswg.org/selectors-4/#has-pseudo. This shows that the :has selector is a W3 working draft and will hopefully join the specification soon. – Edward
1 upvote
  flag
This answer was always mostly theoretic, talking about a mostly uninplemented draft standard, but now it's also out of date. -1 – Stijn de Witt
7 upvote
  flag
"Bleeding edge for browser support" might be an overstatement. As of writing this, not even the latest version of Chrome can use the :has() pseudo-class. – Reed Martin
upvote
  flag
The :has() selector will be specifically not usable in stylesheets, i.e. you will be able to use it in Javascript – James Tudsbury
3 upvote
  flag
@chowey - your computer can handle insane video games with countless math calculations at high FPS, but a browser barely handles styling previous elements in CSS. how ironic. – vsync
upvote
  flag
@ReedMartin — That's why I said some distance beyond the bleeding edge – Quentin

Depending on your exact objective, there is a way to achieve the usefulness of a parent selector without using one (even if one were to exist)...

Say we have:

<div>
  <ul>
    <li><a>Pants</a></li>
    <li><a>Socks</a></li>
    <ul>
      <li><a>White socks</a></li>
      <li><a>Blue socks</a></li>
    </ul>
  </ul>
</div>

What can we do to make the Socks block (including sock colours) stand out visually using spacing?

What would be nice but doesn't exist:

ul li ul:parent {
  margin-top: 15px;
  margin-bottom: 15px;
}

What does exist:

li > a {
  margin-top: 15px;
  display: block;
}
li > a:only-child {
  margin-top: 0px;
}

This sets all anchor links to have 15px margin on the top and resets it back to 0 for those with no UL elements (or other tags) inside LIs.

There is no "previous" sibling selector unfortunately, but you can possibly still get the same effect by using positioning (e.g. float right). It depends on what you are trying to do.

In my case, I wanted a primarily CSS 5-star rating system. I would need to color (or swap the icon of) the previous stars. By floating each element right, I am essentially getting the same effect (the html for the stars thus must be written 'backwards').

I'm using FontAwesome in this example and swapping between the unicodes of fa-star-o and fa-star http://fortawesome.github.io/Font-Awesome/

CSS:

.fa {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* set all stars to 'empty star' */
.stars-container {
    display: inline-block;      
}   

/* set all stars to 'empty star' */
.stars-container .star {
    float: right;
    display: inline-block;
    padding: 2px;
    color: orange;
    cursor: pointer;

}

.stars-container .star:before {
    content: "\f006"; /* fontAwesome empty star code */
}

/* set hovered star to 'filled star' */
.star:hover:before{
    content: "\f005"; /* fontAwesome filled star code */
}

/* set all stars after hovered to'filled star' 
** it will appear that it selects all after due to positioning */
.star:hover ~ .star:before {
    content: "\f005"; /* fontAwesome filled star code */
}

HTML: (40)

JSFiddle: http://jsfiddle.net/andrewleyva/88j0105g/

1 upvote
  flag
float right and + or ~ selectors strikes me as the cleanest work around. – Wylliam Judd

If you know the exact position an :nth-child()-based exclusion of all following siblings would work.

ul li:not(:nth-child(n+3))

Which would select all lis before the 3rd (e.g. 1st and 2nd). But, in my opinion this looks ugly and has a very tight usecase.

You also could select the nth-child right-to-left:

ul li:nth-child(-n+2)

Which does the same.

There is no official way to do that at the moment but you can use a little trick to achieve this ! Remember that it is experimental and it has some limitation ... (check this link if you worries about navigator compatibility )

What you can do is use a CSS3 selector : the pseudo classe called nth-child()

Source code

<div id="list">
    <span>1</span>  <!-- this will be selected -->
    <p>2</p>        <!-- this will be selected -->
    <p>3</p>        <!-- this will be selected -->
    <div>4</div>    <!-- this will be selected -->
    <div>5</div>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
</div>

#list > * {
    display: inline-block;
    padding: 20px 28px;
    margin-right: 5px;
    border: 1px solid #bbb;
    background: #ddd;
    color: #444;
    margin: 0.4em 0;
}

#list :nth-child(-n+4) {
    color: #600b90;
    border: 1px dashed red;
    background: orange;
}

Working exemple

http://jsfiddle.net/aLhv9r1w/316/

Limitations

  • You can't select previous elements based on the classes of the next elements
  • This is the same for pseudo classes
upvote
  flag
Why do they have to be the same node? Why not just use :nth-child(-n+4)? – Ian
1 upvote
  flag
@Ian because the :nth-child(-n+4) is a pseudo class that needs to be apply to a selector in order to work properly. If you are not convince, try to experiment it using a fork of my fiddle and you'll see that it doesn't wok – 0x1gene
1 upvote
  flag
Actually, you can go node-type independent using the * selector, but it's obnoxiously bad practice. – Josh Burgess
1 upvote
  flag
This is the answer that worked for me, not sure why it's not voted higher or accepted. – Jake Cattrall
1 upvote
  flag
Actually, it does work for different nodes: jsfiddle.net/aLhv9r1w/316. Please update your answer :) – Jamie Barker
upvote
  flag
thanks @JamieBarker, I've updated it accordingly :) – 0x1gene

I found a way to style all previous siblings (opposite of ~) that may work depending on what you need.

Let's say you have a list of links and when hovering on one, all the previous ones should turn red. You can do it like this:

/* default link color is blue */
.parent a {
  color: blue;
}

/* prev siblings should be red */
.parent:hover a {
  color: red;
}
.parent a:hover,
.parent a:hover ~ a {
  color: blue;
}
<div class="parent">
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
</div>

7 upvote
  flag
You can add an explanation of how it works. (it seems that you apply an style to all the items and to the following items but it can de described explicitly) – A.L
1 upvote
  flag
Awesome solution. No need to reorder the elements in markup nor in render (via float:right). It did require a white-space collapse between units/words and padding instead of margins, but it works perfectly otherwise! – Steven Vachon
6 upvote
  flag
Here's a fiddle for what I'd mentioned above: jsfiddle.net/y9zeLr1n – Steven Vachon
6 upvote
  flag
yea, but a single previous is needed most of the time NOT ALL the previous ones! – azerafati
12 upvote
  flag
The links all turn red if I hover over the space between them, for me. – Lynn
3 upvote
  flag
@Lynn the answer only includes the code to make the previous links red on hover. Additional styles depend on your use case. For a star rating component (which I guess is a common case), you would need to get rid of that space and also make red the hovered link. – mantish
upvote
  flag
As demonstrated here: codepen.io/xram/pen/EbgGl?editors=1100 It totally works! Thanks! – rafibomb

Two tricks. Basically inverting the HTML order of your desired elements in HTML and using
~ Next siblings operator:

float-right + inverse the order of HTML elements

div{ /* Do with the parent whatever you know just to make the
  inner float-right elements appear where desired */
  display:inline-block;
}
span{
  float:right;  /* float-right the elements! */
}
span:hover ~ span{ /* On hover target it's "previous";) elements */
  background:red;
} 
<div>
  <!-- Reverse the order of inner elements -->
  <span>5</span>
  <span>4</span>
  <span>3</span>
  <span>2</span>
  <span>1</span>
</div>


Parent with direction: rtl; + inverse the order of inner elements

.inverse{
  direction: rtl;
  display: inline-block; /* inline-block to keep parent at the left of window */
}
span:hover ~ span{ /* On hover target it's "previous";) elements */
  background:gold;
}
Hover one span and see the previous elements being targeted!<br>

<div class="inverse">
  <!-- Reverse the order of inner elements -->
  <span>5</span>
  <span>4</span>
  <span>3</span>
  <span>2</span>
  <span>1</span>
</div>

Is there a “previous sibling” CSS selector?

This question is somewhat of an oxymoron.

Cascading Style Sheets. A cascade is like a waterfall: there's no backward motion. So, naturally, there is no previous sibling selector in CSS.

However...

With flexbox, a previous sibling selector can be simulated.

In particular, the flex order property can move elements around the screen.

Here's an example:

You want element A to turn red when element B is hovered.

<ul>
    <li>A</li>
    <li>B</li>
</ul>

STEPS

  1. Make the ul a flex container.

    ul { display: flex; }
    

  1. Reverse the order of siblings in the mark-up.

    <ul>
       <li>B</li>
       <li>A</li>
    </ul>
    

  1. Use a sibling selector to target Element A (~ or + will do) .

    li:hover + li { background-color: red; }
    

  1. Use the flex order property to restore the order of siblings on the visual display.

    li:last-child { order: -1; }
    

...and voilà! A previous sibling selector is born (or at least simulated).

Here's the full code:

ul {
    display: flex;
}

li:hover + li {
    background-color: red;
}

li:last-child {
    order: -1;
}

/* non-essential decorative styles */
li {
    height: 200px;
    width: 200px;
    background-color: aqua;
    margin: 5px;
    list-style-type: none;
    cursor: pointer;
}
<ul>
    <li>B</li>
    <li>A</li>
</ul>

From the spec:

5.4. Display Order: the order property

Flex items are, by default, displayed and laid out in the same order as they appear in the source document. The order property can be used to change this ordering.

The order property controls the order in which children of a flex container appear within the flex container, by assigning them to ordinal groups. It takes a single <integer> value, which specifies which ordinal group the flex item belongs to.

The initial order value for all flex items is 0.


Examples of "previous sibling selectors" created with the flex order property

.container { display: flex; }

.box5 { order: 1; }    
.box5:hover + .box4 { background-color: orangered; font-size: 1.5em; }

.box6 { order: -4; }
.box7 { order: -3; }
.box8 { order: -2; }
.box9 { order: -1; }
.box9:hover ~ :not(.box12):nth-child(-1n+5) { background-color: orangered;
                                              font-size: 1.5em; }
.box12 { order: 2; }
.box12:hover ~ :nth-last-child(-1n+2) { background-color: orangered;
                                        font-size: 1.5em; }
.box21 { order: 1; }
.box21:hover ~ .box { background-color: orangered; font-size: 1.5em; }

/* non-essential decorative styles */
.container {
    padding: 5px;
    background-color: #888;
}
.box {
    height: 50px;
    width: 75px;
    margin: 5px;
    background-color: lightgreen;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
}
<p>
Using the flex <code>order</code> property to construct a previous sibling selector
</p>

<div class="container">
    <div class="box box1"><span>1</span></div>
    <div class="box box2"><span>2</span></div>
    <div class="box box3"><span>3</span></div>
    <div class="box box5"><span>HOVER ME</span></div>
    <div class="box box4"><span>4</span></div>
</div>

<br>

<div class="container">
    <div class="box box9"><span>HOVER ME</span></div>
    <div class="box box12"><span>HOVER ME</span></div>
    <div class="box box6"><span>6</span></div>
    <div class="box box7"><span>7</span></div>
    <div class="box box8"><span>8</span></div>
    <div class="box box10"><span>10</span></div>
    <div class="box box11"><span>11</span></div>
</div>

<br>

<div class="container">
    <div class="box box21"><span>HOVER ME</span></div>
    <div class="box box13"><span>13</span></div>
    <div class="box box14"><span>14</span></div>
    <div class="box box15"><span>15</span></div>
    <div class="box box16"><span>16</span></div>
    <div class="box box17"><span>17</span></div>
    <div class="box box18"><span>18</span></div>
    <div class="box box19"><span>19</span></div>
    <div class="box box20"><span>20</span></div>
</div>

jsFiddle

Browser support: Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.


A Side Note – Two Outdated Beliefs about CSS

Flexbox is shattering long-held beliefs about CSS.

One such belief is that a previous sibling selector is not possible in CSS.

To say this belief is widespread would be an understatement. Here's a sampling of related questions on Stack Overflow alone:

As described above, this belief is not entirely true. A previous sibling selector can be simulated in CSS using the flex order property.

The z-index Myth

Another long-standing belief has been that z-index works only on positioned elements.

In fact, the most current version of the spec – the W3C Editor's Draft – still asserts this to be true:

9.9.1 Specifying the stack level: the z-index property

z-index

  • Value: auto | | inherit
  • Initial: auto
  • Applies to: positioned elements
  • Inherited: no
  • Percentages: N/A
  • Media: visual
  • Computed value: as specified

(emphasis added)

In reality, however, this information is obsolete and inaccurate.

Elements that are flex items or grid items can create stacking contexts even when position is static.

4.3. Flex Item Z-Ordering

Flex items paint exactly the same as inline blocks, except that order-modified document order is used in place of raw document order, and z-index values other than auto create a stacking context even if position is static.

5.4. Z-axis Ordering: the z-index property

The painting order of grid items is exactly the same as inline blocks, except that order-modified document order is used in place of raw document order, and z-index values other than auto create a stacking context even if position is static.

Here's a demonstration of z-index working on non-positioned flex items: https://jsfiddle.net/m0wddwxs/

2 upvote
  flag
The order property is not a solution since it is solely intended to change visual order, so it does not restore the original semantical order that you are forced to change in HTML for this workaround to work. – Marat Tanalin
1 upvote
  flag
@Marat Tanalin: For 90% of use cases, assuming browser support isn't an issue, this will work just fine. The remaining 10% of use cases are either 1) cases where changing the visual order isn't a solution, or 2) cases that don't involve CSS at all. Thankfully, for #2, selectors-4 provides :has(), and it's simply up to the developers of selector libraries to implement it. – BoltClock
upvote
  flag
Actually, you know what, I made those stats up. It's probably more like 50-50, or 10-90, or something. The point is that, as now stated, this is just one solution that works for some people. But saying that "contrary to popular belief, there is in fact a previous sibling selector" is misleading at best, because it involves a layout technique, not a selector technique, which falls flat in use cases that don't involve CSS layout. This is why I've lately been much more picky about distinguishing between "pure CSS" and "pure CSS selectors". – BoltClock
3 upvote
  flag
Keep in mind that the CSS2.2 ED you're citing is, in essence, still CSS2. And flexbox and grid layout don't exist in CSS2, so as far as CSS2 is concerned, that information certainly holds true. At the very least, the text could be updated to mention that z-index may apply to other types of elements in future levels of CSS, the same way that it says other properties may establish a stacking context, such as opacity. – BoltClock
upvote
  flag
@BoltClock My comment has nothing to do with browser support. The technique breaks semantics in favor of presentation. I believe a plain regular class added to previous-sibling element on server side is much more reasonable. – Marat Tanalin
upvote
  flag
@BoltClock, I appreciate your feedback. I see this entire thing from a practical perspective. And I wrote the answer for practical purposes. For developers who wish to target previous siblings on visual media, this technique may be useful. From the perspective of site users, previous siblings are being selected. So, for practical purposes, this can be deemed a previous sibling selector. – Michael_B
upvote
  flag
From a technical perspective, I would agree this is not a PSS. But I generally try to provide answers that help solve real-world problems. I think this answer does that, using valid code and pure CSS. – Michael_B
2 upvote
  flag
In case anyone is having trouble understanding when z-index will work, even when "omg, there's no position specified!", the specification mentions the concept of stacking context, which is explained nicely by this article on MDN – Rogier Spieker
upvote
  flag
@RogierSpieker, thanks for posting that MDN article. I read it a while back and it's very helpful. I also wrote this, which also tries to explain stacking contexts: //allinonescript.com/a/32515284/3597276 – Michael_B
3 upvote
  flag
@Michael_B you're welcome! I've dealt with a lot of front-enders unaware of this. One other thing I'd like to mention, the faux previous sibling selector also works nicely with float: right (or any other means to reverse the ordering, of which flex/order has little (least?) side effects). Whipped up two fiddles: demonstrating the float: right approach, and demonstrating direction: rtl – Rogier Spieker
upvote
  flag
@RogierSpieker, agreed. float:right is another method. I didn't mention it in my answer since it was already covered by at least two other answers to this question. – Michael_B
upvote
  flag
order is such a cheat answer to this question, and doesn't work in my case... – Ozan Kurt
upvote
  flag
@OzanKurt, a previous sibling selector is not possible in CSS. Therefore, all workarounds provided in these answers are obviously hacks or "cheats". Not sure what you were expecting. – Michael_B

Another flexbox solution

You can use inverse the order of elements in HTML. Then besides using order as in Michael_B's answer you can use flex-direction: row-reverse; or flex-direction: column-reverse; depending on your layout.

Working sample:

.flex {
  display: flex;
  flex-direction: row-reverse;
   /* Align content at the "reversed" end i.e. beginning */
  justify-content: flex-end;
}

/* On hover target its "previous" elements */
.flex-item:hover ~ .flex-item {
  background-color: lime;
}

/* styles just for demo */
.flex-item {
  background-color: orange;
  color: white;
  padding: 20px;
  font-size: 3rem;
  border-radius: 50%;
}
<div class="flex">
  <div class="flex-item">5</div>
  <div class="flex-item">4</div>
  <div class="flex-item">3</div>
  <div class="flex-item">2</div>
  <div class="flex-item">1</div>
</div>

+ is for the next sibling. Is there an equivalent for the previous sibling?

You can use the two axe selectors: ! and ?

There are 2 subsequent sibling selectors in conventional CSS:

  • + is the immediate subsequent sibling selector
  • ~ is the any subsequent sibling selector

In conventional CSS, there is no previous sibling selector.

However, in the axe CSS post-processor library, there are 2 previous sibling selectors:

  • ? is the immediate previous sibling selector (opposite of +)
  • ! is the any previous sibling selector (opposite of ~)

Working Example:

In the example below:

  • .any-subsequent:hover ~ div selects any subsequent div
  • .immediate-subsequent:hover + div selects the immediate subsequent div
  • .any-previous:hover ! div selects any previous div
  • .immediate-previous:hover ? div selects the immediate previous div

div {
display: inline-block;
width: 60px;
height: 100px;
color: rgb(255, 255, 255);
background-color: rgb(255, 0, 0);
text-align: center;
vertical-align: top;
cursor: pointer;
opacity: 0;
transition: opacity 0.6s ease-out;
}

code {
display: block;
margin: 4px;
font-size: 24px;
line-height: 24px;
background-color: rgba(0, 0, 0, 0.5);
}

div:nth-of-type(-n+4){
background-color: rgb(0, 0, 255);
}

div:nth-of-type(n+3):nth-of-type(-n+6){
opacity: 1;
}

.any-subsequent:hover ~ div,
.immediate-subsequent:hover + div,
.any-previous:hover ! div,
.immediate-previous:hover ? div {
opacity: 1;
}
<h2>Hover over any of the blocks below</h2>

<div></div>
<div></div>

<div class="immediate-previous">Hover for <code>?</code> selector</div>
<div class="any-previous">Hover for <code>!</code> selector</div>
<div class="any-subsequent">Hover for <code>~</code> selector</div>
<div class="immediate-subsequent">Hover for <code>+</code> selector</div>

<div></div>
<div></div>

<script src="https://rouninmedia.github.io/axe/axe.js"></script>

upvote
  flag
This give me a syntax error when I try to implement it on sass inside a rails project. – alex
2 upvote
  flag
axe is a CSS post-processor. It does not use the same syntax as CSS pre-processors such as Sass, Less or Stylus. – Rounin

Not the answer you're looking for? Browse other questions tagged or ask your own question.