{"id":334702,"date":"2021-02-23T09:58:07","date_gmt":"2021-02-23T17:58:07","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=334702"},"modified":"2021-08-27T10:09:24","modified_gmt":"2021-08-27T17:09:24","slug":"current","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/c\/current\/","title":{"rendered":":current"},"content":{"rendered":"\n<p><code>:current<\/code> is a CSS pseudo-selector that matches an element or an ancestor of an element that&#8217;s currently in display. So, we can match items that have rendered on the screen like this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">:current(p, ul);<\/code><\/pre>\n\n\n\n<p>&#8230;and that will select all currently displayed paragraphs and unordered lists. It&#8217;s a lot like <code><a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/i\/is\/\">is()<\/a><\/code> in that sense. But what makes this pseudo-selector super cool is that it&#8217;s 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 are designed to match elements along a timeline, such as subtitles in a video.<\/p>\n\n\n\n<!--more-->\n\n\n<h3 class=\"wp-block-heading\" id=\"h-meet-webvtt\">Meet WebVTT<\/h3>\n\n\n<p>That&#8217;s what&#8217;s used to render subtitles in a video. And it does that by defining a timeline that pairs subtitles with time ranges so they align with the speech that&#8217;s playing.<\/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. Upcoming subtitles? Yep, they&#8217;re in the future.<\/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\n<p>But what we care about are the ones that are <em>currently<\/em> playing. That&#8217;s what <code>:current<\/code> selects. It&#8217;s worth noting here that a WebVTT files without a timeline cannot be styled by these time-dimensional pseudos.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-current-selects-the-subtitle-that-is-currently-being-displayed\"><code>:current<\/code> selects the subtitle that is currently being displayed<\/h2>\n\n\n<p>That&#8217;s right, as simple as that. We might want to punch up the style for subtitles that are on display so they stand out from past and future subtitles.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">video:current {\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-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 the paragraphs of a subtitle that is 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:current(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>:current<\/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\/#the-current-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-334702\">\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<article class=\"in-article-card \" id=\"mini-post-334702\">\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\/p\/past\/\">\n      :past    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/p\/past\/\" class=\"almanac-example\">\n      <code class=\"language-css\">:past(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\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>:current is a CSS pseudo-selector that matches an element or an ancestor of an element that&#8217;s currently in display. So, we can match items that have rendered on the screen like this: &#8230;and that will select all currently displayed paragraphs and unordered lists. It&#8217;s a lot like is() in that sense. But what makes this [&hellip;]<\/p>\n","protected":false},"author":2508,"featured_media":0,"parent":14160,"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":148811,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/06-jquery-selector-extensions\/","url_meta":{"origin":334702,"position":0},"title":"#06: jQuery Selector Extensions","date":"September 2, 2013","format":false,"excerpt":"jQuery can select anything that CSS3 can select. But it doesn't stop there! There are a number of additional selectors that jQuery offers (via the Sizzle selector engine) that are pretty darn useful sometimes. For instance, CSS has attribute selectors that allow you to select an element based on any\u2026","rel":"","context":"With 5 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":372892,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/f\/file-selector-button\/","url_meta":{"origin":334702,"position":1},"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":[]},{"id":375761,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/h\/has\/","url_meta":{"origin":334702,"position":2},"title":":has()","date":"December 19, 2022","format":false,"excerpt":"The CSS :has() pseudo-class selects elements that contain other elements that match the selector passed into its arguments. It's often referred to as \"the parent selector\" because of its ability to select a parent element based on the child elements it contains and apply styles to the parent. \/* Select\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":339498,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/e\/empty\/","url_meta":{"origin":334702,"position":3},"title":":empty","date":"April 27, 2021","format":false,"excerpt":"The CSS :empty pseudo-class selects any element that does not contain children for a given selector. \/* Changes the background color of every empty section element *\/ section:empty { background-color: tomato; } If we were to run that code on a page, the CSS would look for a <section> element\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14238,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/n\/not\/","url_meta":{"origin":334702,"position":4},"title":":not","date":"September 6, 2011","format":false,"excerpt":"The :not() property in CSS is a negation pseudo class and accepts a simple selector or a selector list as an argument. It matches an element that is not represented by the argument. The passed argument may not contain additional selectors or any pseudo-element selectors. The ability to use a\u2026","rel":"","context":"In \":not\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/not-slide.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":166069,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/r\/read-write-read\/","url_meta":{"origin":334702,"position":5},"title":":read-write \/ :read-only","date":"March 17, 2014","format":false,"excerpt":"The :read-write and :read-only selectors are two mutability pseudo-classes aiming at making form styling easier based on disabled, readonly and contenteditable HTML Attributes. While the browser support is not that bad, the various implementations are quite wonky. According to the official CSS Specifications, a :read-write selector will match an element\u2026","rel":"","context":"In \":read-only\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/334702"}],"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=334702"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/334702\/revisions"}],"predecessor-version":[{"id":350784,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/334702\/revisions\/350784"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14160"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=334702"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=334702"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}