Attributes as Selectors

Category	: CSS		Views	: 5502
Version	: 2.1		Rating	:	2.4/5 (43 votes) Currently 2.44/5 1 2 3 4 5
Type	: Text

A New Way of Doing CSS

Several new selectors are defined in CSS2. Between these new ones you may find yourself interested in attribute selectors. But before I begin telling you about this new type of selectors I need to add that up to the 6th version of Internet Explorer, attribute selectors are not supported, but that is not that big of a problem since the percentage of people not using Internet Explorer is growing each and every day. In case you were wondering, Firefox and Opera offer support for these attribute selectors, and they can even be used with other files other than HTML such as XML files.
But getting past the introduction and compatibility – what does a attribute selector do? First of all, you will notice an expanded utility and flexibility of a certain class, but of ID attribute as well. This will give you the freedom to try but also use several useful and fun tricks. But, be careful not to confuse HTML tags with CSS class selectors. A typical class selector is shown below and it is used to define a certain style (in this case, to display yellow) that matches any paragraph with the class "alert". The CSS would look something like this:

And that’s all. While in HTML, the lines that will match the CSS code would look like this:

Now you see why do I say it is very easy to mix them up? Take a moment and memorize exactly where goes where and let’s move on. Most of the times things like these get confusing because they have different names. Meaning that while p in CSS is called a selector, in HTML is called a tag (or sometimes an element). Also, in the CSS file "alert" is the class name but when you go in HTML, that class name turns into a value. If you do not seriously memorize these you will find yourself that you get confused very easy.

We all know that attribute selectors can be found in several varieties. We will be talking a bit about the simplest version. What does the simplest version do? It merely looks for a match attribute and furthermore, it even ignores any specific of that certain attribute. In other words, in the following example, whenever a paragraph contains a class, any class at all, a match will occur.
This means that whenever a paragraph contains a class it will be rendered bold, just by using the selector above. Notice that all that you are doing in specifying [class], and as said above it means any class, therefore the paragraph element in the HTML document will be bolded just because it contains a class attribute.