posthtml-pseudo
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>: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 theallgroup) - 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- [X]
:default -
:dir() - [X]
:disabled - [X]
:empty - [X]
:enabled - [X]
:first - [X]
:first-child - [X]
:first-of-type :fullscreen:focus:hover:indeterminate:in-range:invalid-
:lang() - [X]
:last-child - [X]
:last-of-type :left:link-
:not() -
:nth-child() -
:nth-last-child() -
:nth-last-of-type() -
:nth-of-type() - [X]
:only-child - [X]
:only-of-type - [X]
:optional :out-of-range- [X]
:read-only - [X]
:read-write - [X]
:required :right- [X]
:root :scope:target:valid:visited
* Hope to add these, but require some thinking due to input parameters.