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

View this thread on: hive.blog | peakd.com | ecency.com

css · @thedevchick · Sep 14 '17 (edited)

$14.70

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

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.

<hr>

## The Code

### HTML
<div class="pull-left">
https://steemitimages.com/DQmQErNhtgaJPDi3Aqnwr7VAki3MZFbxJfsN3S9LAdNvJmE/Screen%20Shot%202017-09-14%20at%2012.32.42%20AM.png
</div>


```
<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>
```

</div>

<hr>

### CSS

<div class="pull-left">

![Screen Shot 2017-09-14 at 1.55.17 PM.png](https://steemitimages.com/DQmX13VHFLx3QA9HvsSjdkY7jWN8PQnk3LYvM4yUhrKuntB/Screen%20Shot%202017-09-14%20at%201.55.17%20PM.png)

</div>

```
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;
}
```

<hr>

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:

<div class="pull-left">

### Before Focus
![Screen Shot 2017-09-14 at 2.01.26 PM.png](https://steemitimages.com/DQmePUY7QMhoYi6JZ61msNhruAsUyRcfTZ4MDHBUuSt5PwZ/Screen%20Shot%202017-09-14%20at%202.01.26%20PM.png)

</div>

<div class="pull-right">

### After Focus
![Screen Shot 2017-09-14 at 2.01.41 PM.png](https://steemitimages.com/DQmQa2N97DVRMzKC1rU62HjXkqGNBvJm3DfAu5maNYbgbLZ/Screen%20Shot%202017-09-14%20at%202.01.41%20PM.png)

</div>

<hr>

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+

👍 minnowbooster, inertia, craftech, randowhale0, cub1, sasha.shade, haleyaerith, remlaps1, cmp2020, mkt, lemonchum, raphaelom, lisa.palmer, creatid, coldbluelight, thedevchick, resheep, cryrac, letc, upgoat, randowhaletrail, theboogie, nrg, remlaps2, creationsofgod, miyata1987

`author`	thedevchick
`permlink`	css-targeting-the-parent-or-other-ancestor-of-a-focused-element-using-focus-within
`category`	css
`json_metadata`	{"tags":["css","webdev","programming","usability","steemiteducation"],"image":["https://steemitimages.com/DQmQErNhtgaJPDi3Aqnwr7VAki3MZFbxJfsN3S9LAdNvJmE/Screen%20Shot%202017-09-14%20at%2012.32.42%20AM.png","https://steemitimages.com/DQmX13VHFLx3QA9HvsSjdkY7jWN8PQnk3LYvM4yUhrKuntB/Screen%20Shot%202017-09-14%20at%201.55.17%20PM.png","https://steemitimages.com/DQmePUY7QMhoYi6JZ61msNhruAsUyRcfTZ4MDHBUuSt5PwZ/Screen%20Shot%202017-09-14%20at%202.01.26%20PM.png","https://steemitimages.com/DQmQa2N97DVRMzKC1rU62HjXkqGNBvJm3DfAu5maNYbgbLZ/Screen%20Shot%202017-09-14%20at%202.01.41%20PM.png"],"app":"steemit/0.1","format":"markdown"}
`created`	2017-09-14 06:07:36
`last_update`	2017-09-14 11:43:30
`depth`	0
`children`	5
`last_payout`	2017-09-21 06:07:36
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	11.096 HBD
`curator_payout_value`	3.600 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	4,112
`author_reputation`	1,011,783,888,537
`root_title`	"[CSS] - Targeting the parent or other ancestor of a focused element using "focus-within"."
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	14,832,168
`net_rshares`	5,108,680,279,031
`author_curate_reward`	""

properties (23)vote details (26)

voter	rshares	pct
raphaelom	1,726,890,555	100%
inertia	819,380,891,171	100%
cmp2020	13,801,482,831	19%
letc	674,213,319	10%
remlaps1	14,391,652,843	19%
cub1	37,333,892,818	19%
remlaps2	309,822,292	100%
lisa.palmer	1,369,208,700	19%
nrg	377,956,134	1.11%
mkt	10,877,193,740	100%
sasha.shade	35,671,401,893	100%
haleyaerith	18,346,123,352	100%
minnowbooster	3,116,135,959,794	5%
lemonchum	4,056,261,764	100%
craftech	798,055,870,276	100%
upgoat	670,374,915	5%
resheep	895,814,457	5%
randowhaletrail	644,053,218	0.5%
theboogie	620,096,586	100%
miyata1987	51,828,984	100%
creationsofgod	154,539,452	100%
creatid	1,143,216,709	100%
coldbluelight	1,137,854,485	100%
cryrac	795,025,537	100%
thedevchick	1,060,660,988	100%
randowhale0	228,997,992,218	1.51%

@minnowbooster · Sep 20 '17

@minnowbooster upvoted this post!

![@thedevchick got you a $7.99 @minnowbooster upgoat, nice!](http://minnowshares.net/upgoat/?user=thedevchick&receiver=thedevchick&value=7.99&hash=848)
*@thedevchick got you a $7.99 @minnowbooster upgoat, nice! (Image: pixabay.com)*
---
[Want a boost? Click here to read more!](https://steemit.com/minnowbooster/@minnowbooster/6rt2mn-introducing-minnowbooster-beta)

properties (22)

`author`	minnowbooster
`permlink`	comment-1505895498564
`category`	css
`json_metadata`	""
`created`	2017-09-20 08:18:18
`last_update`	2017-09-20 08:18:18
`depth`	1
`children`	0
`last_payout`	2017-09-27 08:18:18
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	365
`author_reputation`	230,546,282,483,083
`root_title`	"[CSS] - Targeting the parent or other ancestor of a focused element using "focus-within"."
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	15,401,575
`net_rshares`	0

@mkt · Sep 14 '17

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! :)

👍 thedevchick

`author`	mkt
`permlink`	re-thedevchick-css-targeting-the-parent-or-other-ancestor-of-a-focused-element-using-focus-within-20170914t105151692z
`category`	css
`json_metadata`	{"tags":["css"],"links":["http://caniuse.com/#feat=css-focus-within"],"app":"steemit/0.1"}
`created`	2017-09-14 10:51:54
`last_update`	2017-09-14 10:51:54
`depth`	1
`children`	2
`last_payout`	2017-09-21 10:51:54
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	225
`author_reputation`	45,513,283,519,678
`root_title`	"[CSS] - Targeting the parent or other ancestor of a focused element using "focus-within"."
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	14,851,533
`net_rshares`	1,050,054,379
`author_curate_reward`	""

properties (23)vote details (1)

voter	weight	wgt%	rshares	pct	time
thedevchick	0 B		1,050,054,379	100%

@thedevchick · Sep 14 '17

$2.40

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

👍 craftech, sasha.shade, thedevchick

`author`	thedevchick
`permlink`	re-mkt-re-thedevchick-css-targeting-the-parent-or-other-ancestor-of-a-focused-element-using-focus-within-20170914t114217446z
`category`	css
`json_metadata`	{"tags":["css"],"app":"steemit/0.1"}
`created`	2017-09-14 11:42:18
`last_update`	2017-09-14 11:42:18
`depth`	2
`children`	1
`last_payout`	2017-09-21 11:42:18
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	1.827 HBD
`curator_payout_value`	0.577 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	119
`author_reputation`	1,011,783,888,537
`root_title`	"[CSS] - Targeting the parent or other ancestor of a focused element using "focus-within"."
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	14,855,022
`net_rshares`	835,808,101,423
`author_curate_reward`	""

properties (23)vote details (3)

voter	rshares	pct
sasha.shade	35,493,741,978	100%
craftech	799,285,518,286	100%
thedevchick	1,028,841,159	100%

@mkt · Sep 14 '17

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. :)

properties (22)

`author`	mkt
`permlink`	re-thedevchick-re-mkt-re-thedevchick-css-targeting-the-parent-or-other-ancestor-of-a-focused-element-using-focus-within-20170914t114410869z
`category`	css
`json_metadata`	{"tags":["css"],"app":"steemit/0.1"}
`created`	2017-09-14 11:44:06
`last_update`	2017-09-14 11:44:06
`depth`	3
`children`	0
`last_payout`	2017-09-21 11:44:06
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	203
`author_reputation`	45,513,283,519,678
`root_title`	"[CSS] - Targeting the parent or other ancestor of a focused element using "focus-within"."
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	14,855,136
`net_rshares`	0

@steemitboard · Sep 15 '17

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

[![](https://steemitimages.com/70x80/http://steemitboard.com/notifications/commented.png)](http://steemitboard.com/@thedevchick) 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](https://steemit.com/@steemitboard)

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](https://steemit.com/steemitboard/@steemitboard/http-i-cubeupload-com-7ciqeo-png)!

properties (22)

`author`	steemitboard
`permlink`	steemitboard-notify-thedevchick-20170915t032539000z
`category`	css
`json_metadata`	{"image":["https://steemitboard.com/img/notifications.png"]}
`created`	2017-09-15 03:25:39
`last_update`	2017-09-15 03:25:39
`depth`	1
`children`	0
`last_payout`	2017-09-22 03:25:39
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	706
`author_reputation`	38,975,615,169,260
`root_title`	"[CSS] - Targeting the parent or other ancestor of a focused element using "focus-within"."
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	14,925,920
`net_rshares`	0