mobileNavlogo
headerlogo

Blog

CSS Attribute Selectors

20 September, 2018

Related Blogs

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;
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 .