Add view-transition-class property

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

@@ -66,18 +66,20 @@ 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 an additional method of styling to selected elements that have a `view-transition-name`.
 
 ### Pseudo-elements
 
 - {{cssxref("::view-transition")}}
   - : The root of the view transitions overlay, which contains all view transitions and sits over the top of all other page content.
-- {{cssxref("::view-transition-group", "::view-transition-group()")}}
+- {{cssxref("::view-transition-group()")}}
   - : The root of a single view transition.
-- {{cssxref("::view-transition-image-pair", "::view-transition-image-pair()")}}
+- {{cssxref("::view-transition-image-pair()")}}
   - : The container for a view transition's old and new views — before and after the transition.
-- {{cssxref("::view-transition-old", "::view-transition-old()")}}
+- {{cssxref("::view-transition-old()")}}
   - : A static snapshot of the old view, before the transition.
-- {{cssxref("::view-transition-new", "::view-transition-new()")}}
+- {{cssxref("::view-transition-new()")}}
   - : A live representation of the new view, after the transition.
 
 ## Examples

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

@@ -49,14 +49,14 @@ To handle creating the outbound and inbound transition animations, the API const
 ```
 
 > [!NOTE]
-> A {{cssxref("::view-transition-group")}} subtree is created for every captured `view-transition-name`.
+> A {{cssxref("::view-transition-group()")}} subtree is created for every captured `view-transition-name`.
 
 In the case of same-document transitions (SPAs), the pseudo-element tree is made available in the document. In the case of cross-document transitions (MPAs), the pseudo-element tree is made available in the destination document only.
 
 The most interesting parts of the tree structure are as follows:
 
 - {{cssxref("::view-transition")}} is the root of view transitions overlay, which contains all view transition snapshot groups and sits over the top of all other page content.
-- A {{cssxref("::view-transition-group")}} acts as a container for each view transition snapshot group. The `root` argument specifies the default snapshot group — the view transition animation will apply to the snapshot whose `view-transition-name` is `root`. By default, this is the {{cssxref(":root")}} element, because the default browser styles define this:
+- A {{cssxref("::view-transition-group()")}} acts as a container for each view transition snapshot group. The `root` argument specifies the default snapshot group — the view transition animation will apply to the snapshot whose `view-transition-name` is `root`. By default, this is the {{cssxref(":root")}} element, because the default browser styles define this:
 
   ```css
   :root {
@@ -66,13 +66,13 @@ The most interesting parts of the tree structure are as follows:
 
   Be aware however that page authors can change this by unsetting the above, and setting `view-transition-name: root` on a different element.
 
-- {{cssxref("::view-transition-old")}} targets the static snapshot of the old page element, and {{cssxref("::view-transition-new")}} targets the live snapshot of the new page element. Both of these render as replaced content, in the same manner as an {{htmlelement("img")}} or {{htmlelement("video")}}, meaning that they can be styled with handy properties like {{cssxref("object-fit")}} and {{cssxref("object-position")}}.
+- {{cssxref("::view-transition-old()")}} targets the static snapshot of the old page element, and {{cssxref("::view-transition-new()")}} targets the live snapshot of the new page element. Both of these render as replaced content, in the same manner as an {{htmlelement("img")}} or {{htmlelement("video")}}, meaning that they can be styled with handy properties like {{cssxref("object-fit")}} and {{cssxref("object-position")}}.
 
 > [!NOTE]
-> It is possible to target different DOM elements with different custom view transition animations by setting a different {{cssxref("view-transition-name")}} on each one. In such cases, a `::view-transition-group` is created for each one. See [Different animations for different elements](#different_animations_for_different_elements) for an example.
+> It is possible to target different DOM elements with different custom view transition animations by setting a different {{cssxref("view-transition-name")}} on each one. In such cases, a `::view-transition-group()` is created for each one. See [Different animations for different elements](#different_animations_for_different_elements) for an example.
 
 > [!NOTE]
-> As you'll see later, to customize the outbound and inbound animations you need to target the {{cssxref("::view-transition-old")}} and {{cssxref("::view-transition-new")}} pseudo-elements with your animations, respectively.
+> As you'll see later, to customize the outbound and inbound animations you need to target the {{cssxref("::view-transition-old()")}} and {{cssxref("::view-transition-new()")}} pseudo-elements with your animations, respectively.
 
 ## Creating a basic view transition
 
@@ -130,7 +130,7 @@ Most appearance transitions are given a default smooth cross-fade animation, as
 - `height` and `width` transitions have a smooth scaling animation applied.
 - `position` and `transform` transitions have a smooth movement animation applied.
 
-You can modify the default animations in any way you want using regular CSS — target the "from" animation with {{cssxref("::view-transition-old")}}, and the "to" animation with {{cssxref("::view-transition-new")}}.
+You can modify the default animations in any way you want using regular CSS — target the "from" animation with {{cssxref("::view-transition-old()")}}, and the "to" animation with {{cssxref("::view-transition-new()")}}.
 
 For example, to change the speed of both:
 
@@ -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.
 
@@ -283,7 +283,7 @@ figcaption {
 }
 ```
 
-This works because, by default, `::view-transition-group` transitions `width` and `height` between the old and new views with a smooth scale. We just needed to set a fixed `height` on both states to make it work.
+This works because, by default, `::view-transition-group()` transitions `width` and `height` between the old and new views with a smooth scale. We just needed to set a fixed `height` on both states to make it work.
 
 > **Note:** [Smooth transitions with the View Transition API](https://developer.chrome.com/docs/web-platform/view-transitions/) contains several other customization examples.
 

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

@@ -96,10 +96,10 @@ See this [transitions multi-page app](https://mdn.github.io/dom-examples/view-tr
 ## See also
 
 - {{cssxref("::view-transition", "::view-transition")}}
-- {{cssxref("::view-transition-new", "::view-transition-new()")}}
-- {{cssxref("::view-transition-old", "::view-transition-old()")}}
-- {{cssxref("::view-transition-group", "::view-transition-group()")}}
-- {{cssxref("::view-transition-image-pair", "::view-transition-image-pair()")}}
+- {{cssxref("::view-transition-new()")}}
+- {{cssxref("::view-transition-old()")}}
+- {{cssxref("::view-transition-group()")}}
+- {{cssxref("::view-transition-image-pair()")}}
 - [View Transition API](/en-US/docs/Web/API/View_Transition_API)
 - [CSS at-rules](/en-US/docs/Web/CSS/CSS_syntax/At-rule)
 - [CSS at-rule functions](/en-US/docs/Web/CSS/CSS_syntax/At-rule_functions)

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

@@ -1,17 +1,17 @@
 ---
-title: ::view-transition-group
+title: ::view-transition-group()
 slug: Web/CSS/::view-transition-group
 page-type: css-pseudo-element
 browser-compat: css.selectors.view-transition-group
 ---
 
 {{CSSRef}}
 
-The **`::view-transition-group`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) represents a single view transition snapshot group.
+The **`::view-transition-group()`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) represents a single view transition snapshot group.
 
-During a view transition, `::view-transition-group` is included in the associated pseudo-element tree as explained in [The view transition pseudo-element tree](/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_pseudo-element_tree). It is only ever a child of {{cssxref("::view-transition")}}, and has a {{cssxref("::view-transition-image-pair")}} as a child.
+During a view transition, `::view-transition-group()` is included in the associated pseudo-element tree as explained in [The view transition pseudo-element tree](/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_pseudo-element_tree). It is only ever a child of {{cssxref("::view-transition")}}, and has a {{cssxref("::view-transition-image-pair()")}} as a child.
 
-`::view-transition-group` is given the following default styling in the UA stylesheet:
+`::view-transition-group()` is given the following default styling in the UA stylesheet:
 
 ```css
 :root::view-transition-group(*) {
@@ -24,7 +24,7 @@ During a view transition, `::view-transition-group` is included in the associate
 }
 ```
 
-By default, selected elements initially mirror the size and position of the {{cssxref("::view-transition-old")}} pseudo-element representing the "old" view state, or the {{cssxref("::view-transition-new")}} pseudo-element representing the "new" view state if there isn't an "old" view state.
+By default, selected elements initially mirror the size and position of the {{cssxref("::view-transition-old()")}} pseudo-element representing the "old" view state, or the {{cssxref("::view-transition-new()")}} pseudo-element representing the "new" view state if there isn't an "old" view state.
 
 If there's both an "old" and "new" view state, styles in the view transition style sheet animate this pseudo-element's {{cssxref("width")}} and {{cssxref("height")}} from the size of the "old" view state's border box to that of the "new" view state's border box.
 
@@ -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

@@ -1,17 +1,17 @@
 ---
-title: ::view-transition-image-pair
+title: ::view-transition-image-pair()
 slug: Web/CSS/::view-transition-image-pair
 page-type: css-pseudo-element
 browser-compat: css.selectors.view-transition-image-pair
 ---
 
 {{CSSRef}}
 
-The **`::view-transition-image-pair`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) represents a container for a [view transition's](/en-US/docs/Web/API/View_Transition_API) "old" and "new" view states — before and after the transition.
+The **`::view-transition-image-pair()`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) represents a container for a [view transition's](/en-US/docs/Web/API/View_Transition_API) "old" and "new" view states — before and after the transition.
 
-During a view transition, `::view-transition-image-pair` is included in the associated pseudo-element tree as explained in [The view transition pseudo-element tree](/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_pseudo-element_tree). It is only ever a child of a {{cssxref("::view-transition-group")}}. In terms of children, it can have a {{cssxref("::view-transition-new")}} or a {{cssxref("::view-transition-old")}}, or both.
+During a view transition, `::view-transition-image-pair()` is included in the associated pseudo-element tree as explained in [The view transition pseudo-element tree](/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_pseudo-element_tree). It is only ever a child of a {{cssxref("::view-transition-group()")}}. In terms of children, it can have a {{cssxref("::view-transition-new()")}} or a {{cssxref("::view-transition-old()")}}, or both.
 
-`::view-transition-image-pair` is given the following default styling in the UA stylesheet:
+`::view-transition-image-pair()` is given the following default styling in the UA stylesheet:
 
 ```css
 :root::view-transition-image-pair(*) {
@@ -24,31 +24,37 @@ During a view transition, `::view-transition-image-pair` is included in the asso
 }
 ```
 
-During a view transition, `::view-transition-image-pair` has {{cssxref("isolation", "isolation: isolate")}} set on it in the view transition style sheet so that its children can be blended with non-normal blend modes without affecting other visual outputs.
+During a view transition, `::view-transition-image-pair()` has {{cssxref("isolation", "isolation: isolate")}} set on it in the view transition style sheet so that its children can be blended with non-normal blend modes without affecting other visual outputs.
 
 ## 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