[CSS] - Targeting the parent or other ancestor of a focused element using "focus-within".

in #css • 7 years ago (edited)

Usability of a website or application can make-or-break it. An application that is difficult to use, no matter how powerful, will often be abandoned by all but the most stubborn of users.

Similarly, a website or application that has amazing usability and provides a great user experience, will often be more highly adapted and used than a competing site/app that is more powerful but lacks in usability. Due to that, it is obviously highly important for you to put a lot of effort and focus on giving the users of the app/site the best experience possible.

The focus-within pseudo selector is one of those properties that helps us to increase usability and enhance the experience of the users of our app or site.

focus-within allows you to select the parent or ancestor of any item that is focused upon. That's right, this selector, unlike most others selectors allows you to select an ancestor! That's fantastic and opens up many creative opportunities for us.

The Code

HTML

<body>
    <form>
        <div class="field-group">
            <label for="profilePicture">
                Profile Picture Url
            </label>
            <input type="url" name="profilePicture">
        </div>
        <div class="field-group">
            <label for="coverImage">
                Cover Image URL
            </label>
            <input type="url" name="coverImage">
        </div>
        <div class="field-group">
            <label for="displayName">
                Display Name
            </label>
            <input type="text" name="displayName">
        </div>
        <div class="field-group">
            <label for="about">
                About
            </label>
            <input type="text" name="about">
        </div>
        <div class="field-group">
            <label for="location">
                Location
            </label>
            <input type="text" name="location">
        </div>
        <div class="field-group">
            <label for="website">
                Website
            </label>
            <input type="url" name="website">
        </div>
    </form>
</body>

CSS

Screen Shot 2017-09-14 at 1.55.17 PM.png

form{
    width: 500px;
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       padding: 50px;
}
.field-group{
    width: 100%;
    float: left;
    margin: 10px 0;
    padding: 20px;
    box-sizing: border-box;
}
label{
    width: 100%;
    float: left;
    margin-bottom: 5px;
}
input{
    float: left;
    width: 100%;
    padding: 10px 5px;
    border-radius: 3px;
    box-sizing: border-box;
}
form:focus-within {
    background: #ccc;
}
.field-group:focus-within {
    background: #333;
    color: #fff;
}

You can essentially ignore most of the CSS That was just put there so the demo did not look completely awful. The only important parts here are the last few lines where we see the :focus-within selector.

As you can see we set the background of the form to be a light grey when any of it's children are focused upon. At the same time, we also set the specific field-group to also change background to a dark grey with white text when any of it's children are selected.

The Result is this:

Before Focus

Screen Shot 2017-09-14 at 2.01.26 PM.png

After Focus

Screen Shot 2017-09-14 at 2.01.41 PM.png

As I'm sure you've already decided, this small little change has increased usability and the user experience quite a bit even for this short form. Start using it today in your websites and apps!

Browser Support

The :focus-within selector is supported in the following browsers:

  • Firefox 54+
  • Chrome 60+
  • Safari 10.1+
  • Opera 47+
  • iOS Safari 10.3+
  • Chrome for Android 59+
#webdev #programming #usability #steemiteducation
7 years ago in #css by
$14.70
  • Past Payouts $14.70, 0.00 TRX
  • - Author $11.10, 0.00 TRX
  • - Curators $3.60, 0.00 TRX
26 votes
Reply 5
Sort:  
  • Trending
    • [-]
     7 years ago 

    Here's the detailed browser support table: http://caniuse.com/#feat=css-focus-within
    Maybe you can include this in your next tutorial. Anyway... Thanks again for introducing me to a new CSS feature I didn't know of before! :)

    [-]
     7 years ago 

    Glad you keep on learning new things! Thanks for reading them and responding it gives me motivation to keep on posting!

    $2.40
    • Past Payouts $2.40, 0.00 TRX
    • - Author $1.83, 0.00 TRX
    • - Curators $0.58, 0.00 TRX
    3 votes
    Reply
    [-]
     7 years ago 

    I know, it's sometimes hard to keep motivation up. In the beginning it feels like noone cares about your content anyway... but the longer you stay in the game the more people will recognize your work. :)

    $0.00
      Reply
      [-]
       7 years ago 

      Congratulations @thedevchick! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

      Award for the number of comments received

      Click on any badge to view your own Board of Honor on SteemitBoard.
      For more information about SteemitBoard, click here

      If you no longer want to receive notifications, reply to this comment with the word STOP

      By upvoting this notification, you can help all Steemit users. Learn how here!

      $0.00
        Reply