css3 attribute selectors

css3 attribute selectors

In previous article in this series we looked in to css selectors. HTML elements can have attributes and in CSS3 we can use these attributes to select elements.  The [attribute] in an  element is used to select elements with a specific element.

So

Select element containing the named attribute.

The above attribute is used to select img elements with an alt tag  like

Consider the expression below

The above expression will match all the form on the document having descendants with type attribute.

This expression will match any element E that has attribute attr and the expression

will match all E elements with attribute attr with the exact, case sensitive, if attribute is case sensitive , vaue val.

The above expression will match element E that is exactly equal to val or starts with val followed by a dash. like val or val-

Example

Consider an other expression

Element E whose attribute attr has within its value the space separated full word val. 

Example

The above expression will match above hyper link because it has word more with a space.

but it will not match below expression.

Here word ant is present in want but it will not match because there is no space before ant.

 

Matches element E whose attribute attr starts with value val.

Examples:

Consider another expression.

Matches element E whose attribute attr ends in value val.

Examples

Consider following expression.

Matches element E whose attribute attr matches  val anywhere within the attribute. Its behavior is same as E[attr~=val] , except the val can  be part of word.

Examples

Multiple attributes can also work like a[title][href]

So thats it for this article. In out next article we will look into Psuedo classes in CSS3.

No Responses