Connecting Arterys

Nuts and Bolts

I learn something new and exciting every day! I’ve used this attribute before, but I never realised how effective and important it can be the workings of a URL-laden website.


Any attribute selector that uses the operator ^= selects elements based on the beginning of their attribute values. Thus we can select any href that starts with a slash and insert enough text to fill out the value.

#content a[href^="/"]:after {
 content: " (http://www.alistapart.com" attr(href) ") ";
}

This rule transforms a value like /issues/144/ into http://www.alistapart.com/issues/144/. It won’t help with relative URLs that don’t start with slashes, but fortunately ALA doesn’t use those kinds of URLs.

!IMPORTANT: As mentioned, ^= is a CSS3 selector. The W3C CSS validator can only test for compliance with CSS1 and CSS2. Unable to understand the CSS3 selector, the W3C validator will report it as an error, even though it is perfectly valid per the CSS3 Selectors Candidate Recommendation.


Extract from Going to Print

Like it, loathe it, love it? Leave a message.

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Website Powered by WordPress.com.

Up ↑

%d bloggers like this: