Using CSS Attribute Selectors to Stylize HTML | Style outbound links | Tutorial

Intro to CSS

We use css to apply styles to certain elements on the page, we can target any div like this:

HTML

<div>Text</div>

CSS

div {
css-property: value;
}

Any class selector <div class=”divClass”> like this:

HTML

<div class="divClass">Text</div>

with this:

CSS

div.divClass {
css-property: value;
}
<!-- or simply -->
.divClass {
css-property: value;
}

or any id selector, <div id=”divID”> like this:

HTML

<div id="divID">Text</div>

with this:

CSS

div#divID {
css-property: value;
}
<!-- or simply -->
#divID {
css-property: value;
}

These are the basics of css. Use an element tag name to target it, use a dot to access class names and a hash (#) to represent id names. A lot can be done with just that, but sometimes you may want to access something differently, an option is to use attribute selection.

Overview

More advanced we can apply styles to elements based on their attributes. Attribute selectors use the attributes of the tag.
We can use attribute selection to specify certain elements to stylize. For example if we have a page with many images but only certain ones have title attributes, which we want to stand out more, this css rule would do the trick:

CSS

img [title] {
border: 2px solid #000000;
}

It would cause any image with a title tag (no matter what the value of the title tag is) to have a 2px wide solid black border, such as <img title=”MyImage” src=”/images/sample.jpg” /> or <img title=”" src=”/images/sample.jpg” /> but not <img src=”/images/sample.jpg” /> because it has no title attribute.

HTML

would style
<img title="�MyImage�" src="http://circlecube.com/wp-admin/�/images/sample.jpg�" alt="" />
or even
<img title="�&quot;" src="http://circlecube.com/wp-admin/�/images/sample.jpg�" alt="" />
but not
<img src="http://circlecube.com/wp-admin/�/images/sample.jpg�" alt="" />
because it has no title attribute.

Further we can specify which values of the title attribute we want to target. If we want to stylizee links to a certain site we can do this: a[href="http://circlecube.com"] { }

CSS

a[href="http://circlecube.com"] {
background-color: #EBEBEB;
}

it would style <a href=”http://circlecube.com”>This link</a> but not <a href=”http://circlecube.com/2008/05/21/”>this one</a> because it is not an exact match, nor <a href=”http://www.google.com”>this one</a> because it isn’t a match either, or at all.

HTML

it would style
<a href="�http://circlecube.com�">This link</a>
but not
<a href="�http://circlecube.com/2008/05/21/�">this one</a>
because it is not an exact match, nor
<a href="�http://www.google.com�">this one</a>
because it isn’t a match either, or at all.

For another example, if we want to stylize local links differently than absolute links, we’d want to look at the beginning of the attribute’s value only so we’d use ‘^=’. We could have something like this:
a[href^="http://"], a[href^="https://"] {
background: url(/images/external.gif) no-repeat right center;
padding-right:20px;
}
it would style <a href=”http://www.google.com”>This link</a> because it begins with ‘http://’ but not <a href=”/2008/05/21/”>this one</a> because it is does not begin with ‘http://’. But it would also style <a href=”https://paypal.com”>this</a> because it matches the selector after the comma ‘https://’, and even <a href=”http://circlecube.com/2008/05/21/”>this</a> will be styled, because the link is absolute (even though it is local) so be careful with how you use it.

HTML

it would style
<a href="�http://www.google.com�">This link</a>
because it begins with ‘http://’ but not
<a href="http://circlecube.com/wp-admin/�/2008/05/21/�">this one</a>
because it is does not begin with ‘http://’.
But it would also style
<a href="�https://paypal.com�">this</a>
because it matches the selector after the comma ‘https://’,
and even
<a href="�http://circlecube.com/2008/05/21/�">this</a>
will be styled, because the link is absolute
(even though it is local) so be careful with how you use it.

Summary

Hoping you will see the pattern and can use the rest of these somehow (I’m drawing blank on interesting examples),

1 is: [attribute] exists

target anchors with any titles attributes.

CSS

a[title] {
background-color:#0000FF; (blue)
}

HTML

<a title="some title" href="http://circlecube.com/">Link</a>

2 equal: [attribute=x] equals x

target only anchors where the title attribute contains something exactly

CSS

a[title="Only"] {
background-color:#FF0000; (red)
}

HTML

<a title="Only" href="http://circlecube.com/">Link</a>

3 hat: [attribute^=x] starts with x

target instances where something comes at the beginning of the attribute. This can prefix a word or even be the first word in a phrase or sentance.

CSS

a[title^="Super"] {
background-color:#00FF00; (green)
}

HTML

<a title="Supercalafragalisticexpialadosious" href="http://circlecube.com/">Link</a>

4 dollar: [attribute$=x] ends with x

instances where something comes at the end of the attribute. This can be the suffix of the word or the last word in a phrase.

CSS

a[title$="ious"] {
background-color:#FFFF00; (yellow)
}

HTML

<a title="Supercalafragalisticexpialadosious" href="http://circlecube.com/">Link</a>

5 asterisk: [attribute*=x] contains x

or even titles which contain a certain word somewhere/anywhere in the attribute. This wildcard be anywhere, in a word, as a word, whatever.

CSS

a[title*="tic"] {
background-color:#FF00FF; (magenta)
}

HTML

<a title="Supercalafragalisticexpialadosious" href="http://circlecube.com/">Link</a>

6 tilde: [attribute~=x] one of which is exactly x.

a space-separated list of “words”, one of which is exactly x.

CSS

a[title~="tic"] {
background-color:#FF00FF; (magenta)
}

HTML

<a title="Super cala fragalis tic expi ala dosious" href="http://circlecube.com/">Link</a>

7 pipe: [attribute|=x] which first word is exactly x.

a hyphen-separated list of “words”, first word is exactly x.

CSS

a[title|="Super"] {
background-color:#FF00FF; (magenta)
}

HTML

<a title="Super-cala-fragalis-tic-expi-ala-dosious" href="http://circlecube.com/">Link</a>

view all examples on this page.
refer to w3 for more

Let me know what you come up with or if I’ve left out any essentials.

This entry was posted in tutorial and tagged , , , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  • Recent Posts

    Developing for old browsers is (almost) a thing of the past – (37signals)

    Basecamp announces that it’s new version will not support old browsers! They will of course continue to support them in their “classic” version. But this is good news and as more implement this type of policy the internet will be happy. It used to be one of the biggest pains of web development. Juggling different [...]

    Screen shot 2012-02-10 at 12.59.33 PM

    Vendor Prefixes – about to go south

    What are “standards” coming to? Who’s guilty? Apple and Chrome: They’re supporting vendor prefixed properties like they’re a standard part of development. Firefox, Opera and Internet Explorer: They should have been on the ball more. Need to push their evangelism further. Teach developers that it’s not exclusively -webkit to style elements. All the browsers: experimental [...]

    bio

    An Event Apart Notes: Ethan Marcotte, Responsive Web Design

    Ethan Marcotte has become the father of Responsive Web Design and spent this whole day focused on principles, techniques, gotchas, examples, … all about building and how to build responsive sites. With a sprinkle of mobile first. For Ethan, it all started with this article: http://www.alistapart.com/articles/dao/ Think of architecture, the whole design phase is established [...]

    Webcomm_Montreal

    An Event Apart Notes: Jared Spool, The Curious Properties of Intuitive Web Pages

    Senseless waste of asterisks… Avis used an asterisk to denote optional fields. This means that there is a lot of baggage that comes with an asterixk. Somewhere this symbol got meaning, it’s not in the bible! We can control when something goes from unintuitive to intuitive. A design is intuitive (although technically and grammatically speaking [...]

    untitled-158-2

    An Event Apart Notes: Marco Arment, Bridging the App Gap

    The iPhone changed our industry in 2007: first mobile to have a desktop class web browser and it made people start using their mobile phones as computers! All apps other than apple provided ones were web browser apps. Most of the first apps were branded web browsers. No real difference between using mobile site or [...]

    lukew_space

    An Event Apart Notes: Luke Wroblewski, Mobile to the Future

    MASS MEDIA (in waves) Print, Recordings, Cinema, Radio, Television, Internet, Mobile Mobile is the new Mass Media It certainly is mass and massive. More mobile devices (by far) every day than babies born on the planet. Mobile devices are eating into our personal computing shares. New waves of mobile media eat all previous media waves. [...]

    IMG_4500

    An Event Apart Notes: Josh Clark, Buttons are a Hack

    Mobile and touch should be revolutionizing design and user experience. We don’t want to touch a tiny link or button. Back button is just stupid. Fitz’s Law, make things fat proximal targets for easy touching. People are lazy, let’s as designers LET people be lazy! Maybe even use the whole screen as your control. Eliminate [...]

    nicole_pink_bkg_2012

    An Event Apart Notes: Nicole Sullivan, Our Best Practices are Killing Us

    Grep to for analyze css. CSS duplication is a web-wide problem. Started helping facebook optimize thier site and they had 1.9MB of css loading. The same color showing up hundreds of times. Many many color statements and declarations. !important declarations get dangerous. Sites found to have over 500 !important declarations! float is a serious problem [...]

    ericmeyer

    An Event Apart Notes: Eric Meyer, The Future of CSS

    Cormorant trained to fish for the fishermen. The fishermen tie bands around the birds necks that are. Fishermen fish at night, using lamps they attract bugs, which attract fish, and the cormorant get to fish but cant swallow them and the fishermen take the fish. Browser vendors are promising us new CSS tools, but don’t [...]

    sammyj

    An Event Apart Notes: Ethan Marcotte, Rolling Up Our Responsive Sleeves

    Henry Adams (Descendant of 2 presidents: great-grandson to John Adams and grandson to John Quincy Adams). He lived between the civil war and world war 1. He witnessed the industrial revolution. Chaos was the law of nature, Order was the dream of man Samuel Johnson – funniest man in the 17th Century… Responsive Design: 1. [...]

  • Recent Comments

    me-gamer

    me-gamer

    this is really nice. this made many of my task simple.
    Lori Newman

    Lori Newman

    Just wanted to thank you for your presentation. It was extremely informative and just what I...
    Karl

    Karl

    I have been using for some time this nice Banner, from developer FX. They have a really nice Live...
    Karl

    Karl

    Thank you for this wonderful link… recommend it! Fast, simple, easy… :-)
    Gabriel

    Gabriel

    Hi Valerie, I don’t know if you are still following this post, but I tried seeing if it is...
    avinash

    avinash

    Hi Evan, I am using the same code and trying it on chrome/firefox it is not working on neither...