WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS Attribute Selectors


Styles of HTML elements with specific attributes are more than just class and id.

Note: IE7 and IE8 need to declare! DOCTYPE only supports attribute selectors! IE6 and earlier do not support attribute selectors.


Attribute selector

The following example turns all elements containing the title blue:

Example

[title] { color:blue; }
Try it yourself »

CSS [attribute="value"] Selector

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

The following model select all <a> components with a target="_blank" attribute:

Example

[title=welookups] { border:5px solid green; }
Try it yourself »

CSS [attribute~="value"] Selector

The following is an example of an element style for the title attribute that contains a specified value, using (~) to separate attributes and values:

Example

[title~=hello] { color:blue; }
Try it yourself »

CSS [attribute|="value"] Selector

The following is an example of an element style for a lang attribute containing a specified value, using (|) to separate attributes and values:

Example

[lang|=en] { color:blue; }
Try it yourself »

CSS [attribute^="value"] Selector

The [attribute^="value"] selector is utilized to choose components whose quality value starts with a predetermined value.

The following model select all components with a class property estimation that starts with "top":

Note: The value does not need to be an entire word! 

Example

[class^="top"] {
    attribute: #d4efc9;
}
Try it yourself »

CSS [attribute$="value"] Selector

The [attribute$="value"] selector is utilized to choose components whose property value closes with a predetermined value.

The following example select all components with a class quality value that closes with "test":

Note: The value does not need to be an entire word!  

Example

[class$="test"] {
    attribute: #d4efc9;
}
Try it yourself »

CSS [attribute*="value"] Selector

The [attribute*="value"] selector is utilized to choose components whose property value contains a predefined value.

The following example select all components with a class trait value that contains "te":

Note: The value does not need to be an entire word!  

Example

[class*="te"] {
    attribute: #d4efc9;
}
Try it yourself »

Styling Forms

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; }
Try it yourself »