CSS Attribute Selectors

Ratings:
(4)
Views: 798
Banner-Img
Share this blog:

CSS Attribute Selectors  &  Style HTML Elements with specific Attributes

It is possible to style HTML element that have specific attributes, not just class and id. Note IE7 and IE8 support attribute selectors only if a !DOCTYPE is specified. Attribute selection is NOT supported in IE6 and lower.

Attribute Selector

The example below styles all element with a little attribute. Example [title] { color:blue; }

Attribute and Value Selector

The example below styles all elements with title=”W3Schools”. Example [title=W3School] { border:5px solid green; }

Attribute and Value Selector-Multiple Values

The example below style 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; intpu[type=”button”] width:120px; margin-left:35px; display:block;

You liked the article?

Like: 0

Vote for difficulty

Current difficulty (Avg): Medium

EasyMediumHardDifficultExpert
IMPROVE ARTICLEReport Issue

About Author

Authorlogo
Name
TekSlate
Author Bio

TekSlate is the best online training provider in delivering world-class IT skills to individuals and corporates from all parts of the globe. We are proven experts in accumulating every need of an IT skills upgrade aspirant and have delivered excellent services. We aim to bring you all the essentials to learn and master new technologies in the market with our articles, blogs, and videos. Build your career success with us, enhancing most in-demand skills in the market.

Stay Updated
Get stories of change makers and innovators from the startup ecosystem in your inbox