{"id":2302,"date":"2021-12-22T14:38:56","date_gmt":"2021-12-22T14:38:56","guid":{"rendered":"https:\/\/blog.embold.io\/?p=2302"},"modified":"2021-12-22T14:46:53","modified_gmt":"2021-12-22T14:46:53","slug":"how-to-apply-focus-to-the-parent-element-when-a-child-element-is-in-focus","status":"publish","type":"post","link":"https:\/\/blog.embold.io\/de\/how-to-apply-focus-to-the-parent-element-when-a-child-element-is-in-focus\/","title":{"rendered":"How to apply focus to the parent element when a child element is in focus?"},"content":{"rendered":"\n<p>Selecting parent elements based on the existence or state of child elements has always been a difficult task in CSS. But, the <code>:focus-within<\/code> pseudo selector lets us do just that. <\/p>\n\n\n\n<p>The <code>:focus-within<\/code> pseudo selector lets us apply focus styles to an element which contains focusable child elements, whenever those child elements are in focus. Examples of focusable elements are [inputs], [selects], [buttons], [textarea] and [a].<\/p>\n\n\n\n<p>A scenario where this could be useful is when you have an input and button grouped like so:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/LFU3M4vWQVdJK4x-otVwcMfIjUOicItqazEe2iptMlcUSDnI-rq7hynzgPEO6vn0RYqv5wtNDCQ5A_de4l2aGaeamJce9F-MhkqDf8upWnTJsBziAePaFecvBZ2dlEY6dlp48Hnf\" alt=\"\" \/><\/figure>\n\n\n\n<p>Let\u2019s assume that below is the enabling code:\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"462\" height=\"470\" src=\"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/Parent-blog-html.png\" alt=\"\" class=\"wp-image-2335\" \/><\/figure>\n\n\n\n<p>Since both the input and search buttons are functioning as one unit in this instance, It would be a bad design to focus only on the input when a user clicks on it. <\/p>\n\n\n\n<p>To rectify, we\u2019ll disable the default browser outline focus style for the input and button, and then apply focus on the parent element, which is the input wrapper. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.input-wrapper input:focus,\n.input-wrapper button:focus {\n  outline: 0;\n}\n\n.input-wrapper:focus-within {\n  box-shadow: 0px 0px 10px 0px black;\n  transition: box-shadow 250ms ease-in;\n}<\/code><\/pre>\n\n\n\n<p> For a full demo, see\u00a0<a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/lindaflex\/pen\/powwLBv\">codepen<\/a>. <\/p>\n\n\n<p><span style=\"color: #ff0000\">Blog Credits: Linda Ikechukwu<\/span><\/p>\n<div>\u201d Linda Ikechukwu is a Frontend Developer turned Technical Content Consultant. She enjoys strategizing on and creating content that helps tech startups connect with their target audience. \u201c<\/div>\n<div><img decoding=\"async\" loading=\"lazy\" class=\"\" src=\"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/09\/Linda-headshot.jpeg\" width=\"152\" height=\"213\" \/><\/div>","protected":false},"excerpt":{"rendered":"<p>Selecting parent elements based on the existence or state of child elements has always been a difficult task in CSS. But, the :focus-within pseudo selector lets us do just that.&hellip;<\/p>\n","protected":false},"author":10,"featured_media":2332,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[7],"tags":[266,189,267,265],"better_featured_image":{"id":2332,"alt_text":"","caption":"","description":"","media_type":"image","media_details":{"width":1800,"height":923,"file":"2021\/12\/parental-element-1.jpg","sizes":{"thumbnail":{"file":"parental-element-1-150x150.jpg","width":150,"height":150,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/parental-element-1-150x150.jpg"},"medium_large":{"file":"parental-element-1-768x394.jpg","width":768,"height":394,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/parental-element-1-768x394.jpg"},"penci-full-thumb":{"file":"parental-element-1-1170x600.jpg","width":1170,"height":600,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/parental-element-1-1170x600.jpg"},"penci-slider-thumb":{"file":"parental-element-1-1170x663.jpg","width":1170,"height":663,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/parental-element-1-1170x663.jpg"},"penci-magazine-slider":{"file":"parental-element-1-780x516.jpg","width":780,"height":516,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/parental-element-1-780x516.jpg"},"penci-slider-full-thumb":{"file":"parental-element-1-1800x800.jpg","width":1800,"height":800,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/parental-element-1-1800x800.jpg"},"penci-thumb":{"file":"parental-element-1-585x390.jpg","width":585,"height":390,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/parental-element-1-585x390.jpg"},"penci-masonry-thumb":{"file":"parental-element-1-585x300.jpg","width":585,"height":300,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/parental-element-1-585x300.jpg"},"penci-thumb-square":{"file":"parental-element-1-585x585.jpg","width":585,"height":585,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/parental-element-1-585x585.jpg"},"penci-thumb-vertical":{"file":"parental-element-1-480x650.jpg","width":480,"height":650,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/parental-element-1-480x650.jpg"},"penci-thumb-small":{"file":"parental-element-1-263x175.jpg","width":263,"height":175,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/parental-element-1-263x175.jpg"},"jr_insta_square":{"file":"parental-element-1-640x640.jpg","width":640,"height":640,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/parental-element-1-640x640.jpg"}},"image_meta":{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0","keywords":[]}},"post":2302,"source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/parental-element-1.jpg"},"translation":{"provider":"WPGlobus","version":"2.10.8","language":"de","enabled_languages":["en","es","de","fr","ru"],"languages":{"en":{"title":true,"content":true,"excerpt":false},"es":{"title":false,"content":false,"excerpt":false},"de":{"title":false,"content":false,"excerpt":false},"fr":{"title":false,"content":false,"excerpt":false},"ru":{"title":false,"content":false,"excerpt":false}}},"_links":{"self":[{"href":"https:\/\/blog.embold.io\/de\/wp-json\/wp\/v2\/posts\/2302"}],"collection":[{"href":"https:\/\/blog.embold.io\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.embold.io\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.embold.io\/de\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.embold.io\/de\/wp-json\/wp\/v2\/comments?post=2302"}],"version-history":[{"count":7,"href":"https:\/\/blog.embold.io\/de\/wp-json\/wp\/v2\/posts\/2302\/revisions"}],"predecessor-version":[{"id":2339,"href":"https:\/\/blog.embold.io\/de\/wp-json\/wp\/v2\/posts\/2302\/revisions\/2339"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.embold.io\/de\/wp-json\/wp\/v2\/media\/2332"}],"wp:attachment":[{"href":"https:\/\/blog.embold.io\/de\/wp-json\/wp\/v2\/media?parent=2302"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.embold.io\/de\/wp-json\/wp\/v2\/categories?post=2302"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.embold.io\/de\/wp-json\/wp\/v2\/tags?post=2302"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}