CSS Property Selector

HTML element styles with specific attributes

The style of HTML elements with specific attributes is more than just class and id.

Note: IE7 and IE8 need to declare! DOCTYPE only supports the attribute selector! IE6 and lower versions do not support attribute selectors.

Attribute selector

The following example turns all the elements containing the title (title) into blue:

Example

[title]
{
    color:blue;
}

Property and value selector

The following example changes the border style of the title=’runoob’ element:

Example

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

Attribute and value selector-multi-value

The following is an example of an element style containing a title attribute with a specified value, using (~) to separate the attribute and the value:

Example

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

The following is an example of an element style that contains the lang attribute of the specified value, using (|) to separate the attribute and value:

Example

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

Form style

The attribute selector style does not need to use the form of 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;
}