CSS3: Using Attribute Selection
Views: 39
Comments: 0
Posted: 12-12-2007
based on 0 votes.
Faves: 0 | + Faves
Page(s): 1
Css3: Attribute Selection
By Reverse Blade
-------------------------------------------------------------------

I was reading some things on Css today and came across Css3. After some research I found out that they added some cool things to Css in the new version. Something I really like is the Attribute Selection. Insted of having a choice to grab a Class, Id, or a Tag, now you can get more specific and grab a tag with only a certian attribute or that matches a certian letter pattern. Here is an example:

<style>
img[alt*=e] {
background-color: #593940;
}
</style>

What does this do? Well, it finds all the images (img). Next, I put the attribute and what I'm going to do in square brackets "[ ]". In the brackets what this says is: If anywhere (*) in an alt attribute you find an e. Then, you do your normal css to tell it what to do if it finds an e. Here is an outline of what the code is:

<style>
tag name[attribute*=string] {
code
}
</style>

Just so you understand it more  . Hopefully you understand the basics of it, but what is it with the *? Well, that tells it where to find the string. Here is a list of them:

[attribute^=string] - This looks for the string at the Beginning of the Attribute.

[attribute$=string] - Looks for the string at the End of the Attribute.

[attribute*=string] - Looks for the string Anywhere in the Attribute.

Examples:

<style>
img[alt^=Ho] {
background-color: #593940;
}
</style>

<style>
img[alt$=me] {
background-color: #593940;
}
</style>

<style>
img[alt*=om] {
background-color: #593940;
}
</style>
Page(s): 1
More tutorials from this author:

» No tutorials by this user.

View All Tutorials
Retribution - n/a
This author is too busy writing tutorials instead of writing a personal profile!
Close