{"id":256635,"date":"2017-07-29T07:40:44","date_gmt":"2017-07-29T14:40:44","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=256635"},"modified":"2021-09-15T20:52:47","modified_gmt":"2021-09-16T03:52:47","slug":"focus-within","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/f\/focus-within\/","title":{"rendered":":focus-within"},"content":{"rendered":"\n<p>The <code>:focus-within<\/code> pseudo-selector in CSS is a bit unusual, although well-named and rather intuitive. It selects an element if that element contains any children that have <code>:focus<\/code>.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">form:focus-within {\n  background: lightyellow;\n}<\/code><\/pre>\n\n\n\n<p>Which works like this&#8230;<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;!-- this form will be selected -->\n&lt;form action=\"#\">\n\n  &lt;!-- when this input is in focus -->\n  &lt;input type=\"text\">\n\n&lt;\/form><\/code><\/pre>\n\n\n\n<!--more-->\n\n\n\n<p>I said &#8220;unusual&#8221; because it&#8217;s not common in CSS to be able to select a parent element based on the existence or state of child elements. Sure is useful though!<\/p>\n\n\n\n<p>Here&#8217;s an example form to try it on:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_RZraBp\" src=\"\/\/codepen.io\/anon\/embed\/RZraBp?height=450&amp;theme-id=1&amp;slug-hash=RZraBp&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed RZraBp\" title=\"CodePen Embed RZraBp\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Note that example uses <code>:focus-within<\/code> on the entire form <em>and<\/em> on interior input-wrapping <code>&lt;div><\/code>s.<\/p>\n\n\n\n<p>Any way that a child element can become focused will trigger :focus-within. For example, if an element has a\u00a0<code>tab-index<\/code>\u00a0or\u00a0<code>contenteditable<\/code>\u00a0attribute, then it is a focusable element, and will work. It also doesn\u2019t matter how the element became focused. It could be clicked or tapped, it could have been tabbed to or navigated to by some other means, or even focused through JavaScript, like\u2026<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">document.querySelector(\"input\").focus();<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-browser-support\">Browser Support<\/h3>\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=css-focus-within\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">60<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">52<\/span><\/td><td class=\"n nope\" title=\"IE - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">79<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">10.1<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">125<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">10.3<\/span><\/td><\/tr><\/table><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The :focus-within pseudo-selector in CSS is a bit unusual, although well-named and rather intuitive. It selects an element if that element contains any children that have :focus. Which works like this&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":14182,"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":[1277,595],"acf":[],"jetpack-related-posts":[{"id":194885,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/object-position\/","url_meta":{"origin":256635,"position":0},"title":"object-position","date":"February 3, 2015","format":false,"excerpt":"The CSS property object-position is used to align any selected replaced element (e.g., an <img>) within the box that contains it. img { object-position: right bottom; } An <img> element will align to bottom-right edge of its parent container with object-position: right bottom;. While it\u2019s probably most common to see\u2026","rel":"","context":"With 8 comments","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/object-fit-element-container.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":281230,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/f\/focus-visible\/","url_meta":{"origin":256635,"position":1},"title":":focus-visible","date":"January 11, 2019","format":false,"excerpt":"The :focus-visible pseudo-class (also known as the \"Focus-Indicated\" pseudo-class) is a native CSS way to style elements that: Are in focusNeed a visible indicator to show focus (more on this later) :focus-visible is used similarly to :focus: to bring attention to the element that currently has the focus. .element:focus-visible {\u2026","rel":"","context":"In \":focus-visible\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/focus-visible.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":14188,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/f\/focus\/","url_meta":{"origin":256635,"position":2},"title":":focus","date":"September 6, 2011","format":false,"excerpt":"The :focus pseudo class in CSS is used for styling an element that is currently targeted by the keyboard, or activated by the mouse. Here is an example: textarea:focus { background: pink; } CodePen Embed Fallback Any element (most commonly\u00a0<input>s and\u00a0<textarea>s) are in \"focus\" when they are selected and ready\u2026","rel":"","context":"With 33 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":191767,"url":"https:\/\/css-tricks.com\/snippets\/sass\/simplifying-contexts-events\/","url_meta":{"origin":256635,"position":3},"title":"Simplifying Contexts and Events","date":"December 29, 2014","format":false,"excerpt":"Sass can somehow be a little of a black box, especially for young developers: you put some things in, you get some things out. Take the selector reference (&) for instance, it is a bit scary. That being said, it doesn't have to be like this. We can make its\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3770,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/smooth-scrolling\/","url_meta":{"origin":256635,"position":4},"title":"Smooth Scrolling","date":"September 4, 2009","format":false,"excerpt":"Hey! Before you go too far down the rabbit hole of JavaScript-based smooth scrolling, know that there is a native CSS feature for this: scroll-behavior. html { scroll-behavior: smooth; } And before you reach for a library like jQuery to help, there is also a native JavaScript version of smooth\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":346652,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/outline-style\/","url_meta":{"origin":256635,"position":5},"title":"outline-style","date":"August 16, 2021","format":false,"excerpt":"The outline-style CSS property specifies the style of an element's outline. What\u2019s an outline? An outline is a line that is drawn around elements \u2014 outside the border edge \u2014 that is used for accessibility or decoration purposes when that element is in focus. button { outline-style: dashed; } outline-style\u2026","rel":"","context":"In \"outline\"","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\/256635"}],"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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=256635"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/256635\/revisions"}],"predecessor-version":[{"id":352128,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/256635\/revisions\/352128"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14182"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=256635"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=256635"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}