Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

New module: CSS pseudo-elements #28153

Merged
merged 17 commits into from
Jul 26, 2023
Merged

New module: CSS pseudo-elements #28153

Changes from 5 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
ab7f3ba
New module: CSS pseudo-elements
estelle Jul 20, 2023
efc553e
work in jury duty
estelle Jul 21, 2023
85c27f1
Complete: pseudo module
estelle Jul 24, 2023
d1a251b
slotted is functional
estelle Jul 25, 2023
bdabdf5
redundant link
estelle Jul 25, 2023
3fea9a3
added correct link
estelle Jul 25, 2023
0a785fd
Apply suggestions from code review
estelle Jul 25, 2023
ba29a0f
changed file name
estelle Jul 25, 2023
bbf86f9
File renamed
estelle Jul 25, 2023
030fe75
link case
estelle Jul 25, 2023
e59015a
remove mudule from title
estelle Jul 25, 2023
864db35
intro paragraphs
estelle Jul 26, 2023
cc8d1bf
Merge branch 'main' into pseudo
estelle Jul 26, 2023
a6d0473
Merge branch 'main' into pseudo
estelle Jul 26, 2023
09b09e5
Update files/en-us/web/css/css_pseudo-elements/index.md
estelle Jul 26, 2023
8dda75b
tweaks
estelle Jul 26, 2023
0e61650
space
estelle Jul 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
106 changes: 106 additions & 0 deletions files/en-us/web/css/css_pseudo/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
---
title: CSS pseudo-element module
slug: Web/CSS/CSS_pseudo
dipikabh marked this conversation as resolved.
Show resolved Hide resolved
page-type: css-module
spec-urls: https://drafts.csswg.org/css-pseudo/
---

{{CSSRef}}

The **CSS pseudo-element** module defines the patterns representing entities not included in HTML.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added the phrase from the https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements page so that the description on the two pages about pseudo-elements is not vastly different.

Suggested change
The **CSS pseudo-element** module defines the patterns representing entities not included in HTML.
The **CSS pseudo-elements** module provides keywords you can add to selectors to style a specific part of the selected element(s). The patterns defined in this module represent entities not included in HTML.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I need to update the pseudo page.

Copy link
Member Author

@estelle estelle Jul 26, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I rewrote the intro on this page. will update https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements in a different PR


## Reference

### Selectors

- {{CSSXref("::after")}}
- {{CSSXref("::before")}}
- {{CSSXref("::file-selector-button")}}
- {{CSSXref("::first-letter")}}
- {{CSSXref("::first-line")}}
- {{CSSXref("::grammar-error")}}
- {{CSSXref("::marker")}}
- {{CSSXref("::placeholder")}}
- {{CSSXref("::selection")}}
- {{CSSXref("::spelling-error")}}
- {{CSSXref("::target-text")}}

### Interfaces

- {{DOMxRef("CSSPseudoElement")}} interface
- {{DOMxRef("CSSPseudoElement.element")}} property
- {{DOMxRef("CSSPseudoElement.type")}} property

### Definitions

- {{Glossary("Pseudo-element")}}
estelle marked this conversation as resolved.
Show resolved Hide resolved

## Guides

- [CSS pseudo-elements](/en-US/docs/Web/CSS/Pseudo-elements)

- : Alphabetical list of pseudo-elements defined by all the CSS specifications and WebVTT

- [Building block: pseudo-classes and pseudo-elements](/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)

- : Part of CSS building blocks section on selectors, defines what a pseudo-element is, how it can be combined with pseudo-classes and gnerating content with `::before` and `::after`.

- [How to: Create fancy boxes](/en-US/docs/Learn/CSS/Howto/Create_fancy_boxes#pseudo-elements)

- : Example of styling generated content on `::before` and `::after` pseudo-elements for visual effects.
estelle marked this conversation as resolved.
Show resolved Hide resolved

## Related concepts

- {{cssxref("::backdrop")}}

- WebVTT: The Web Video Text Tracks Format

- {{cssxref("::cue")}}
- {{cssxref("::cue", "::cue( selector )")}}
- {{cssxref("::cue-region")}}
estelle marked this conversation as resolved.
Show resolved Hide resolved

- CSS scoping module

- {{CSSXref(":host")}}
- {{CSSXref(":host_function", ":host()")}}
- {{CSSXref(":host-context", ":host-context()")}}
- {{CSSXref("::slotted", "::slotted()")}}

- CSS shadow parts module
estelle marked this conversation as resolved.
Show resolved Hide resolved

- {{CSSXref("::part")}}

- [CSS selectors](/en-US/docs/Web/CSS/CSS_selectors)

- [Attribute selector](/en-US/docs/Web/CSS/Attribute_selectors)
- [Combinators](/en-US/docs/Web/CSS/CSS_Selectors/selectors_and_combinators#combinators)
- [Class selector](/en-US/docs/Web/CSS/Class_selectors)
- [ID selector](/en-US/docs/Web/CSS/ID_selectors)
- [Type selector](/en-US/docs/Web/CSS/Type_selectors)
- [Pseudo-classes](/en-US/docs/Web/CSS/Pseudo-classes)
- [Universal selector](/en-US/docs/Web/CSS/Universal_selectors)
estelle marked this conversation as resolved.
Show resolved Hide resolved

- [`placeholder`](/en-US/docs/Web/HTML/Element/input#placeholder) attribute
estelle marked this conversation as resolved.
Show resolved Hide resolved
- [`:placeholder-shown`](/en-US/docs/Web/CSS/:placeholder-shown) selector

- [CSS generated content](/en-US/docs/Web/CSS/CSS_generated_content)

- CSS {{cssxref("content")}} property
- CSS {{cssxref("quotes")}} property
estelle marked this conversation as resolved.
Show resolved Hide resolved

- [Text fragments](/en-US/docs/Web/Text_fragments)

- {{DOMXref("AnimationEvent.pseudoElement")}} property
- {{DOMXref("KeyframeEffect.pseudoElement")}} property
- {{DOMXref("TransitionEvent.pseudoElement")}} property

## Specifications

{{Specifications}}

## See also

- [CSS Specificity](/en-US/docs/Web/CSS/Specificity)
estelle marked this conversation as resolved.
Show resolved Hide resolved
- [CSS shadow-parts](/en-US/docs/Web/CSS/CSS_shadow_parts) module
estelle marked this conversation as resolved.
Show resolved Hide resolved
- [CSS generated content](/en-US/docs/Web/CSS/CSS_generated_content) module
- [CSS position](css-position) module
estelle marked this conversation as resolved.
Show resolved Hide resolved