Cascading Style Sheets - Selectors III
Mar
16
Written by:
2009/03/16 08:02 AM
Following on in our series on cascading style sheets, we come to the last three of the major selector rules in CSS. In our previous post we covered various selectors. We understood what a selector is. We found out the syntax to the main selectors as well as a combination of a few selectors.
The selector "selects" the elements on an HTML page that are affected a CSS rule. In this post we will be covering the Attribute selector.
Attribute selectors
All HTML elements can have associated properties, called attributes. For example, an A element can have an HREF attribute. An IMG element can have a TITLE attribute. Using attribute selectors in CSS can provide an additional way to your HTML document based on a very specific element. An attribute selector, therefore, will target a specific HTML element if the selector matches the element or if some specified attribute condition or value is met. Attribute selector values are given in square brackets, [like this].
img[src="small.gif"] { border: 1px solid #000; }
Attribute selectors may match in four ways:
- [att] Match a specific attribute, whatever the value of the attribute.
- [att=val] Match the value of a element's attribute.
- [att~=val] Match when the element's attribute value is a space-separated list of "words", If this selector is used, the words in the value must not contain spaces (since they are separated by spaces).
- [att|=val] Match when the element's attribute value is a hyphen-separated list of "words", beginning with "val".
Lets look at a few examples of the rules above.
img[title] { border: 1px solid #000; }
img[width] { border: 1px solid #000; }
img[alt] { border: 1px solid #000; }
Each on eof the above CSS rules will match all img tags but the styles will only be applied to the matching attribute. So the border style will only apply to the img tag if the img tag has a title element. Same applys to width and alt attributes.
img[src="mypic.gif"] { border: 1px solid #000; }
Here we are matching the src of the image tag, but only if the value of src is equal exactly to "mypic.gif".
img[alt~="copyright"] { border: 1px solid #000; }
Here we are matching the alt attribute of the image tab where the image tag contains the word copyright in it. So if the alt value were to read, "copyright by integralwebsolutions", then the rule would match and the element would be styled.
img[title|="re"] { border: 1px solid #000; }
Here we are matching the title attribute of the image tag, if the title attribute contains a hyphenated word, as in "re-design".
Multiple attribute selectors can be used to refer to several attributes of an element, or even several times to the same attribute.
Here, the selector matches all SPAN elements whose "hello" attribute has exactly the value "Cleveland" and whose "goodbye" attribute has exactly the value "Columbus":
span[hello="Cleveland"] [goodbye="Columbus"] { color: blue; }
Note: Attribute selectors are not supported by Windows Internet Explorer 5, 5.5 and 6 or Macintosh Internet Explorer 5. They are also not supported by earlier versions of Opera.
blog comments powered by
4 comment(s) so far...
Re: Cascading Style Sheets - Selectors III
Geez, don't you just hate the fact that such cool features are not supported in one of the most widely used browsers on the web? Unless you want to write serious hacks, you're better off not using it at all. Pity :(
By Stii on
2009/03/16 05:57 PM
|
Re: Cascading Style Sheets - Selectors III
So does it mean its not advisable to use Attribute selectors for now since a good number of people still use IE6 .
By Jackson on
2009/03/16 05:57 PM
|
Re: Cascading Style Sheets - Selectors III
Stii,
Frustrating isn't it. We supposed to have web standards. But who keeps to that? Be interesting to see how many people spend extra time trying to get their site looking the same across the major browsers. This browsers, supposrts this, this one doesn't. It's an endless battle.
By Robert Bravery on
2009/03/16 07:15 PM
|
Re: Cascading Style Sheets - Selectors III
Jackson,
IE have always been slow to take on the new standards. The draft of CS3 has been released, who knows if IE8 will support it or not. IF they don't, they will miss out again on the standard cycle.
One of the potential problems is the release cycle of a particular browse. If it comes after the CSS standards, then it obviously will not be supported. But then you could always add support at a later stage via updates. Something MS has not bothered to do.
I guess they might be wanting to force people to upgrade to the lates IE if they want the latest functionality. Who knows?
But you can achieve the same through a workaround by using other type of selectors:
input[type="text"] is the same as
input.text {
border: 1px solid #555; color: #555;
}
or
div[id="mydiv"] {
margin: 0;
}
is the same as
#mydiv div{margin:0}
By Robert Bravery on
2009/03/16 07:33 PM
|