a[href^="http://"] {
/* fully valid URL, likely external link */
}
a[href="http://google.com"] {
/* link to specific website */
}
a[href^="/"], a[href^=".."] {
/* internal relative link */
}
a[href^="mailto:"] {
/* email link */
}
a[href$=".pdf"] {
/* PDF file */
}
a[href$=".doc"] {
/* Microsoft Word document */
}
a[href$=".mp3"] {
/* Music file */
}
a[href$=".zip"] {
/* Archive file */
}
Style Links Depending on Destination
Chris Coyier
on
Wow! This is really neat! I’m sure I’ve seen it before but you’ve displayed it in an easy-to-understand way!
I just have a couple of questions:
1) I imagine that ^ means “beings with”; does $ mean “ends with” or “includes this text somewhere”?
2) Full cross-browser support? IE?
Thanks!
$ is indeed “ends with” (“includes this text somewhere” is [attr*=”textanywhere”])
IE7+ has support for it
http://www.quirksmode.org/css/contents.html (“Advanced [attr] selectors”)
This is pretty handy. I’ve been using this method for nearly two years now. I saw a couple of new things here though. Thanks for sharing!
For the “link to specific website”, would declaring google.com cover all subdirectories of google.com (ie: google.com/images, google.com/analytics etc?). Or would they need to be specifically declared?
This is my first time encountering this CSS trick and I love it. I was at first a little stymied by it as I needed to style links on my site that had certain text in the URL. Just a bunch of links to products that I wanted to be styled similar to the product’s brand. For this I needed to style links going to any products that had the brand’s name in the URL.
I used a[href*=”/brand-name”] and other variations of that to get it done and I’m loving it.
Out of curiosity though, what is this called? This cool trick in the brackets?
Thanks for this awesome post!
How would I use this for relative links that contain a unique user ID (Drupal) ie: /user/1/bookmarks
Hi,
Thanks for these options. Is there a way to say
Apply this style if the href does not contain the word “archives”
Thanks in advance
Shilpi
You should be able to do:
I would like to remove an
<hr>
tag (using display: none) based on the url if the url contains the words quick_tab?How can that be done?
I have already tried the example in the latest post below:
doesn’t work for me.
Please help!
Thank you
Brian
Is there any provision to group instead of defining individual like
a[href$=”.pdf”],a[href$=”.PDF”],a[href$=”.xls”],a[href$=”.xlsx”],a[href$=”.xlsm”],a[href$=”.doc”],a[href$=”.docx”]
Can have some thing like this
a[href*=”.pdf|.PDF|.doc|.docx|.xls|.xlsx|.xlsm”]
This is great thanks! Is there any way to create a “catchall” for youtube? For example I have two links with no classes (cant be changed) one links to a pdf & the other to different youtube videos.
So I need to say target any youtube video URL, they will all be different and changing so I cant hard code them
Try:
This is real nice, but is possible to use on # href? I tried without success
I added a little bit to the relative link to make it work in my case
a[href^="./"], a[href^="/"], a[href^=".."] {
color: red;
}