[CSS] attribute selectors - HTML / Javascript Tutorials

Buy Ebooks, Video Games, DVDs, Electronics and more !

Home | Help Forums | Web Design Tutorials | Free Swishmax Downloads

Make Money Online Blog . Free Image and Photo Sharing and Hosting



Company
Home
Nework Details
Tutorials
SWiSH 2
SWiSHMax
Flash MX
PHP & MySQL
HTML / JScript
Adobe Photoshop
Corel Draw
Gimp
Miscellaneous
Downloads
Templates
Plugins
Fonts
Wallpapers
Free Images
Scripts and Codes
Products
E-Books
SWiSH BB
SWiSH Templates

SWiSH-DB Newsletter

Subscribe to our newsletter : GO

Partners / Affiliates

Free image hosting

Web Design Pakistan

Swish Templates

SWiSH Climax

Talkfreelance Community

Template Desire

Lite boards

Script Sector

GimpTalk

13dots

Idea Designs

PHP Cafe

Sposatoettore

Free swishmax templates

Swishzone

Manage your site with Flax Article Content Management System

Hi,

As more and more persons, use mozilla based browsers, I think it would be usefull to share this. This will permit to set style based on the value of some attributes. This WILL CURRENTLY NOT WORK WITH IE, but why not use it already.

No time to loose so here, the content of my html test file.

CODE

<html><head><style type="text/css">
a[href^="http://"]:after { /* for links that start with http:// */
content: "\0000a0\0000bb";
}
a[hreflang]:after { /* for links that have an hreflang attribute */
content: "\0000a0(" attr(hreflang) ")";
}
a[href^="http://"][hreflang]:after { /* for links that start with http:// and have an hreflang attribute */
content: "\0000a0(" attr(hreflang) ")\0000a0\0000bb";
}
a[href^="mailto:"]:after { /* for links that start with mailto */
content: "\0000a0\0000a0\0000a0";
}
a[href^="mailto:"] { /* for links that start with mailto */
background-image: url(mail.png);
background-position: right;
background-repeat: no-repeat;
}
</style></head><body>
<a href="http://www.google.fr">outter link</a><br />
<a href="http://www.google.fr" hreflang="fr">outter link</a><br />
<a href="index.php">inner link</a><br />
<a href="index.php" hreflang="fr">inner link</a><br />
<a href="mailto:test">test</a><br />
</body></html>

To select on an attribute value, just use [attribute operator "value"]. attribute should be a valid attribute like href.
Here a list of operator (from the w3c site):

QUOTE (w3c)

E[foo] an E element with a "foo" attribute
E[foo="bar"] an E element whose "foo" attribute value is exactly equal to "bar"
E[foo~="bar"] an E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "bar"
E[foo^="bar"] an E element whose "foo" attribute value begins exactly with the string "bar"
E[foo$="bar"] an E element whose "foo" attribute value ends exactly with the string "bar"
E[foo*="bar"] an E element whose "foo" attribute value contains the substring "bar"
E[hreflang|="en"] an E element whose "hreflang" attribute has a hyphen-separated list of values beginning (from the left) with "en"

and you could add many attribute selectors, just juxtapose them [att=val][att=val].

About :after and content, that should be new too.

:after is a pseudo-format and specify the text after the selected item. There is the :before pseud-format for the text before.
content attribute style allow to specify the content of it.
So, this
a[href^="http://"]:after { /* links that start with http:// */
content: "\0000a0\0000bb";
}
simply add "\0000a0\0000bb" which is " »" after the link text. You can't use html entities like   that's why I use the correspondig hexa code \0000a0

Another interesting things is that you can reuse the value of an attribute. In this,

CODE

content: "\0000a0(" attr(hreflang) ")\0000a0\0000bb";

I reuse the hreflang attribute value, simply by calling attr(attribute_name). Be sure to close and reopen the double qutotes or it will not be intrepreted and will just be printed.

cortex,
questions, suggestions just tell me.