CSS3 Wishlist

Created 2009 March 13th, Updated 2011 April 28.

:scope and :andScope

:scope would create a pseudo element to wrap its next siblings until it encounters an element like itself. :andScope does the same but includes the element in question.

<h2 id="nice">Sub Heading</h2>
<p>Para 1</p>
<p>Para 2</p>
<h2>Sub Heading</h2>
<p>Para 3</p>
<p>Para 4</p>

:scope

<h2 id="nice">Sub Heading</h2>
<p>Para 1</p>
<p>Para 2</p>
<h2>Sub Heading</h2>
<p>Para 3</p>
<p>Para 4</p>

#nice:scope being the selector for the above

:andScope

<h2 id="nice">Sub Heading</h2>
<p>Para 1</p>
<p>Para 2</p>
<h2>Sub Heading</h2>
<p>Para 3</p>
<p>Para 4</p>

#nice:andScope being the selector for the above

As it stands with CSS, to indent the elements within the scope of h2#nice would be done by modifying the HTML and applying CSS to the added elements.

My wish is that the HTML could be left untouched and the following CSS be used instead:

#nice:scope {margin-left:24px;}

The margin is applied to a pseudo element that wraps Para 1 and Para 2.

#nice:andScope {background:#dee;padding:12px;}

The background and padding is applied to a psuedo element that wraps h2#nice, Para 1 and Para 2.