Skip to content
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.

postcss-inrule NPM Version Build Status

The one rule to nest them all!

Just like a nested media query, inRule describes its parent element. Configurable special characters are used to easily modify all possible relationships inside its parent tree and produce new selectors.

Also available for SASS 3.4+.


npm install postcss-inrule

Needs to be used before style unwrappers like postcss-nested.


Appending to one of current element parents is done with the < special character. Each additional use of this character targets a higher parent (works the same for all features).

.my-app {
  display: block;

  .widget {
    border-radius: 5px;

    @in <.expanded {
      color: red; // .my-app.expanded .widget { };

    @in <.mobile, <.tablet {
      width: 50vw; // .widget, .my-app.tablet .widget { };

    @media (max-width: 768px) {
      float: left;


Inserting a new selector at a certain position above the current element is done with the ^ special character.

table {
  table-layout: fixed;

  thead {
    font-weight: normal;

  tr {
    height: 30px;

    @in ^thead {
      height: 50px; // table thead tr { };


Replacing a certain selector is done using the @ character. Multiselectors that become duplicit due to the replacement are removed from the rendered selector.

ul, ol {
  list-style: none;

  li {
    display: inline-block;

    a {
      text-decoration: underline;

      @in @.modifier {
        color: orange; // ul .modifier a, ol .modifier a { };

      @in @@.links @span {
        background: pink; // .links span a { };


Special character tags are configurable by passing new options to the plugin.

{ tagAppend: '<', tagInsert: '\\^', tagReplace: '@' }

You can’t perform that action at this time.