I recently redesigned my website. In the process of doing that I moved a few pages around to locations that I thought they belonged. The problem I had, like almost every web worker out there is that I ended up with broken links. Usually our html editing software tries it's best to alleviate us of these types of problems but they're never a 100% fix.
CSS Selectors For Finding Broken Links
Then it occurred to me, why not use my CSS to highlight broken links? Here's how.
<a href="/forms/contact.asp">broken link 1</a>
<a href="/forms/email.asp">broken link 2</a>
a[href="/forms/contact.asp"],
a[href="/forms/email.asp"]
{ border: 5px double red; }
Rationale
This will select any anchor tags where their href attribute equals the 404 broken link page. For those of you using my CSS Diagnostics stylesheet, I used a different border-style here so that we can differentiate between the highlighted elements. This works good and fine but what about those newbie coders at work who still link to pages using "../" or the ones that include the domain name within the link?
Take Two
a[href$="/contact.asp"],
a[href$="/email.asp"]
{ border: 5px double red; }
a[href="/pages/contact.asp"],
a[href="/pages/email.asp"]
{ border-width: 0px; }
Rationale
This will first style the suspected broken links using CSS and then de-style the correct links.
Other Uses
This can also be used to style elements that are calling old JavaScript functions:
<a href="#" onclick="old();">Old Function</a>
a[onclick*="old()"]
{ border: 5px dashed red; }
This will search through the entire onclick attribute using the substring selector for "old()". The reason I used the *= select is because sometimes developers place the function call before or after other functions so I need to be a bit less specific.
Notes
Like CSS Diagnostics, you will need to use a standards compliant web browser fully supporting CSS3 selectors. I've found that Firefox seems to be the best browser since it comes with many other developer tools as well.
