@webref/css 6.0.0 → 6.1.1

package/CSS.json

@@ -285,7 +285,7 @@
   ],
   "values": [
     {
-      "name": "<identifier>",
+      "name": "identifiers",
       "type": "type"
     },
     {
@@ -480,5 +480,39 @@
       "name": "<relative-size>",
       "type": "type"
     }
+  ],
+  "warnings": [
+    {
+      "msg": "Dangling value",
+      "name": "thin",
+      "prose": "A thin border.",
+      "type": "value",
+      "value": "thin",
+      "for": "border-bottom-right"
+    },
+    {
+      "msg": "Dangling value",
+      "name": "medium",
+      "prose": "A medium border.",
+      "type": "value",
+      "value": "medium",
+      "for": "border-bottom-right"
+    },
+    {
+      "msg": "Dangling value",
+      "name": "thick",
+      "prose": "A thick border.",
+      "type": "value",
+      "value": "thick",
+      "for": "border-bottom-right"
+    },
+    {
+      "msg": "Dangling value",
+      "name": "<length>",
+      "prose": "The border’s thickness has an explicit value. Explicit border widths cannot be negative.",
+      "type": "value",
+      "value": "<length>",
+      "for": "border-bottom-right"
+    }
   ]
 }

package/css-align.json

@@ -199,8 +199,9 @@
         },
         {
           "name": "legacy",
-          "value": "legacy",
-          "type": "value"
+          "prose": "This keyword causes the value to effectively inherit into descendants. If the legacy keyword appears on its own (without an accompanying left, right, or center keyword): if the inherited value of justify-items includes the legacy keyword, this value computes to the inherited value; otherwise it computes to normal. When justify-self:auto references the value of justify-items, only the alignment keyword, not the legacy keyword, is referenced by it. It exists to implement the legacy alignment behavior of HTML’s <center> element and align attribute.",
+          "type": "value",
+          "value": "legacy"
         }
       ],
       "styleDeclaration": [
@@ -336,6 +337,24 @@
       "type": "type",
       "value": "center | start | end | self-start | self-end | flex-start | flex-end",
       "values": [
+        {
+          "name": "center",
+          "prose": "Centers the alignment subject within its alignment container.",
+          "type": "value",
+          "value": "center"
+        },
+        {
+          "name": "start",
+          "prose": "Aligns the alignment subject to be flush with the alignment container’s start edge in the appropriate axis.",
+          "type": "value",
+          "value": "start"
+        },
+        {
+          "name": "end",
+          "prose": "Aligns the alignment subject to be flush with the alignment container’s end edge in the appropriate axis.",
+          "type": "value",
+          "value": "end"
+        },
         {
           "name": "self-start",
           "prose": "Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the alignment subject’s start side in the appropriate axis.",
@@ -347,13 +366,57 @@
           "prose": "Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the alignment subject’s end side in the appropriate axis.",
           "type": "value",
           "value": "self-end"
+        },
+        {
+          "name": "flex-start",
+          "prose": "Only used in flex layout. [CSS-FLEXBOX-1] Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the flex container’s main-start or cross-start side, as appropriate. When used outside of a flex formatting context, this value behaves as start. That is, on boxes that are not flex items (or pretending to be flex items, such as when determining the static position of an absolutely-positioned box that is a child of a flex container), this value behaves as start when used in the self-alignment properties, and on boxes that are not flex containers, this value behaves as start when used in the content-distribution properties.",
+          "type": "value",
+          "value": "flex-start"
+        },
+        {
+          "name": "flex-end",
+          "prose": "Only used in flex layout. Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the flex container’s main-end or cross-end side, as appropriate. When used outside of a flex formatting context, this value behaves as end. That is, on boxes that are not flex items (or pretending to be flex items, such as when determining the static position of an absolutely-positioned box that is a child of a flex container), this value behaves as end when used in the self-alignment properties, and on boxes that are not flex containers, this value behaves as end when used in the content-distribution properties.",
+          "type": "value",
+          "value": "flex-end"
         }
       ]
     },
     {
       "name": "<content-position>",
       "type": "type",
-      "value": "center | start | end | flex-start | flex-end"
+      "value": "center | start | end | flex-start | flex-end",
+      "values": [
+        {
+          "name": "center",
+          "prose": "Centers the alignment subject within its alignment container.",
+          "type": "value",
+          "value": "center"
+        },
+        {
+          "name": "start",
+          "prose": "Aligns the alignment subject to be flush with the alignment container’s start edge in the appropriate axis.",
+          "type": "value",
+          "value": "start"
+        },
+        {
+          "name": "end",
+          "prose": "Aligns the alignment subject to be flush with the alignment container’s end edge in the appropriate axis.",
+          "type": "value",
+          "value": "end"
+        },
+        {
+          "name": "flex-start",
+          "prose": "Only used in flex layout. [CSS-FLEXBOX-1] Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the flex container’s main-start or cross-start side, as appropriate. When used outside of a flex formatting context, this value behaves as start. That is, on boxes that are not flex items (or pretending to be flex items, such as when determining the static position of an absolutely-positioned box that is a child of a flex container), this value behaves as start when used in the self-alignment properties, and on boxes that are not flex containers, this value behaves as start when used in the content-distribution properties.",
+          "type": "value",
+          "value": "flex-start"
+        },
+        {
+          "name": "flex-end",
+          "prose": "Only used in flex layout. Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the flex container’s main-end or cross-end side, as appropriate. When used outside of a flex formatting context, this value behaves as end. That is, on boxes that are not flex items (or pretending to be flex items, such as when determining the static position of an absolutely-positioned box that is a child of a flex container), this value behaves as end when used in the self-alignment properties, and on boxes that are not flex containers, this value behaves as end when used in the content-distribution properties.",
+          "type": "value",
+          "value": "flex-end"
+        }
+      ]
     },
     {
       "name": "<baseline-position>",
@@ -367,16 +430,16 @@
           "value": "baseline"
         },
         {
-          "name": "first baseline | first",
+          "name": "first baseline",
           "prose": "Specifies participation in first-baseline alignment: aligns the alignment baseline of the box’s first baseline set with the corresponding baseline of its baseline-sharing group. See § 9.3 Aligning Boxes by Baseline for more details. The fallback alignment for first baseline is safe self-start (for self-alignment) or safe start (for content-distribution).",
           "type": "value",
-          "value": "first baseline | first"
+          "value": "first baseline"
         },
         {
-          "name": "last baseline | last",
+          "name": "last baseline",
           "prose": "Specifies participation in last-baseline alignment: aligns the alignment baseline of the box’s last baseline set with the corresponding baseline of its baseline-sharing group.̣ See § 9.3 Aligning Boxes by Baseline for more details. The fallback alignment for last baseline is safe self-end (for self-alignment) or safe end (for content-distribution).",
           "type": "value",
-          "value": "last baseline | last"
+          "value": "last baseline"
         }
       ]
     },

package/css-animations-2.json

@@ -50,22 +50,23 @@
       "values": [
         {
           "name": "auto",
-          "value": "auto",
-          "type": "value"
+          "prose": "The animation’s timeline is a DocumentTimeline, more specifically the default document timeline.",
+          "type": "value",
+          "value": "auto"
         },
         {
           "name": "none",
           "prose": "The animation is not associated with a timeline.",
           "type": "value",
           "value": "none"
+        },
+        {
+          "name": "<timeline-name>",
+          "value": "<custom-ident> | <string>",
+          "type": "value"
         }
       ]
     },
-    {
-      "name": "<timeline-name>",
-      "value": "<custom-ident> | <string>",
-      "type": "type"
-    },
     {
       "name": "<single-animation>",
       "value": "<time> || <easing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ] || <single-animation-timeline>",

package/css-content.json

@@ -39,8 +39,9 @@
           "values": [
             {
               "name": "<string>",
-              "value": "<string>",
-              "type": "value"
+              "prose": "Represents an anonymous inline box filled with the specified text.",
+              "type": "value",
+              "value": "<string>"
             },
             {
               "name": "<image>",
@@ -171,8 +172,9 @@
           "values": [
             {
               "name": "<string>",
-              "value": "<string>",
-              "type": "value"
+              "prose": "Represents an anonymous inline box filled with the specified text.",
+              "type": "value",
+              "value": "<string>"
             },
             {
               "name": "<image>",
@@ -235,7 +237,33 @@
     {
       "name": "<quote>",
       "type": "type",
-      "value": "open-quote | close-quote | no-open-quote | no-close-quote"
+      "value": "open-quote | close-quote | no-open-quote | no-close-quote",
+      "values": [
+        {
+          "name": "open-quote",
+          "prose": "These values are replaced by the appropriate string from the quotes property, and increments (decrements) the level of nesting for quotes. See § 2.4.1 Specifying quotes with the quotes property for more information.",
+          "type": "value",
+          "value": "open-quote"
+        },
+        {
+          "name": "close-quote",
+          "prose": "These values are replaced by the appropriate string from the quotes property, and increments (decrements) the level of nesting for quotes. See § 2.4.1 Specifying quotes with the quotes property for more information.",
+          "type": "value",
+          "value": "close-quote"
+        },
+        {
+          "name": "no-open-quote",
+          "prose": "Inserts nothing (as in none), but increments (decrements) the level of nesting for quotes. See § 2.4.1 Specifying quotes with the quotes property for more information.",
+          "type": "value",
+          "value": "no-open-quote"
+        },
+        {
+          "name": "no-close-quote",
+          "prose": "Inserts nothing (as in none), but increments (decrements) the level of nesting for quotes. See § 2.4.1 Specifying quotes with the quotes property for more information.",
+          "type": "value",
+          "value": "no-close-quote"
+        }
+      ]
     },
     {
       "name": "leader()",

package/css-fonts.json

@@ -158,7 +158,7 @@
           "value": "italic"
         },
         {
-          "name": "oblique <angle [−90deg,90deg]>?",
+          "name": "oblique <angle [-90deg,90deg]>?",
           "prose": "Controls matching against an oblique face. Positive angles represent a clockwise slant; negative angles represent a counter-clockwise slant. The lack of an <angle> represents 14deg. (Note that a font might internally provide its own mapping for \"oblique\", but the mapping within the font is disregarded.) Fractional and negative values are accepted; however, values less than -90deg or values greater than 90deg are invalid. If no oblique faces exist, and font-synthesis-style has the value auto, a synthetic oblique face will be generated.",
           "type": "value",
           "value": "oblique <angle [-90deg,90deg]>?"
@@ -227,8 +227,9 @@
         },
         {
           "name": "<number [0,∞]>",
-          "value": "<number [0,∞]>",
-          "type": "value"
+          "prose": "Specifies the aspect value used in the calculation below to calculate the adjusted font size: c = ( a / a' ) s where: s = font-size value a = aspect value as specified by the 'font-size-adjust' property a' = aspect value of actual font c = adjusted font-size to use Negative values are invalid. This value applies to any font that is selected but in typical usage it should be based on the aspect value of the first font in the font-family list. If this is specified accurately, the (a/a') term in the formula above is effectively 1 for the first font and no adjustment occurs. If the value is specified inaccurately, text rendered using the first font in the family list will display differently in older user agents that don’t support font-size-adjust.",
+          "type": "value",
+          "value": "<number [0,∞]>"
         }
       ],
       "styleDeclaration": [

package/css-gcpm-4.json

@@ -23,8 +23,8 @@
   "atrules": [],
   "selectors": [
     {
-      "name": ":nth-of-page(n)",
-      "prose": "The element is the nth matched element on the page."
+      "name": ":nth-of-page()",
+      "value": ":nth-of-page(n)"
     },
     {
       "name": ":first-of-page",

package/css-grid.json

@@ -344,7 +344,7 @@
               "value": "<custom-ident>"
             },
             {
-              "name": "[ <integer [−∞,−1]> | <integer [1,∞]> ] && <custom-ident>?",
+              "name": "[ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>?",
               "prose": "Contributes the Nth grid line to the grid item’s placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid. If a name is given as a <custom-ident>, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position. An <integer> value of zero makes the declaration invalid.",
               "type": "value",
               "value": "[ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>?"
@@ -392,7 +392,7 @@
               "value": "<custom-ident>"
             },
             {
-              "name": "[ <integer [−∞,−1]> | <integer [1,∞]> ] && <custom-ident>?",
+              "name": "[ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>?",
               "prose": "Contributes the Nth grid line to the grid item’s placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid. If a name is given as a <custom-ident>, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position. An <integer> value of zero makes the declaration invalid.",
               "type": "value",
               "value": "[ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>?"
@@ -440,7 +440,7 @@
               "value": "<custom-ident>"
             },
             {
-              "name": "[ <integer [−∞,−1]> | <integer [1,∞]> ] && <custom-ident>?",
+              "name": "[ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>?",
               "prose": "Contributes the Nth grid line to the grid item’s placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid. If a name is given as a <custom-ident>, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position. An <integer> value of zero makes the declaration invalid.",
               "type": "value",
               "value": "[ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>?"
@@ -488,7 +488,7 @@
               "value": "<custom-ident>"
             },
             {
-              "name": "[ <integer [−∞,−1]> | <integer [1,∞]> ] && <custom-ident>?",
+              "name": "[ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>?",
               "prose": "Contributes the Nth grid line to the grid item’s placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid. If a name is given as a <custom-ident>, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position. An <integer> value of zero makes the declaration invalid.",
               "type": "value",
               "value": "[ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>?"
@@ -657,10 +657,10 @@
       "type": "type",
       "values": [
         {
-          "name": "fr|fr unit",
+          "name": "fr",
           "prose": "A flexible length or <flex> is a dimension with the fr unit, which represents a fraction of the leftover space in the grid container. Tracks sized with fr units are called flexible tracks as they flex in response to leftover space similar to how flex items with a zero base size fill space in a flex container.",
           "type": "value",
-          "value": "fr|fr unit"
+          "value": "fr"
         }
       ]
     }

package/css-highlight-api.json

@@ -7,8 +7,8 @@
   "atrules": [],
   "selectors": [
     {
-      "name": "::highlight(<custom-highlight-name>)",
-      "prose": "The ::highlight(<custom-highlight-name>) pseudo-element (also known as the custom highlight pseudo-element) represents the portion of a document that is being contained or partially contained in all the ranges of the registered custom highlight with the custom highlight name <custom-highlight-name>, if any. <custom-highlight-name> must be a valid CSS <ident-token>."
+      "name": "::highlight()",
+      "value": "::highlight(<custom-highlight-name>)"
     }
   ],
   "values": [

package/css-images-4.json

@@ -166,7 +166,21 @@
     {
       "name": "conic-gradient()",
       "type": "function",
-      "value": "conic-gradient( [ [ from <angle> ]? [ at <position> ]? ] || <color-interpolation-method>, <angular-color-stop-list> )"
+      "value": "conic-gradient( [ [ from <angle> ]? [ at <position> ]? ] || <color-interpolation-method>, <angular-color-stop-list> )",
+      "values": [
+        {
+          "name": "<angle>",
+          "prose": "The entire gradient is rotated by this angle. If omitted, defaults to 0deg. The unit identifier may be omitted if the <angle> is zero.",
+          "type": "value",
+          "value": "<angle>"
+        },
+        {
+          "name": "<position>",
+          "prose": "Determines the gradient center of the gradient. The <position> value type (which is also used for background-position) is defined in [CSS-VALUES-3], and is resolved using the center-point as the object area and the gradient box as the positioning area. If this argument is omitted, it defaults to center.",
+          "type": "value",
+          "value": "<position>"
+        }
+      ]
     },
     {
       "name": "repeating-linear-gradient()",
@@ -181,7 +195,21 @@
     {
       "name": "repeating-conic-gradient()",
       "prose": "In addition to linear-gradient(), radial-gradient(), and conic-gradient(), this specification defines repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient() values. These notations take the same values and are interpreted the same as their respective non-repeating siblings defined previously.",
-      "type": "function"
+      "type": "function",
+      "values": [
+        {
+          "name": "<angle>",
+          "prose": "The entire gradient is rotated by this angle. If omitted, defaults to 0deg. The unit identifier may be omitted if the <angle> is zero.",
+          "type": "value",
+          "value": "<angle>"
+        },
+        {
+          "name": "<position>",
+          "prose": "Determines the gradient center of the gradient. The <position> value type (which is also used for background-position) is defined in [CSS-VALUES-3], and is resolved using the center-point as the object area and the gradient box as the positioning area. If this argument is omitted, it defaults to center.",
+          "type": "value",
+          "value": "<position>"
+        }
+      ]
     },
     {
       "name": "<color-stop-list>",

package/css-images-5.json

@@ -0,0 +1,40 @@
+{
+  "spec": {
+    "title": "CSS Images Module Level 5",
+    "url": "https://drafts.csswg.org/css-images-5/"
+  },
+  "properties": [
+    {
+      "name": "object-view-box",
+      "value": "none | <basic-shape-rect>",
+      "initial": "none",
+      "appliesTo": "replaced elements",
+      "inherited": "no",
+      "percentages": "n/a",
+      "computedValue": "specified keyword, or computed function",
+      "canonicalOrder": "per grammar",
+      "animationType": "as if possible, otherwise discrete",
+      "values": [
+        {
+          "name": "none",
+          "prose": "The element does not have a view box.",
+          "type": "value",
+          "value": "none"
+        },
+        {
+          "name": "<basic-shape-rect>",
+          "prose": "If the element does not have both a natural width and a natural height, this value has no effect, similar to none. Otherwise, specifies a view box for the element. First, resolve the <basic-shape-rect> against a reference box formed by the element’s natural sizes to obtain the element’s view box. For all purposes, the element is now treated as having natural sizes equal to the view box’s width and height. If the element had a natural aspect ratio, it’s now treated as instead having the same ratio as the view box. Further adjustments to the size/position of the element’s contents, such as object-position or object-fit, are similarly performed on the view box instead. When the element is painted, its contents are scaled and translated such that the element’s contents retain the same position and size, relative to the view box’s final size and position, that they had when the view box was determined (above). Have not yet defined what happens if the view box is zero-area. It’s an error case, so precise behavior isn’t important; just need to see what impls want to do about it.",
+          "type": "value",
+          "value": "<basic-shape-rect>"
+        }
+      ],
+      "styleDeclaration": [
+        "object-view-box",
+        "objectViewBox"
+      ]
+    }
+  ],
+  "atrules": [],
+  "selectors": [],
+  "values": []
+}

package/css-images.json

@@ -114,7 +114,7 @@
       "values": [
         {
           "name": "auto",
-          "prose": "The scaling algorithm is UA dependent.",
+          "prose": "The scaling algorithm is UA-dependent.",
           "type": "value",
           "value": "auto"
         },
@@ -138,15 +138,9 @@
         },
         {
           "name": "crisp-edges",
-          "prose": "The image is scaled in a way that preserves contrast and edges, and which does not smooth colors or introduce blur to the image in the process. The image must be scaled with the nearest neighbor algorithm: treating the original image’s pixel grid as a literal grid of rectangles, scale those to the desired size, then each pixel of the final image takes its color solely from the nearest pixel of the scaled original image.",
+          "prose": "The image is scaled in a way that preserves contrast and edges, and which does not smooth colors or introduce blur to the image in the process. The image may be scaled using nearest neighbor, but may instead be scaled with a UA-defined algorithm. The only requirement is that the algorithm must not blur edges or blend colors from the source image; but it can, for example, intelligently detect diagonal or curved lines and render them as such rather than as jagged-looking \"giant pixels\".",
           "type": "value",
           "value": "crisp-edges"
-        },
-        {
-          "name": "nearest neighbor",
-          "prose": "The image must be scaled with the nearest neighbor algorithm: treating the original image’s pixel grid as a literal grid of rectangles, scale those to the desired size, then each pixel of the final image takes its color solely from the nearest pixel of the scaled original image.",
-          "type": "value",
-          "value": "nearest neighbor"
         }
       ],
       "styleDeclaration": [
@@ -183,7 +177,32 @@
       "name": "radial-gradient()",
       "prose": "The radial-gradient() notation specifies a radial gradient by indicating the center of the gradient (where the 0% ellipse will be) and the size and shape of the ending shape (the 100% ellipse). Color stops are given as a list, just as for linear-gradient(). Starting from the gradient center and progressing towards (and potentially beyond) the ending shape, uniformly-scaled concentric ellipses are drawn and colored according to the specified color stops.",
       "type": "function",
-      "value": "radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )",
+      "value": "radial-gradient( [ <rg-ending-shape> || <rg-size> ]? [ at <position> ]? , <color-stop-list> )",
+      "values": [
+        {
+          "name": "<position>",
+          "prose": "Determines the center of the gradient. The <position> value type (which is also used for background-position) is defined in [CSS-VALUES-3], and is resolved using the center-point as the object area and the gradient box as the positioning area. If this argument is omitted, it defaults to center.",
+          "type": "value",
+          "value": "<position>"
+        },
+        {
+          "name": "<rg-ending-shape>",
+          "prose": "Can be either circle or ellipse; determines whether the gradient’s ending shape is a circle or an ellipse, respectively. If <rg-ending-shape> is omitted, the ending shape defaults to a circle if the <rg-size> is a single <length>, and to an ellipse otherwise.",
+          "type": "value",
+          "value": "<rg-ending-shape>"
+        },
+        {
+          "name": "<rg-size>",
+          "prose": "Determines the size of the gradient’s ending shape. If omitted it defaults to farthest-corner. It can be given explicitly or by keyword. For the purpose of the keyword definitions, consider the gradient box edges as extending infinitely in both directions, rather than being finite line segments. If the ending-shape is an ellipse, its axises are aligned with the horizontal and vertical axises. Both circle and ellipse gradients accept the following <rg-extent-keyword> values: If <rg-ending-shape> is specified as circle or is omitted, the <rg-size> may be given explicitly as: If <rg-ending-shape> is specified as ellipse or is omitted, <rg-size> may instead be given explicitly as:",
+          "type": "value",
+          "value": "<rg-size>"
+        }
+      ]
+    },
+    {
+      "name": "<rg-size>",
+      "type": "type",
+      "value": "<rg-extent-keyword> | <length [0,∞]> | <length-percentage [0,∞]>{2}",
       "values": [
         {
           "name": "<length [0,∞]>",
@@ -199,6 +218,54 @@
         }
       ]
     },
+    {
+      "name": "<rg-extent-keyword>",
+      "type": "type",
+      "value": "closest-corner | closest-side | farthest-corner | farthest-side",
+      "values": [
+        {
+          "name": "closest-side",
+          "prose": "The ending shape is sized so that it exactly meets the side of the gradient box closest to the gradient’s center. If the shape is an ellipse, it exactly meets the closest side in each dimension.",
+          "type": "value",
+          "value": "closest-side"
+        },
+        {
+          "name": "farthest-side",
+          "prose": "Same as closest-side, except the ending shape is sized based on the farthest side(s).",
+          "type": "value",
+          "value": "farthest-side"
+        },
+        {
+          "name": "closest-corner",
+          "prose": "The ending shape is sized so that it passes through the corner of the gradient box closest to the gradient’s center. If the shape is an ellipse, the ending shape is given the same aspect-ratio it would have if closest-side were specified.",
+          "type": "value",
+          "value": "closest-corner"
+        },
+        {
+          "name": "farthest-corner",
+          "prose": "Same as closest-corner, except the ending shape is sized based on the farthest corner. If the shape is an ellipse, the ending shape is given the same aspect ratio it would have if farthest-side were specified.",
+          "type": "value",
+          "value": "farthest-corner"
+        }
+      ]
+    },
+    {
+      "name": "<rg-ending-shape>",
+      "type": "type",
+      "value": "circle | ellipse",
+      "values": [
+        {
+          "name": "circle",
+          "type": "value",
+          "value": "circle"
+        },
+        {
+          "name": "ellipse",
+          "type": "value",
+          "value": "ellipse"
+        }
+      ]
+    },
     {
       "name": "repeating-linear-gradient()",
       "prose": "In addition to linear-gradient() and radial-gradient(), this specification defines repeating-linear-gradient() and repeating-radial-gradient() values. These notations take the same values and are interpreted the same as their respective non-repeating siblings defined previously.",
@@ -207,7 +274,27 @@
     {
       "name": "repeating-radial-gradient()",
       "prose": "In addition to linear-gradient() and radial-gradient(), this specification defines repeating-linear-gradient() and repeating-radial-gradient() values. These notations take the same values and are interpreted the same as their respective non-repeating siblings defined previously.",
-      "type": "function"
+      "type": "function",
+      "values": [
+        {
+          "name": "<position>",
+          "prose": "Determines the center of the gradient. The <position> value type (which is also used for background-position) is defined in [CSS-VALUES-3], and is resolved using the center-point as the object area and the gradient box as the positioning area. If this argument is omitted, it defaults to center.",
+          "type": "value",
+          "value": "<position>"
+        },
+        {
+          "name": "<rg-ending-shape>",
+          "prose": "Can be either circle or ellipse; determines whether the gradient’s ending shape is a circle or an ellipse, respectively. If <rg-ending-shape> is omitted, the ending shape defaults to a circle if the <rg-size> is a single <length>, and to an ellipse otherwise.",
+          "type": "value",
+          "value": "<rg-ending-shape>"
+        },
+        {
+          "name": "<rg-size>",
+          "prose": "Determines the size of the gradient’s ending shape. If omitted it defaults to farthest-corner. It can be given explicitly or by keyword. For the purpose of the keyword definitions, consider the gradient box edges as extending infinitely in both directions, rather than being finite line segments. If the ending-shape is an ellipse, its axises are aligned with the horizontal and vertical axises. Both circle and ellipse gradients accept the following <rg-extent-keyword> values: If <rg-ending-shape> is specified as circle or is omitted, the <rg-size> may be given explicitly as: If <rg-ending-shape> is specified as ellipse or is omitted, <rg-size> may instead be given explicitly as:",
+          "type": "value",
+          "value": "<rg-size>"
+        }
+      ]
     },
     {
       "name": "<color-stop-list>",

package/css-lists.json

@@ -169,6 +169,12 @@
           "prose": "Instantiates a reversed counter of the given <counter-name> with a starting value of the given <integer>, or no starting value if not given.",
           "type": "value",
           "value": "<reversed-counter-name> <integer>?"
+        },
+        {
+          "name": "list-item",
+          "prose": "In addition to any explicitly defined counters that authors write in their styles, list items automatically increment a special list-item counter, which is used when generating the default marker string on list items (see list-style-type).",
+          "type": "value",
+          "value": "list-item"
         }
       ],
       "styleDeclaration": [
@@ -198,6 +204,12 @@
           "prose": "Sets (for counter-set) or increments (for counter-increment) the value of the named counter on the element to/by the specified <integer>. If the <integer> is omitted, it defaults to 1 (for counter-increment) or 0 (for counter-set). If there is not currently a counter of the given name on the element, the element instantiates a new counter of the given name with a starting value of 0 before setting or incrementing its value.",
           "type": "value",
           "value": "<counter-name> <integer>?"
+        },
+        {
+          "name": "list-item",
+          "prose": "In addition to any explicitly defined counters that authors write in their styles, list items automatically increment a special list-item counter, which is used when generating the default marker string on list items (see list-style-type).",
+          "type": "value",
+          "value": "list-item"
         }
       ],
       "styleDeclaration": [
@@ -227,6 +239,12 @@
           "prose": "Sets (for counter-set) or increments (for counter-increment) the value of the named counter on the element to/by the specified <integer>. If the <integer> is omitted, it defaults to 1 (for counter-increment) or 0 (for counter-set). If there is not currently a counter of the given name on the element, the element instantiates a new counter of the given name with a starting value of 0 before setting or incrementing its value.",
           "type": "value",
           "value": "<counter-name> <integer>?"
+        },
+        {
+          "name": "list-item",
+          "prose": "In addition to any explicitly defined counters that authors write in their styles, list items automatically increment a special list-item counter, which is used when generating the default marker string on list items (see list-style-type).",
+          "type": "value",
+          "value": "list-item"
         }
       ],
       "styleDeclaration": [
@@ -256,12 +274,28 @@
     {
       "name": "counter()",
       "type": "function",
-      "value": "counter( <counter-name>, <counter-style>? )"
+      "value": "counter( <counter-name>, <counter-style>? )",
+      "values": [
+        {
+          "name": "list-item",
+          "prose": "In addition to any explicitly defined counters that authors write in their styles, list items automatically increment a special list-item counter, which is used when generating the default marker string on list items (see list-style-type).",
+          "type": "value",
+          "value": "list-item"
+        }
+      ]
     },
     {
       "name": "counters()",
       "type": "function",
-      "value": "counters( <counter-name>, <string>, <counter-style>? )"
+      "value": "counters( <counter-name>, <string>, <counter-style>? )",
+      "values": [
+        {
+          "name": "list-item",
+          "prose": "In addition to any explicitly defined counters that authors write in their styles, list items automatically increment a special list-item counter, which is used when generating the default marker string on list items (see list-style-type).",
+          "type": "value",
+          "value": "list-item"
+        }
+      ]
     }
   ]
 }

package/css-nav.json

@@ -56,8 +56,9 @@
         },
         {
           "name": "scroll",
-          "value": "scroll",
-          "type": "value"
+          "prose": "If the currently focused element is not itself a scroll container, this value on an ancestor scroll container has the same effect as auto. If the currently focused element is a scroll container, it is scrolled in the direction requested without changing which element is in focus, regardless of the presence of focusable descendants.",
+          "type": "value",
+          "value": "scroll"
         }
       ],
       "styleDeclaration": [

package/css-ruby.json

@@ -35,8 +35,9 @@
         },
         {
           "name": "inter-character",
-          "value": "inter-character",
-          "type": "value"
+          "prose": "If the writing mode of the enclosing ruby container is vertical, this value has the same effect as over. Otherwise, the ruby annotation becomes an inter-character annotation. The annotation appears on the right of the base in horizontal text. This forces the computed value of writing-mode of the ruby annotation children of this ruby annotation container to be vertical-rl. This value is provided for the special case of traditional Chinese as used especially in Taiwan: ruby (made of bopomofo glyphs) in that context appears vertically along the right side of the base glyph, even when the layout of the base characters is horizontal: “Bopomofo” ruby in traditional Chinese (ruby annotation shown in blue for clarity) in horizontal layout",
+          "type": "value",
+          "value": "inter-character"
         }
       ],
       "styleDeclaration": [

package/css-sizing.json

@@ -297,8 +297,9 @@
         },
         {
           "name": "border-box",
-          "value": "border-box",
-          "type": "value"
+          "prose": "Sizes specified on sizing properties as <length-percentage> represent the box’s visually-apparent sizes, including the borders/padding (but not margin): they are applied to the border box. The padding and border of the box are laid out and drawn inside the specified width and height, with the content box sized to fill the remaining space, floored at zero. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified <length-percentage>. As the content width and height cannot be negative, this computation is floored at zero. Used values, as exposed for instance through getComputedStyle(), also refer to the border box.",
+          "type": "value",
+          "value": "border-box"
         }
       ],
       "styleDeclaration": [

package/css-speech.json

@@ -525,8 +525,9 @@
       "values": [
         {
           "name": "<family-name>",
-          "value": "<family-name>",
-          "type": "value"
+          "prose": "Values are specific voice instances (e.g., Mike, comedian, mary, carlos2, \"valley girl\"). Like font-family names, voice names must either be given quoted as strings, or unquoted as a sequence of one or more identifiers. If a sequence of identifiers is given as a voice name, the computed value is the name converted to a string by joining all the identifiers in the sequence by single spaces. Voice names that happen to be the same as the gender keywords (male, female and neutral) or that happen to match the CSS-wide keywords or preserve must be quoted to disambiguate with these keywords. The keyword default is reserved for future use and must also be quoted when used as voice names. It is recommended to quote voice names that contain white space, digits, or punctuation characters other than hyphens—even if these voice names are valid in unquoted form—in order to improve code clarity. For example: voice-family: \"john doe\", \"Henry the-8th\";",
+          "type": "value",
+          "value": "<family-name>"
         },
         {
           "name": "<age>",

package/css-text-decor-4.json

@@ -649,9 +649,9 @@
     {
       "msg": "Dangling value",
       "name": "auto",
-      "value": "auto",
-      "pureSyntax": false,
+      "prose": "The UA chooses a trim amount that ensures that if two identical underlined elements appear side-by-side they do not appear to have a single underline. (This is important in Chinese, where underlining is a form of punctuation.) text-decoration-skip-inset: auto for <u>石井</u><u>艾俐俐</u>",
       "type": "value",
+      "value": "auto",
       "for": "text-decoration-skip-inset"
     },
     {

package/css-transforms.json

@@ -159,8 +159,9 @@
         },
         {
           "name": "view-box",
-          "value": "view-box",
-          "type": "value"
+          "prose": "Uses the nearest SVG viewport as reference box. If a viewBox attribute is specified for the SVG viewport creating element: The reference box is positioned at the origin of the coordinate system established by the viewBox attribute. The dimension of the reference box is set to the width and height values of the viewBox attribute.",
+          "type": "value",
+          "value": "view-box"
         }
       ],
       "styleDeclaration": [

package/css-ui.json

@@ -484,8 +484,9 @@
         },
         {
           "name": "contain",
-          "value": "contain",
-          "type": "value"
+          "prose": "UAs must not allow a selection which is started in this element to be extended outside of this element. A selection started outside of this element must not end in this element. If the user attempts to create such a selection, the UA must instead end the selection range at the element boundary. The UA must allow selections to extend across this element, and such selections must include the content of the element.",
+          "type": "value",
+          "value": "contain"
         },
         {
           "name": "all",

package/css-values.json

@@ -127,9 +127,10 @@
       "type": "type",
       "values": [
         {
-          "name": "em unit",
-          "value": "em unit",
-          "type": "value"
+          "name": "em",
+          "prose": "Equal to the computed value of the font-size property of the element on which it is used. The rule: h1 { line-height: 1.2em } means that the line height of h1 elements will be 20% greater than the font size of h1 element. On the other hand: h1 { font-size: 1.2em } means that the font size of h1 elements will be 20% greater than the computed font size inherited by h1 elements.",
+          "type": "value",
+          "value": "em"
         },
         {
           "name": "rem",

package/css-view-transitions.json

@@ -41,20 +41,20 @@
       "prose": "This pseudo-element is the grouping container of all the other view-transition pseudo-elements. Its originating element is the document’s document element. The following is added to the HTML user agent style sheet: html::view-transition { position: fixed; inset: 0; }"
     },
     {
-      "name": "::view-transition-group( <pt-name-selector> )",
-      "prose": "One of these pseudo-elements exists for each view-transition-name in a view transition, and holds the rest of the pseudo-elements corresponding to this view-transition-name. Its originating element is the ::view-transition pseudo-element. The following is added to the HTML user agent style sheet: html::view-transition-group(*) { position: absolute; top: 0; left: 0; animation-duration: 0.25s; animation-fill-mode: both; } The selector for this and subsequently defined pseudo-elements is likely to change to indicate position in the pseudo-tree hierarchy."
+      "name": "::view-transition-group()",
+      "value": "::view-transition-group( <pt-name-selector> )"
     },
     {
-      "name": "::view-transition-image-pair( <pt-name-selector> )",
-      "prose": "One of these pseudo-elements exists for each view-transition-name being in a view transition, and holds the images of the old and new elements. Its originating element is the ::view-transition-group() pseudo-element with the same transition-name. The following is added to the HTML user agent style sheet: html::view-transition-image-pair(*) { position: absolute; inset: 0; animation-duration: inherit; animation-fill-mode: inherit; }"
+      "name": "::view-transition-image-pair()",
+      "value": "::view-transition-image-pair( <pt-name-selector> )"
     },
     {
-      "name": "::view-transition-old( <pt-name-selector> )",
-      "prose": "One of these pseudo-elements exists for each element in the old DOM being animated by the view transition, and is a replaced element displaying the old element’s snapshot image. It has natural dimensions equal to the snapshot’s size. Its originating element is the ::view-transition-image-pair() pseudo-element with the same transition-name. The following is added to the HTML user agent style sheet: html::view-transition-old(*) { position: absolute; inset-block-start: 0; inline-size: 100%; block-size: auto; animation-duration: inherit; animation-fill-mode: inherit; }"
+      "name": "::view-transition-old()",
+      "value": "::view-transition-old( <pt-name-selector> )"
     },
     {
-      "name": "::view-transition-new( <pt-name-selector> )",
-      "prose": "Identical to ::view-transition-old(), except it deals with the new element instead."
+      "name": "::view-transition-new()",
+      "value": "::view-transition-new( <pt-name-selector> )"
     }
   ],
   "values": [

package/fill-stroke.json

@@ -356,8 +356,9 @@
       "values": [
         {
           "name": "<number>",
-          "value": "<number>",
-          "type": "value"
+          "prose": "Specifies the limit on the join’s size as a ratio of its diagonal to the stroke-width. Values less than 1 are invalid (and make the declaration invalid). For a miter linejoin, the length of the diagonal is calculated from the angle between the two segments as stroke-width / sin(θ/2). The linejoin is clipped perpendicular to the line bisecting the angle between the two path segments. For an arcs linejoin, the length of the diagonal is calculated along a circular arc that is tangent to the line bisecting the angle between the two segments at the point the two segments intersect and passes through the end point of the join. The linejoin is clipped perpendicular to this arc.",
+          "type": "value",
+          "value": "<number>"
         }
       ],
       "styleDeclaration": [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@webref/css",
   "description": "CSS definitions of the web platform",
-  "version": "6.0.0",
+  "version": "6.1.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/w3c/webref.git"
@@ -12,6 +12,6 @@
   "license": "MIT",
   "main": "index.js",
   "peerDependencies": {
-    "css-tree": "^2.2.1"
+    "css-tree": "^2.3.0"
   }
 }

package/scroll-animations.json

@@ -6,12 +6,12 @@
   "properties": [
     {
       "name": "scroll-timeline-name",
-      "value": "none | <custom-ident>",
+      "value": "none | <custom-ident>#",
       "initial": "none",
       "appliesTo": "scroll containers",
       "inherited": "no",
       "percentages": "n/a",
-      "computedValue": "the specified keyword",
+      "computedValue": "the keyword none or a list of <custom-ident>s",
       "canonicalOrder": "per grammar",
       "animationType": "not animatable",
       "styleDeclaration": [
@@ -21,12 +21,12 @@
     },
     {
       "name": "scroll-timeline-axis",
-      "value": "block | inline | vertical | horizontal",
+      "value": "[ block | inline | vertical | horizontal ]#",
       "initial": "block",
       "appliesTo": "scroll containers",
       "inherited": "no",
       "percentages": "n/a",
-      "computedValue": "the specified keyword",
+      "computedValue": "a list of the keywords specified",
       "canonicalOrder": "per grammar",
       "animationType": "not animatable",
       "values": [
@@ -74,7 +74,7 @@
     },
     {
       "name": "scroll-timeline",
-      "value": "<'scroll-timeline-name'> || <'scroll-timeline-axis'>",
+      "value": "[ <'scroll-timeline-name'> <'scroll-timeline-axis'>? ]#",
       "initial": "see individual properties",
       "appliesTo": "scroll containers",
       "inherited": "no",
@@ -186,7 +186,7 @@
     },
     {
       "name": "view-timeline",
-      "value": "[ <'view-timeline-name'> || <'view-timeline-axis'> ]#",
+      "value": "[ <'view-timeline-name'> <'view-timeline-axis'>? ]#",
       "initial": "see individual properties",
       "appliesTo": "all elements",
       "inherited": "see individual properties",
@@ -260,7 +260,7 @@
     },
     {
       "name": "animation-delay-end",
-      "value": "[ <time> | <timeline-range-name> <percentage> ]",
+      "value": "[ <time> | <timeline-range-name> <percentage> ]#",
       "initial": "0s",
       "appliesTo": "all elements",
       "inherited": "no",
@@ -293,7 +293,7 @@
   "values": [
     {
       "name": "scroll()",
-      "prose": "The scroll() functional notation can be used as a value of animation-timeline and specifies a scroll progress timeline. Its syntax is",
+      "prose": "The scroll() functional notation can be used as a <single-animation-timeline> value in animation-timeline and specifies a scroll progress timeline. Its syntax is",
       "type": "function",
       "value": "scroll( [ <scroller> || <axis> ]? )",
       "values": [
@@ -345,6 +345,12 @@
       "type": "type",
       "value": "root | nearest"
     },
+    {
+      "name": "view()",
+      "prose": "The view() functional notation can be used as a <single-animation-timeline> value in animation-timeline and specifies a view progress timeline in reference to the nearest ancestor scroll container. Its syntax is",
+      "type": "function",
+      "value": "view( [ <axis> || <'view-timeline-inset'> ]? )"
+    },
     {
       "name": "<timeline-range-name>",
       "prose": "A named timeline range is a named segment of an animation timeline. The start of the segment is represented as 0% progress through the range; the end of the segment is represented as 100% progress through the range. Multiple named timeline ranges can be attached to a given timeline, and multiple such ranges can overlap. For example, the contain range of a view progress timeline overlaps with its cover range. Named timeline ranges are represented by the <timeline-range-name> value type, which indicates a CSS identifier representing one of the predefined named timeline ranges.",

package/selectors.json

@@ -16,7 +16,7 @@
     },
     {
       "name": ":not()",
-      "prose": "The negation pseudo-class, :not(), is a functional pseudo-class taking a selector list as an argument. It represents an element that is not represented by its argument."
+      "prose": "The negation pseudo-class, :not(), is a functional pseudo-class taking a <complex-real-selector-list> as an argument. It represents an element that is not represented by its argument."
     },
     {
       "name": ":where()",
@@ -24,7 +24,7 @@
     },
     {
       "name": ":has()",
-      "prose": "The relational pseudo-class, :has(), is a functional pseudo-class taking a <forgiving-relative-selector-list> as an argument. It represents an element if any of the relative selectors would match at least one element when anchored against this element."
+      "prose": "The relational pseudo-class, :has(), is a functional pseudo-class taking a <relative-selector-list> as an argument. It represents an element if any of the relative selectors would match at least one element when anchored against this element."
     },
     {
       "name": ":defined",
@@ -68,23 +68,23 @@
     },
     {
       "name": ":hover",
-      "prose": "The :hover pseudo-class applies while the user designates an element with a pointing device, but does not necessarily activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element. Interactive user agents that cannot detect hovering due to hardware limitations (e.g., a pen device that does not detect hovering) are still conforming; the selector will simply never match in such a UA."
+      "prose": "The :hover pseudo-class applies while the user designates an element (or pseudo-element) with a pointing device, but does not necessarily activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element. Interactive user agents that cannot detect hovering due to hardware limitations (e.g., a pen device that does not detect hovering) are still conforming; the selector will simply never match in such a UA."
     },
     {
       "name": ":active",
-      "prose": "The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it. On systems with more than one mouse button, :active applies only to the primary or primary activation button (typically the \"left\" mouse button), and any aliases thereof."
+      "prose": "The :active pseudo-class applies while an element is being “activated” by the user, as defined by the host language; for example, while a hyperlink is being triggered."
     },
     {
       "name": ":focus",
-      "prose": "The :focus pseudo-class applies while an element has the focus (accepts keyboard or mouse events, or other forms of input)."
+      "prose": "The :focus pseudo-class applies while an element (or pseudo-element) has the focus (accepts keyboard or other forms of input)."
     },
     {
       "name": ":focus-visible",
-      "prose": "While the :focus pseudo-class always matches the currently-focused element, UAs only sometimes visibly indicate focus (such as by drawing a “focus ring”), instead using a variety of heuristics to visibly indicate the focus only when it would be most helpful to the user. The :focus-visible pseudo-class matches a focused element in these situations only, allowing authors to change the appearance of the focus indicator without changing when a focus indicator appears."
+      "prose": "While the :focus pseudo-class always matches the currently-focused element, UAs only sometimes visibly indicate focus (such as by drawing a “focus ring”), instead using a variety of heuristics to visibly indicate the focus only when it would be most helpful to the user. The :focus-visible pseudo-class matches a focused element (or pseudo-element) in these situations only, allowing authors to change the appearance of the focus indicator without changing when a focus indicator appears."
     },
     {
       "name": ":focus-within",
-      "prose": "The :focus-within pseudo-class applies to any element for which the :focus pseudo class applies as well as to an element whose descendant in the flat tree (including non-element nodes, such as text nodes) matches the conditions for matching :focus."
+      "prose": "The :focus-within pseudo-class applies to any element (or pseudo-element) for which the :focus pseudo class applies, as well as to an element (or pseudo-element) whose descendant in the flat tree (including non-element nodes, such as text nodes) matches the conditions for matching :focus."
     },
     {
       "name": ":current",
@@ -232,11 +232,11 @@
     },
     {
       "name": ":nth-child()",
-      "prose": "The :nth-child(An+B [of S]? ) pseudo-class notation represents elements that are among An+Bth elements from the list composed of their inclusive siblings that match the selector list S, which is a <complex-selector-list> parsed as a forgiving selector list. If S is omitted, it defaults to *|*."
+      "value": ":nth-child(An+B [of S]? )"
     },
     {
       "name": ":nth-last-child()",
-      "prose": "The :nth-last-child(An+B [of S]? ) pseudo-class notation represents elements that are among An+Bth elements from the list composed of their inclusive siblings that match the selector list S, counting backwards from the end. S is <complex-selector-list> parsed as a forgiving selector list. If S is omitted, it defaults to *|*."
+      "value": ":nth-last-child(An+B [of S]? )"
     },
     {
       "name": ":first-child",
@@ -252,11 +252,11 @@
     },
     {
       "name": ":nth-of-type()",
-      "prose": "The :nth-of-type(An+B) pseudo-class notation represents the same elements that would be matched by :nth-child(|An+B| of S), where S is a type selector and namespace prefix matching the element in question. For example, when considering whether an HTML img element matches this pseudo-class, the S in question is html|img (assuming an appropriate html namespace is declared)."
+      "value": ":nth-of-type(An+B)"
     },
     {
       "name": ":nth-last-of-type()",
-      "prose": "The :nth-last-of-type(An+B) pseudo-class notation represents the same elements that would be matched by :nth-last-child(|An+B| of S), where S is a type selector and namespace prefix matching the element in question. For example, when considering whether an HTML img element matches this pseudo-class, the S in question is html|img (assuming an appropriate html namespace is declared)."
+      "value": ":nth-last-of-type(An+B)"
     },
     {
       "name": ":first-of-type",
@@ -288,11 +288,11 @@
     },
     {
       "name": ":nth-col()",
-      "prose": "The :nth-col(An+B) pseudo-class notation represents a cell element belonging to a column that has An+B-1 columns before it, for any positive integer or zero value of n. Column membership is determined based on the semantics of the document language only: whether and how the elements are presented is not considered. If a cell element belongs to more than one column, it is represented by a selector indicating any of those columns."
+      "value": ":nth-col(An+B)"
     },
     {
       "name": ":nth-last-col()",
-      "prose": "The :nth-last-col(An+B) pseudo-class notation represents a cell element belonging to a column that has An+B-1 columns after it, for any positive integer or zero value of n. Column membership is determined based on the semantics of the document language only: whether and how the elements are presented is not considered. If a cell element belongs to more than one column, it is represented by a selector indicating any of those columns."
+      "value": ":nth-last-col(An+B)"
     }
   ],
   "values": [
@@ -306,6 +306,11 @@
       "type": "type",
       "value": "<complex-selector>#"
     },
+    {
+      "name": "<complex-real-selector-list>",
+      "type": "type",
+      "value": "<complex-real-selector>#"
+    },
     {
       "name": "<compound-selector-list>",
       "type": "type",
@@ -321,9 +326,24 @@
       "type": "type",
       "value": "<relative-selector>#"
     },
+    {
+      "name": "<relative-real-selector-list>",
+      "type": "type",
+      "value": "<relative-real-selector>#"
+    },
+    {
+      "name": "<complex-selector-unit>",
+      "type": "type",
+      "value": "[ <compound-selector>? <pseudo-compound-selector>* ]!"
+    },
     {
       "name": "<complex-selector>",
       "type": "type",
+      "value": "<complex-selector-unit> [ <combinator>? <complex-selector-unit> ]*"
+    },
+    {
+      "name": "<complex-real-selector>",
+      "type": "type",
       "value": "<compound-selector> [ <combinator>? <compound-selector> ]*"
     },
     {
@@ -331,10 +351,20 @@
       "type": "type",
       "value": "<combinator>? <complex-selector>"
     },
+    {
+      "name": "<relative-real-selector>",
+      "type": "type",
+      "value": "<combinator>? <complex-real-selector>"
+    },
     {
       "name": "<compound-selector>",
       "type": "type",
-      "value": "[ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!"
+      "value": "[ <type-selector>? <subclass-selector>* ]!"
+    },
+    {
+      "name": "<pseudo-compound-selector>",
+      "type": "type",
+      "value": "<pseudo-element-selector> <pseudo-class-selector>*"
     },
     {
       "name": "<simple-selector>",
@@ -410,11 +440,6 @@
       "name": "<forgiving-selector-list>",
       "prose": "The <forgiving-selector-list> production instead parses each selector in the list individually, simply ignoring ones that fail to parse, so the remaining selectors can still be used.",
       "type": "type"
-    },
-    {
-      "name": "<forgiving-relative-selector-list>",
-      "prose": "<forgiving-relative-selector-list> is identical to <forgiving-selector-list>, except it parses its components as <relative-selector> rather than <complex-selector>.",
-      "type": "type"
     }
   ]
 }