The Brave Programmer - Blogging and coding
Not for the faint hearted
 

Blog Posts From The Brave Programmer

Minimize

Cascading Style Sheets - Selectors III

Mar16

Written by:
2009/03/16 08:02 AM RssIcon

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.

 

Tags:
Categories:
blog comments powered by Disqus

4 comment(s) so far...


Gravatar

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
Gravatar

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
Gravatar

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
Gravatar

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
 
Blog Updates Via E-mail
 Blog Updates Via E-mail
Minimize

Do you want to receive blog updates via e-mail. Then just click on the link below. You will be redirected to Google's feed burner, where you can fill out a form. Supplying your e-mail address.

The subscription is managed entirely by Google's Feedburner. We cannot and do not collect your email address.

Subscribe to The Brave Programmer by Email

Print  
 

 

Latest Comments
 Latest Comments
Minimize
Powered by Disqus

Sign up with Disqus to enjoy a  surprise box of features

Print  
 
Blog Roll
 Blog Roll
Minimize
Print  
 
Categories
 Categories
Minimize
Print  
 
<h1>Search Blogs From The Brave Programmer</h1>
 

Search Blogs From The Brave Programmer

Minimize
Print  
 
Archive
 Archive
Minimize
Archive
<March 2017>
SunMonTueWedThuFriSat
2627281234
567891011
12131415161718
19202122232425
2627282930311
2345678
Monthly
Go
Print  
 
<h1>News Feeds (RSS)</h1>
 

News Feeds (RSS)

Minimize
Print  
 

Follow robertbravery on Twitter

Blog Engage Blog Forum and Blogging Community, Free Blog Submissions and Blog Traffic, Blog Directory, Article Submissions, Blog Traffic

View Robert Bravery's profile on LinkedIn

Mybyte

 

Robert - Find me on Bloggers.com

Tags
 Tags
Minimize
Print  
 
Contact Us Now
 Contact Us Now
Minimize
 

Email  us now or call us on 082-413-1420,  to host your website.

We design and develop websites. We develop websites that make a difference. We do Dotnetnuke Module development.

Web Masters Around The World
Power By Ringsurf
Print