posthtml-pseudo

Adds pseudo class names to elements.

Usage no npm install needed!

<script type="module">
  import posthtmlPseudo from 'https://cdn.skypack.dev/posthtml-pseudo';
</script>

README

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>

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

:pencil: 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
            { "form" : (className) => className.replace(":", "") } // remove ":" from default classname
        ],
        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.