Skip to content
PostHTML plugin to add pseudo selector class names to elements, like :first-child/:last-child.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
test
.eslintignore
.eslintrc
.gitignore
.npmignore
.publishrc
.travis.yml
LICENSE
README.md
index.js
package-lock.json
package.json
posthtml-pseudo-0.6.8.tgz
superawesome.svg

README.md

posthtml-pseudo

Build Coverage Greenkeeper badge super awesome

A PostHTML plugin to add pseudo classes to elements within <body>, eg :first-child/:last-child.

Before:

<html>
    <body>
        <div>one</div>
        <div>two</div>
        <div>three</div>
    </body>
</html>

After:

<html>
    <body>
        <div class=":first-child">one</div>
        <div>two</div>
        <div class=":last-child">three</div>
    </body>
</html>

👉 Check out postcss-pseudo-classes for the other side of the equation.

📝 Note on supported classes: Pseudo classes dependent on input values (:valid, :invalid, ...), browser history (:visted, :link, ...), interaction (:hover, :focus:), parameters (:nth-child(), :lang(), ...), page url (:target) or require JS (:indeterminate), have been excluded. See support list.

Options

Options config has two properties — include and exclude — to define which psuedo class names to add, and which tags to add them to. Both include.classNames and exclude.classNames can be:

  • a string of a class name group
  • a string of a class name (/^:\S+/, from those in the all group)
  • an array of class name groups and/or class names

Example Options Config

This config adds all supported pseudo class names to all appropriate elements using their default class names.

let config = {
    include : {
        classNames : "all" // all group
    }
};

Here's something more complex, adding only two class names but only to elements that aren't div, table or form.

let config = {
    include : {
        classNames : [ ":first-child", ":last-child" ]
    },
    exclude : {
        tags : [
            "div", "table", "form"
        ]
    }
};

And here's an unrealistic and irresponsible config showing more options.

let config = {
    include : {
        classNames : [
            "all", // include the "all" group using default class names
            { ":first-child" : "fc" }, // custom class name; below using function
            { "form" : (className) => className.replace(":", "") }
        ],
        tags : [
            "div",
            "p",
            "span"
        ]
    },
    exclude : {
        classNames : [
            "onlyChild",
            ":root",
            ":read-only"
        ],
        tags : [
            "div"
        ]
    }
}

Class Name Groups

{
    all : [
        ":default",
        ":disabled",
        ":empty",
        ":enabled",
        ":first-child"
        ":first-of-type",
        ":last-child",
        ":last-of-type",
        ":only-of-type",
        ":only-child",
        ":optional",
        ":read-only",
        ":read-write",
        ":required",
        ":root"
    ],
    firstLast : [
        ":first-child",
        ":first-child-of-type",
        ":last-child",
        ":last-child-of-type"
    ],
    firstLastOnly : [
        ":first-child",
        ":last-child"
    ],
    form : [
        ":default",
        ":disabled",
        ":enabled",
        ":optional",
        ":required",
        ":read-only",
        ":read-write"
    ],
    onlyChild : [
        ":only-child",
        ":only-child-of-type"
    ],
    readWrite : [
        ":read-only",
        ":read-write"
    ]
}

Pseudo Class Names

List of supported and unsupported pseudo class names. Checkboxes track implementation status.

  • :active
  • :any
  • :checked
  • :default
  • :dir() *
  • :disabled
  • :empty
  • :enabled
  • :first
  • :first-child
  • :first-of-type
  • :fullscreen
  • :focus
  • :hover
  • :indeterminate
  • :in-range
  • :invalid
  • :lang() *
  • :last-child
  • :last-of-type
  • :left
  • :link
  • :not() *
  • :nth-child() *
  • :nth-last-child() *
  • :nth-last-of-type() *
  • :nth-of-type() *
  • :only-child
  • :only-of-type
  • :optional
  • :out-of-range
  • :read-only
  • :read-write
  • :required
  • :right
  • :root
  • :scope
  • :target
  • :valid
  • :visited

* Hope to add these, but require some thinking due to input parameters.

You can’t perform that action at this time.