Latest web development tutorials

CSS attribute selectors

HTML style elements with specific attributes

HTML element style is not just class and id with specific properties.

Note:! IE7 and IE8 DOCTYPE declaration need only support attribute selectors!IE6 and earlier versions do not support attribute selectors.


Attribute selectors

The following example is to contain all the elements of the title (title) becomes blue:

Examples

[Title] { color: blue ;}

try it"


Attributes and values ​​selectors

The following example changes the title title border style = 'w3big' element:

Examples

[Title = w3big] { border: 5 px solid green ;}

try it"


Select Properties and value - more value

Here is an example of the style elements title attribute specifies the value of using (-) separating properties and values:

Examples

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

try it"

Here is an example of the style element lang attribute specifies the value of using (|) separates attributes and values:

Examples

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

try it"


Form style

Attribute selectors style without the use of a form of class or id:

Examples

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

try it"