Posted on january 27th, 2010 by ovistaweb.com

CSS Attribute Selectors



Style HTML Elements With Specific Attributes

It is possible to style HTML elements that have specific attributes, not just class and id.

Note: Internet Explorer 7 (and higher) supports attribute selectors only if a !DOCTYPE is specified. Attribute selection is NOT supported in IE6 and lower.

Attribute Selector

The example below styles all elements with a title attribute:

Example

[title]
{
color:blue;
}
 

 

Attribute and Value Selector

The example below styles all elements with title="W3Schools":

Example

[title=W3Schools]
{
border:5px solid green;
}
 

 

Attribute and Value Selector - Multiple Values

The example below styles all elements with a title attribute that contains a specified value. This works even if the attribute has space separated values:

Example

[title~=hello] { color:blue; }
 

The example below styles all elements with a lang attribute that contains a specified value. This works even if the attribute has hyphen ( - ) separated values:

Example

[lang|=en] { color:blue; }
 

 

Styling Forms

The attribute selectors are particularly useful for styling forms without class or ID:

Example

input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
}
 

Bluehost.com Web Hosting $6.95

 

NAVIGATION: HOME > CSS Tutorial > CSS Attribute Selectors

 


  CSS Tutorial

XML Tutorial

HTML Tutorial

Internet Quick Guide

How to Make Money Online

 

 O2 XDA II Applications

Mobile Phone