Seth Aldridge: the Theory of Advanced Scoping

This is from our dear friend Seth’s BlogĀ 

Advanced Scoping is a concept I came up with one night while trying to get multiple actions to take place when I trigger one action using only CSS. I will start by saying this is just a concept and does not actually work in CSS 2.1, however, it would make a great addition to CSS 3 whenever that comes out. Here is Advanced Scoping in a nut shell:

I have a form and when I take focus of an element I want to trigger a highlight that will give my label, input, and span a background color without having to use any JavaScript. Here is some example code:

<p>
<label for="first_name">First Name</label>
<input type="text" id="first_name" name="first_name" />
</p>

And here is Advanced Scoping:

p [{ background-color:#ccc; }] input:focus;

It’s fairly simple to explain, when the input takes focus, or when the user clicks inside the text box, it will activate the background-color:#ccc.

Leave a Reply