# postcss-pseudo-class-enter > Use the :enter pseudo-class in CSS Latest version **5.0.0** (published 2019-02-05) · CC0-1.0 license · 0 weekly downloads > **Deprecated.** This package is deprecated. ## Install ```sh npm install postcss-pseudo-class-enter pnpm add postcss-pseudo-class-enter yarn add postcss-pseudo-class-enter bun add postcss-pseudo-class-enter ``` ## Health **Score 10/100 (F)** — status: deprecated. Negative: deprecated. ## Facts | | | |---|---| | Version | 5.0.0 | | Published | 2019-02-05 | | First published | 2015-06-14 | | Weekly downloads | 0 | | License | CC0-1.0 | | TypeScript types | none | | Module format | ESM + CommonJS | | Node | >=6.0.0 | | Dependencies | 2 | | Unpacked size | 24.6 KB | | Known vulnerabilities | 0 (+6 in 2 direct dependencies) | | Install scripts | no | | GitHub stars | 28 | | Author | Jonathan Neal | | Maintainers | jonathantneal | | Keywords | postcss, css, postcss-plugin, hover, focus, pseudo, element, keyboard, mouse, mice, finger, touch, pointer, accessibility | ## Links - npm: https://www.npmjs.com/package/postcss-pseudo-class-enter - Repository: https://github.com/jonathantneal/postcss-pseudo-class-enter - Homepage: https://github.com/jonathantneal/postcss-pseudo-class-enter#readme - Issues: https://github.com/jonathantneal/postcss-pseudo-class-enter/issues - npm.io page: https://npm.io/package/postcss-pseudo-class-enter ## Dependencies (2) - [postcss](https://npm.io/package/postcss.md) ^7.0.14 - [postcss-selector-parser](https://npm.io/package/postcss-selector-parser.md) ^5.0.0 ## Alternatives - [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads - [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads - [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads - [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads - [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads ## Recent versions - 5.0.0 (latest) — 2019-02-05 - 3.0.1 — 2016-12-14 - 3.0.0 — 2016-12-06 - 2.0.1 — 2015-09-11 - 2.0.0 — 2015-09-11 - 1.0.0 — 2015-08-31 - 0.3.0 — 2015-06-16 - 0.2.1 — 2015-06-16 - 0.2.0 — 2015-06-15 - 0.1.1 — 2015-06-15 - 0.1.0 — 2015-06-14 ## README # PostCSS Enter Pseudo Class [PostCSS][PostCSS] [![NPM Version][npm-img]][npm-url] [![Build Status][cli-img]][cli-url] [![Support Chat][git-img]][git-url] [PostCSS Enter Pseudo Class] lets you use the proposed [`:enter`] pseudo-class in CSS. `:enter` simplifies selectors targeting elements that are “designated”, as in designated with a pointing device, rather than any device. ```pcss nav :enter > span { background-color: yellow; } /* becomes */ nav :hover > span, nav :focus > span { background-color: yellow; } ``` From the [proposal]: > The [`:enter`] pseudo-class applies while the user designates an element with > a keyboard, pointing device, or other form of input. It matches an element if > the element would match [`:focus`] or [`:hover`]. ## Usage Add [PostCSS Enter Pseudo Class] to your project: ```bash npm install postcss-pseudo-class-enter --save-dev ``` Use [PostCSS Enter Pseudo Class] to process your CSS: ```js const postcssPseudoClassEnter = require('postcss-pseudo-class-enter'); postcssPseudoClassEnter.process(YOUR_CSS /*, processOptions, pluginOptions */); ``` Or use it as a [PostCSS] plugin: ```js const postcss = require('postcss'); const postcssPseudoClassEnter = require('postcss-pseudo-class-enter'); postcss([ postcssPseudoClassEnter(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` [PostCSS Enter Pseudo Class] runs in all Node environments, with special instructions for: | [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) | | --- | --- | --- | --- | --- | --- | ## Options ### prefix The `prefix` option determines whether the `:enter` pseudo-class should use a prefix, and what that prefix will be. ```js postcssPseudoClassEnter({ prefix: 'x' }); // transforms :-x-enter ``` #### outline Type: `String` Default: unset The `outline` option determines whether an outline declaration will be added to rules using the `:enter` pseudo-class. If a string is passed, its value will be used for the outline declaration. ```js postcssPseudoClassEnter({ outline: true }); // adds outline: 0; ``` ```js postcssPseudoClassEnter({ outline: 'none' }); // adds outline: none; ``` ## Alternatives Below are some other methods to recreate the effects of `:enter`. #### Use :focus and :hover (supported everywhere) ```css :focus, :hover { /* ... */ } ``` #### Use :matches (supported in Firefox 4+, Chrome 12+, Opera 15+, Safari 5.1+) ```css :matches(:focus, :hover) { /* ... */ } ``` #### Use @custom-selector (supported nowhere yet) ```css @custom-selector :--enter :focus, :hover; :--enter { /* ... */ } ``` #### Use [Sass] mixins (requires preprocessing) ```scss @mixin -enter { &:focus, &:hover { @content; } } @include -enter { /* ... */ } ``` [cli-img]: https://img.shields.io/travis/jonathantneal/postcss-pseudo-class-enter.svg [cli-url]: https://travis-ci.org/jonathantneal/postcss-pseudo-class-enter [git-img]: https://img.shields.io/badge/support-chat-blue.svg [git-url]: https://gitter.im/postcss/postcss [npm-img]: https://img.shields.io/npm/v/postcss-pseudo-class-enter.svg [npm-url]: https://www.npmjs.com/package/postcss-pseudo-class-enter [`:enter`]: https://discourse.specifiction.org/t/a-common-pseudo-class-for-hover-and-focus/877 [`:focus`]: https://dev.w3.org/csswg/selectors/#focus-pseudo [`:hover`]: https://dev.w3.org/csswg/selectors/#visited-pseudo [PostCSS]: https://github.com/postcss/postcss [PostCSS Enter Pseudo Class]: https://github.com/jonathantneal/postcss-pseudo-class-enter [proposal]: https://discourse.specifiction.org/t/a-common-pseudo-class-for-hover-and-focus/877 [Sass]: https://sass-lang.com/ --- _Source: https://npm.io/package/postcss-pseudo-class-enter · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._