CSS34
I know what you're thinking. "What!? We barely started using 3! I don't even have all those snazzy transitions in my geocities blog."
Easy now, buster. The CSS4 Public Draft was last created by the W3C on the 29th of September, 2011, barely three months prior to this blog post. We probably won't see this cool stuff in action for a number of years. In fact, CSS 3 is still going through some working process, so it isn't even completely done.
But let's go on a magical adventure into what may be.
In CSS3 we got a lot more in terms of selector power. Attributes being part of the selector means that you can target every anchor tag that opens a new window by applying styles to:
a[target='_blank'] { }
(Fun fact, you can chain attribute selectors! input[type='radio'][name='awesome'] !! How cool is that? You can also negate them using not())
We also got some pseudo classes, which are basically afterthoughts to your selector. "I want a link, but only if it's being hovered over, or only if I visited it.)
a:hover { }
In CSS4, we start getting some more powerful pseudo classes. Here are some examples, though they may change as the draft is exactly that, a draft, and they change very often.
Location based selectors (going somewhere?)
:any-link
Information is limited on this selector but I gather it is meant to target elements that are made into links, like if you surround a div or image in an anchor tag. It might also mean an element other than "a" which has an href attribute.
:local-link
This pseudo selector matches any link which links to another page within the matching absolute URI.
For example, if you are on http://www.barkleyrei.com/ on a sub page, any link with barkleyrei.com in it will match the pseudo selector. It strips out fragments, but otherwise the entire absolute URI is used in the match.
:target
This pseudo selector will match any link that targets a fragment.
<a href="example.com#manual">See the manual</a>
:scope
There is limited information on this selector, but the jist is that this will match links within a certain reference, which defaults to :root and is set by a function called querySelector(), which is expected to be part of the CSS 4 selectors but there doesn't appear to be any information about it yet.
Time-dimensional pseudo classes (aka time travel)
:current
This selector has a fantastic use related to screen reading. In the example below:
:current(p, li, dt, dd) { background: yellow; }
The selected items would be highlighted yellow when their content was being read. It seems like while the verbiage is time-based, it can also mean context as well.
:past and
:future
These two selectors relate to :current and refer, respectively, to elements before and after it.
I could see adding on to the above example by fading out :past and :future elements so that they do not distract a reader from the :current element being read/displayed.
Linguistic pseudo classes (que?)
:dir()
This matches items whose content is meant to be read in a specific direct, for example if it were in a language read from left to right
:lang(C)
This selector matches elements that are in language C. It differs in functionality than the selector '|=' (which checks if the attribute is a hypen seperated list of values starting with your match) because |= will only match the specified elements exactly, while :lang will reference the document's actual encoding information.
It's just a small look into what may come, and it's exciting to think about what we can affect with these selectors (and how they will translate into jQuery scripts)
