Attribute Selectors

They specify rules that match elements which have certain attributes defined in the web page. It is used to apply style sheet declarations based on the presence of attributes or attribute values of an HTML element. These selectors select elements on basis of
• If an attribute is present
• Value of an attribute
• If the attribute value begins with a specific string of characters
• If the attribute value ends with a specific string of characters
• If the attribute value has a specific string of characters in it.
Examples of attribute selectors may match in any of the four ways

Type

Explanation

[att]

Match when the element sets the “att” attribute, whatever the value of the attribute.

[att=val]

Match when the element’s “att” attribute value is exactly “val”.

[att~=val]

Represents an element with the att attribute whose value is a white space-separated list of words, one of which is exactly “val”. If “val” contains white space, it will never represent anything

[att|=val]

Represents an element with the att attribute, its value either being exactly “val” or beginning with “val” immediately followed by “-“

Select by Presence of an Attribute – It is the simplest of all which applies a style based on the presence of an attribute without taking note of the value given to that attribute. It is used as

input[name] {
border: 1px solid #ff0; }
As in the example type selector styles all input with name attribute to have a border.
Select by Attribute Value – This selectors applies style declarations based on presence of an value  in the attribute. An example explaining it is
      input[name=”email”] {
border: 1px solid #ff0; }
In the example, border styling is applied to those input elements that have both an attribute and a value of ‘email’
Selection as per Attribute Value at Start – It selects elements with an attribute value that begins with a particular string of characters and its usage is
      a[href^=”mailto:”] { border: 1px solid #ff0; }
It uses the ‘^’ character and in the example styles those links where the value of href attribute starts with ‘mailto’ string of characters.
Selection as per Attribute Value at End – It selects elements with an attribute value that ends with a particular string of characters and its usage is
       input[id$=”name”] {
border: 1px solid #ff0; }
It uses the ‘$’ character or dollar sign and in the example styles those links where the value of id attribute ends with ‘name’ string of characters of input element.
Selection as per Attribute Value Containing a String – It selects elements that contains an attribute whose value contains a specified string of characters anywhere in it. It uses an asterisk in the syntax to indicate that the selector is looking anywhere inside the value as
      Input [name*=”logo”] {
border: 1px solid #ff0; }
In the example a name attribute of input element having  a value of ‘logo’ is styled for border.

Get industry recognized certification – Contact us

Menu