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. Avoid `auto` for now, 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:
+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 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 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 (`.`).
+
+If using the parameter is the universal selector, the {{cssxref("specificity")}} of the named view transition pseudo-element selector is zero. Otherwise, the [specificity](/en-US/docs/Web/CSS/Specificity#type_column) is equal to a [type selector](/en-US/docs/Web/CSS/Type_selectors).
 
 ## 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:
+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 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,81 @@
+---
+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.
+
+> [!NOTE]
+> Each individual element still needs its own unique {{cssxref("view-transition-name")}}. In browsers that don't support `view-transition-class`, you would also need to have a custom `::view-transition-group` for each element. 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.
+
+## 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.
+
+## 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")}}
+- [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/)