• USA : +1 973 910 5725
  • INDIA: +91 905 291 3388
  • info@tekslate.com
  • Login

CSS Attribute Selectors

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;

Summary
Review Date
Reviewed Item
CSS Attribute Selectors
Author Rating
5

“At TekSlate, we are trying to create high quality tutorials and articles, if you think any information is incorrect or want to add anything to the article, please feel free to get in touch with us at info@tekslate.com, we will update the article in 24 hours.”

0 Responses on CSS Attribute Selectors"

    Leave a Message

    Your email address will not be published. Required fields are marked *

    Site Disclaimer, Copyright © 2016 - All Rights Reserved.

    Support


    Please leave a message and we'll get back to you soon.

    I agree to be contacted via e-mail.