Add view-transition-class property

files/en-us/web/api/view_transition_api/index.md

@@ -66,6 +66,8 @@ See [Using the View Transition API](/en-US/docs/Web/API/View_Transition_API/Usin
 
 - {{cssxref("view-transition-name")}}
   - : Provides the selected element with a separate identifying name and causes it to participate in a separate view transition from the root view transition — or no view transition if the `none` value is specified.
+- {{cssxref("view-transition-class")}}
+  - : Provides the selected elements that already have a `view-transition-name` with an additional method of styling.
 
 ### Pseudo-elements
 

files/en-us/web/api/view_transition_api/using/index.md

@@ -217,7 +217,7 @@ With this CSS applied, the generated pseudo-element tree will now look like this
 The existence of the second set of pseudo-elements allows separate view transition styling to be applied just to the `<figcaption>`. The different old and new view captures are handled separately from one another.
 
 > [!NOTE]
-> The value of `view-transition-name` can be anything you want except for `none` — the `none` value specifically means that the element will not participate in a view transition.
+> The value of `view-transition-name` is a unique {{cssxref("custom-ident")}}; it can be any identifier that wouldn't be misinterpreted as a keyword. The keyword `none` is not a valid name, as that value means the element will not participate in any view transitions. Also avoid `auto`, as it's being discussed as a way to [determine `view-transition-name` automatically](https://drafts.csswg.org/css-view-transitions-2/#auto-vt-name).
 >
 > `view-transition-name` values must also be unique. If two rendered elements have the same `view-transition-name` at the same time, {{domxref("ViewTransition.ready")}} will reject and the transition will be skipped.
 

files/en-us/web/css/_doublecolon_view-transition-group/index.md

@@ -36,19 +36,23 @@ In addition, the element's transform is animated from the "old" view state's scr
 ## Syntax
 
 ```css-nolint
-::view-transition-group(<pt-name-selector>) {
+::view-transition-group([ <pt-name-selector> <pt-class-selector>? ] | <pt-class-selector>) {
   /* ... */
 }
 ```
 
-`<pt-name-selector>` can be one of the following values:
+### Parameters
 
 - `*`
-  - : Causes the pseudo-element to match all view transition groups.
+  - : The [universal selector (`*`)](/en-US/docs/Web/CSS/Universal_selectors); selects all view transition groups on a page.
 - `root`
-  - : Causes the pseudo-element to match the default `root` view transition group created by the user agent to contain the view transition for the overall page. This group includes any element not assigned to its own specific view transition group via the {{cssxref("view-transition-name")}} property.
-- {{cssxref("custom-ident")}}
-  - : Causes the pseudo-element to match a specific view transition group created by assigning the given {{cssxref("custom-ident")}} to an element via the {{cssxref("view-transition-name")}} property.
+  - : The {{cssxref("view-transition-name")}} applied to {{cssxref(":root")}} causes the pseudo-element to match the default `root` view transition group. This is the snapshot group created by the user agent to contain the view transition for the overall page. This group includes any element not assigned to its own specific view transition snapshot group via the `view-transition-name` property.
+- `<pt-name-selector>`
+  - : The {{cssxref("custom-ident")}} set as the value of the {{cssxref("view-transition-name")}} property.
+- `<pt-class-selector>`
+  - : The {{cssxref("custom-ident")}} set as the value of the {{cssxref("view-transition-class")}} property, preceded by a period (`.`).
+
+The {{cssxref("specificity")}} of the named view transition pseudo-element is equal to the [specificity of the type selector](/en-US/docs/Web/CSS/Specificity#type_column), unless the parameter used is the universal selector is used, in which case the specificity is zero.
 
 ## Examples
 
@@ -58,6 +62,10 @@ In addition, the element's transform is animated from the "old" view state's scr
   animation-timing-function: ease;
   z-index: 1;
 }
+
+::view-transition-group(.card) {
+  animation-duration: 1s;
+}
 ```
 
 ## Specifications

files/en-us/web/css/_doublecolon_view-transition-image-pair/index.md

@@ -29,26 +29,32 @@ During a view transition, `::view-transition-image-pair` has {{cssxref("isolatio
 ## Syntax
 
 ```css-nolint
-::view-transition-image-pair(<pt-name-selector>) {
+::view-transition-image-pair([ <pt-name-selector> <pt-class-selector>? ] | <pt-class-selector>) {
   /* ... */
 }
 ```
 
-`<pt-name-selector>` can be one of the following values:
+### Parameters
 
 - `*`
-  - : Causes the pseudo-element to match all view transition groups.
+  - : The [universal selector (`*`)](/en-US/docs/Web/CSS/Universal_selectors); selects all view transition groups on a page.
 - `root`
-  - : Causes the pseudo-element to match the default `root` view transition group created by the user agent to contain the view transition for the overall page. This group includes any element not assigned to its own specific view transition group via the {{cssxref("view-transition-name")}} property.
-- {{cssxref("custom-ident")}}
-  - : Causes the pseudo-element to match a specific view transition group created by assigning the given {{cssxref("custom-ident")}} to an element via the {{cssxref("view-transition-name")}} property.
+  - : Causes the pseudo-element to match the default `root` view transition snapshot group created by the user agent to contain the view transition for the overall page. This group includes any element not assigned to its own specific view transition snapshot group via the {{cssxref("view-transition-name")}} property.
+- `<pt-name-selector>`
+  - : The {{cssxref("custom-ident")}} set as the value of the {{cssxref("view-transition-name")}} property.
+- `<pt-class-selector>`
+  - : The {{cssxref("custom-ident")}} set as the value of the {{cssxref("view-transition-class")}} property preceded by a period (`.`).
 
 ## Examples
 
 ```css
 ::view-transition-image-pair(root) {
   isolation: auto;
 }
+
+::view-transition-image-pair(.card) {
+  isolation: isolate;
+}
 ```
 
 ## Specifications

files/en-us/web/css/_doublecolon_view-transition-new/index.md

@@ -51,19 +51,21 @@ The following default styling is included in the UA stylesheet:
 ## Syntax
 
 ```css-nolint
-::view-transition-new(<pt-name-selector>) {
+::view-transition-new([ <pt-name-selector> <pt-class-selector>? ] | <pt-class-selector>) {
   /* ... */
 }
 ```
 
-`<pt-name-selector>` can be one of the following values:
+The accepted values are as follows:
 
 - `*`
-  - : Causes the pseudo-element to match all view transition groups.
+  - : The [universal selector (`*`)](/en-US/docs/Web/CSS/Universal_selectors); selects all view transition groups on a page.
 - `root`
   - : Causes the pseudo-element to match the default `root` view transition snapshot group created by the user agent to contain the view transition for the overall page. This group includes any element not assigned to its own specific view transition snapshot group via the {{cssxref("view-transition-name")}} property.
-- {{cssxref("custom-ident")}}
-  - : Causes the pseudo-element to match a specific view transition snapshot group created by assigning the given {{cssxref("custom-ident")}} to an element via the {{cssxref("view-transition-name")}} property.
+- `<pt-name-selector>`
+  - : The {{cssxref("custom-ident")}} set as the value of the {{cssxref("view-transition-name")}} property.
+- `<pt-class-selector>`
+  - : The {{cssxref("custom-ident")}} set as the value of the {{cssxref("view-transition-class")}} property preceded by a period (`.`).
 
 ## Examples
 

files/en-us/web/css/_doublecolon_view-transition-old/index.md

@@ -51,19 +51,21 @@ The following default styling is included in the UA stylesheet:
 ## Syntax
 
 ```css-nolint
-::view-transition-old(<pt-name-selector>) {
+::view-transition-old([ <pt-name-selector> <pt-class-selector>? ] | <pt-class-selector>) {
   /* ... */
 }
 ```
 
-`<pt-name-selector>` can be one of the following values:
+The accepted values are as follows:
 
 - `*`
-  - : Causes the pseudo-element to match all view transition groups.
+  - : The universal selector (\*) selects all view transition groups on a page.
 - `root`
   - : Causes the pseudo-element to match the default `root` view transition snapshot group created by the user agent to contain the view transition for the overall page. This group includes any element not assigned to its own specific view transition snapshot group via the {{cssxref("view-transition-name")}} property.
-- {{cssxref("custom-ident")}}
-  - : Causes the pseudo-element to match a specific view transition snapshot group created by assigning the given {{cssxref("custom-ident")}} to an element via the {{cssxref("view-transition-name")}} property.
+- `<pt-name-selector>`
+  - : The {{cssxref("custom-ident")}} set as the value of the {{cssxref("view-transition-name")}} property.
+- `<pt-class-selector>`
+  - : The {{cssxref("custom-ident")}} set as the value of the {{cssxref("view-transition-class")}} property preceded by a period (`.`).
 
 ## Examples
 

files/en-us/web/css/view-transition-class/index.md

@@ -0,0 +1,88 @@
+---
+title: view-transition-class
+slug: Web/CSS/view-transition-class
+page-type: css-property
+status:
+  - experimental
+browser-compat: css.properties.view-transition-class
+---
+
+{{CSSRef}}
+
+The **`view-transition-class`** [CSS](/en-US/docs/Web/CSS) property provides the selected elements with an identifying class (a {{cssxref("custom-ident")}}), providing an additional method of styling the view transitions for those elements.
+
+## Syntax
+
+```css
+/* <custom-ident> value examples */
+view-transition-class: card;
+
+/* Keyword value */
+view-transition-class: none;
+
+/* Global values */
+view-transition-class: inherit;
+view-transition-class: initial;
+view-transition-class: revert;
+view-transition-class: revert-layer;
+view-transition-class: unset;
+```
+
+### Values
+
+- {{cssxref("custom-ident")}}
+  - : An identifying name that causes the selected element to participate in a separate [view transition](/en-US/docs/Web/API/View_Transition_API) from the root view transition. The identifier must be unique. If two rendered elements have the same `view-transition-name` at the same time, {{domxref("ViewTransition.ready")}} will reject and the transition will be skipped.
+- `none`
+  - : No class would apply to the named view transition pseudo-elements generated for this element.
+
+## Description
+
+The `view-transition-class` value provides a styling hook, similar to a CSS class name, which can be used to apply the same styles to multiple view transition pseudo-elements. It does not mark an element for capturing. Each individual element still needs its own unique {{cssxref("view-transition-name")}}; the `view-transition-class` is only used as an additional way to style elements that already have a `view-transition-name`.
+Support for determining the `view-transition-name` automatically is being discussed in the [CSS View Transitions Module Level 2](https://drafts.csswg.org/css-view-transitions-2/#auto-vt-name) spec.
+
+The `view-transition-class` apply styles using the view transition pseudo-elements, including {{cssxref("::view-transition-group()")}}, {{cssxref("::view-transition-image-pair()")}}, {{cssxref("::view-transition-old()")}}, and {{cssxref("::view-transition-new()")}}. This is different from the `view-transition-name`, which matches view transitions between the element in the old state with its corresponding element in the new state.
+
+Until the `view-transition-class` property is fully supported in all browsers supporting view transitions, include a custom `::view-transition-group` for each element.
+
+## Formal definition
+
+{{cssinfo}}
+
+## Formal syntax
+
+{{csssyntax}}
+
+## Examples
+
+```css
+::view-transition-group(.card) {
+  animation-duration: 3s;
+}
+
+.card {
+  view-transition-class: card;
+}
+
+.card#card1 {
+  view-transition-name: card1;
+}
+
+.card#card2 {
+  view-transition-name: card2;
+}
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{cssxref("view-transition-name")}}
+- [Using the View Transition API](/en-US/docs/Web/API/View_Transition_API/Using) guide
+- [View Transition API](/en-US/docs/Web/API/View_Transition_API)
+- [Smooth transitions with the View Transition API](https://developer.chrome.com/docs/web-platform/view-transitions/)

files/en-us/web/css/view-transition-name/index.md

@@ -55,5 +55,6 @@ figcaption {
 
 ## See also
 
+- {{cssxref("view-transition-class")}}
 - [View Transition API](/en-US/docs/Web/API/View_Transition_API)
 - [Smooth transitions with the View Transition API](https://developer.chrome.com/docs/web-platform/view-transitions/)