This PostHTML plugin adds class names to elements within <body> for pseudo classes, eg :first-child/:last-child.
Before:
<html>
<body>
<div>one</div>
<div>two</div>
<div>three</div>
</body>
</html>After:
<html>
<body class=":first-child :last-child">
<div class=":first-child">one</div>
<div>two</div>
<div class=":last-child">three</div>
</body>
</html>Pseudo classes dependent on input values (:valid, :invalid, ...), browser history (:visted, :link, ...), interaction (:hover, :focus:), or parameters (:nth-child(), :lang(), ...) have been excluded.
Options config has two properties — include and exclude — to define which psuedo class names to add. Both include and exclude 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
var config = {
include : "all", // default is [ "all" ]
exclude : [ // default is []
"onlyChild",
":root",
":read-only"
]
}{
all : [
":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"
],
firstLastNoType : [
":first-child",
":last-child"
],
input : [
":disabled",
":enabled",
":optional",
":required"
],
onlyChild : [
":only-child",
":only-child-of-type"
],
readWrite : [
":read-only",
":read-write"
]
}Those struck out are not to be implemented. Checkboxes track implementation status.
:active:checked-
:disabled -
:empty -
:enabled -
:first-child -
:first-of-type :focus:hover:in-range:invalid:lang()-
:last-child -
:last-of-type :link:not():nth-child():nth-last-child():nth-last-of-type():nth-of-type()-
:only-of-type -
:only-child -
:optional :out-of-range-
:read-only -
:read-write -
:required -
:root :target:valid:visited
* Hope to add these, but require some thinking due to input parameters.