posthtml-pseudo
v0.6.14
Published
Adds pseudo class names to elements.
Downloads
15
Maintainers
kevinkaceReadme
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>: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 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.