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 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
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"
]
}
}{
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"
]
}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.