{"id":334774,"date":"2021-02-23T09:58:34","date_gmt":"2021-02-23T17:58:34","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=334774"},"modified":"2021-02-23T10:01:55","modified_gmt":"2021-02-23T18:01:55","slug":"past","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/p\/past\/","title":{"rendered":":past"},"content":{"rendered":"\n<p><code>:past<\/code> is a CSS pseudo-selector that matches elements that have passed along a timeline. Where you&#8217;ll see this come into play is largely with video subtitles created with WebVTT. When a subtitle is no longer the currently displayed text, it becomes a part of the past as far as the timeline is concerned, and <code>:past<\/code> allows us to match and style it accordingly.<\/p>\n\n\n\n<!--more-->\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">:past(p) {\n  opacity: .5;\n}<\/code><\/pre>\n\n\n\n<p>This is part of what the CSS Selectors Level 4 specification calls <a href=\"https:\/\/drafts.csswg.org\/selectors-4\/#time-pseudos\" rel=\"noopener\">&#8220;time dimensional&#8221; pseudo-classes<\/a>, which is currently in Working Draft status. That means the specification is in progress and could change between now and when it becomes a candidate recommendation.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-webvtt-crash-course\">WebVTT crash course<\/h3>\n\n\n<p>WebVTT is a format for creating subtitles, plotting them along a timeline with time ranges that define when each subtitle is displayed. This allows us to align subtitles with speech from media playback, such as videos.<\/p>\n\n\n\n<pre rel=\"WebVTT\" class=\"wp-block-csstricks-code-block language-jsx\" data-line=\"\"><code markup=\"tt\">WEBVTT\n\n00:00:00.000 --> 00:00:03.000\n- [Birds chirping]\n- It's a beautiful day!\n\n00:00:04.000 --> 00:00:07.000\n- [Creek trickling]\n- It is indeed!\n\n00:00:08.000 --> 00:00:10.000\n- Hello there!<\/code><\/pre>\n\n\n\n<p>As the video plays, WebVTT is running alongside it, displaying the subtitles that are defined within the time ranges. That means there&#8217;s a time dimension where we have past, current, and future states for the subtitles. After a subtitle finishes playing, it becomes part of the past. That&#8217;s how this all relates to the <code>:past<\/code> pseudo-element in CSS.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_VJJMZz\" src=\"\/\/codepen.io\/anon\/embed\/VJJMZz?height=650&amp;theme-id=1&amp;slug-hash=VJJMZz&amp;default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed VJJMZz\" title=\"CodePen Embed VJJMZz\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"explanation\">Khari McMillian published a <a href=\"https:\/\/css-tricks.com\/improving-video-accessibility-with-webvtt\/\">super thorough post on WebVTT<\/a>, including how to format it for the best accessibility.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-example\">Example<\/h3>\n\n\n<p>Given some sort of <code>&lt;video&gt;<\/code> in HTML:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;video controls>\n  &lt;source src=\"\/awesome-video.mp4\" type=\"video\/mp4\"\/>\n  &lt;track id=\"caption-track\" kind=\"subtitles\" srclang=\"en\" label=\"English\" default\/>\n&lt;\/video><\/code><\/pre>\n\n\n\n<p>&#8230;and a WebVTT file that defines subtitles along a timeline:<\/p>\n\n\n\n<pre rel=\"WebVTT\" class=\"wp-block-csstricks-code-block language-jsx\" data-line=\"\"><code markup=\"tt\">WEBVTT\n\n1\n00:00:00.000 --> 00:00:03.000\n&lt;i>This is a WebVTT demo.&lt;\/i>\n\n2\n00:00:03.000 --> 00:00:06.000\n&lt;b>WebVTT supports many different kinds of formatting.&lt;\/b>\n\n3\n00:00:06.000 --> 00:00:09.000\nThe text can be normal, like this.\n\n4\n00:00:09.000 --> 00:00:12.000 vertical:lr\nOr vertical.\n\n5\n00:00:12.000 --> 00:00:15.000 line:100%\nYou can move it vertically.\n\n6\n00:00:15.000 --> 00:00:18.000 vertical:rl line:0\nOr horizontally.\n\n7\n00:00:18.000 --> 00:00:21.000\nYou can even colorize captions.\n\n8\n00:00:21.000 --> 00:00:24.000 size:20\nOr change its size.\n\n9\n00:00:24.000 --> 00:00:27.000\n&lt;ruby>Ruby text is supported as well.&lt;rt>This text will be above the other text.\n\n10\n00:00:27.000 --> 00:00:30.000 size:40%\nSize can be adjusted as well.<\/code><\/pre>\n\n\n\n<p>&#8230;we can style subtitles that precede the one currently being displayed:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">video:past(p) {\n  background: rgba(0, 0, 0, .5);\n  color: #fff;\n  font-weight: 800;\n  padding: 1rem;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-browser-support\">Browser support<\/h3>\n\n\n<p>This is all very conceptual at the moment. The spec itself is in Working Draft status. That means <code>:past<\/code> has been defined, but there&#8217;s very little support for it and what we have now is subject to change by the time it becomes a recommendation candidate.<\/p>\n\n\n\n<figure class=\"wp-block-table ticss-2969c85c\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">IE<\/th><th class=\"has-text-align-center\" data-align=\"center\">Edge<\/th><th class=\"has-text-align-center\" data-align=\"center\">Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">no<\/td><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">16.1+<\/td><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table ticss-1679a4e0\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">Android Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Browser<\/th><th class=\"has-text-align-center\" data-align=\"center\">iOS Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera Mobile<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">7<\/td><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><\/tr><\/tbody><\/table><figcaption>Source: <a href=\"https:\/\/caniuse.com\/mdn-css_selectors_future\" rel=\"noopener\">caniuse<\/a><\/figcaption><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-more-information\">More information<\/h3>\n\n\n<ul><li><a href=\"https:\/\/drafts.csswg.org\/selectors-4\/#past-pseudo\" rel=\"noopener\">CSS Selectors Level 4 specification<\/a> (Working Draft)<\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/WebVTT_API\" rel=\"noopener\">Web Video Text Tracks Format<\/a> (MDN)<\/li><li><a href=\"https:\/\/css-tricks.com\/improving-video-accessibility-with-webvtt\/\">Improving Video Accessibility with WebVTT<\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-related-properties\">Related properties<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card \" id=\"mini-post-334774\">\n\n  <time datetime=\"2021-02-23\" title=\"Originally published Feb 23, 2021\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Aug 27, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/c\/current\/\">\n      :current    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/c\/current\/\" class=\"almanac-example\">\n      <code class=\"language-css\">:current { color: #fd5a1e; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/geoffgraham\/\" aria-label=\"Author page of Geoff Graham\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/geoffgraham\/\">\n      Geoff Graham    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-334774\">\n\n  <time datetime=\"2021-02-23\" title=\"Originally published Feb 23, 2021\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Feb 23, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/f\/future\/\">\n      :future    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/f\/future\/\" class=\"almanac-example\">\n      <code class=\"language-css\">:future(p) { opacity: .5; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/geoffgraham\/\" aria-label=\"Author page of Geoff Graham\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/geoffgraham\/\">\n      Geoff Graham    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n","protected":false},"excerpt":{"rendered":"<p>:past is a CSS pseudo-selector that matches elements that have passed along a timeline. Where you&#8217;ll see this come into play is largely with video subtitles created with WebVTT. When a subtitle is no longer the currently displayed text, it becomes a part of the past as far as the timeline is concerned, and :past [&hellip;]<\/p>\n","protected":false},"author":2508,"featured_media":0,"parent":14250,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":334702,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/c\/current\/","url_meta":{"origin":334774,"position":0},"title":":current","date":"February 23, 2021","format":false,"excerpt":":current is a CSS pseudo-selector that matches an element or an ancestor of an element that's currently in display. So, we can match items that have rendered on the screen like this: :current(p, ul); ...and that will select all currently displayed paragraphs and unordered lists. It's a lot like is()\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":334782,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/f\/future\/","url_meta":{"origin":334774,"position":1},"title":":future","date":"February 23, 2021","format":false,"excerpt":":future is a CSS pseudo-selector we can use to style upcoming elements during media playback. Think subtitles in videos. We can use this to style subtitles that are coming up next to separate them visually from the currently displayed subtitle and past subtitles. :future(p) { opacity: .5; } This is\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":367143,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/f\/first\/","url_meta":{"origin":334774,"position":2},"title":":first","date":"July 28, 2022","format":false,"excerpt":"The :first CSS pseudo-class is used with the @page at-rule to select the first page in a printed document. It\u2019s very similar to the way :first-child selector works to target the first child element in a parent container, but instead selects the first printed page in a series of pages\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":372350,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/l\/left\/","url_meta":{"origin":334774,"position":3},"title":":left","date":"August 8, 2022","format":false,"excerpt":"The :left pseudo-class in CSS is used with the @page at-rule to select all left-hand pages in a print document that contains multiple pages. That's handy for setting margins on double-sided pages so that the pages on the \"left\" side have one margin and the pages on the right have\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":372511,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/r\/right\/","url_meta":{"origin":334774,"position":4},"title":":right","date":"August 15, 2022","format":false,"excerpt":"The :right pseudo-class in CSS is used with the @page at-rule to select all right-hand pages in a print document that contains multiple pages. That's handy for setting margins on double-sided pages so that the pages on the \"right\" side have one margin and the pages on the left have\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":372892,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/f\/file-selector-button\/","url_meta":{"origin":334774,"position":5},"title":"::file-selector-button","date":"August 30, 2022","format":false,"excerpt":"The ::file-selector-button in CSS is a pseudo-element that selects <input type=\"file\"> in HTML. input::file-selector-button { background-color: #f8a100; } You've undoubtedly come across file upload inputs \u2014 they're very common, especially for including file attachments in a form, like a PDF or image. CodePen Embed Fallback Syntax selector::file-selector-button { } You\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/334774"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=334774"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/334774\/revisions"}],"predecessor-version":[{"id":335269,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/334774\/revisions\/335269"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14250"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=334774"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=334774"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}