Indah Ibrahim

Front End Developer

Persuit

@inthemandala

CSS Selectors: String attribute value in depth

[Attributes]

[name=”value”]

[name~=”value”]

[name|=”value”]

[name^=”value”]

[name$=”value”]

[name*=”value”]

[name!=”value”]

Operators

[name=”value”]

Selects elements that have the specified attribute equal to a certain value.

[name~=”value”]

Selects elements that have the specified attribute with a value containing a given word, delimited by spaces.

[name|=”value”]

Selects elements that have the specified attribute with value equal to a given string or starting with that string followed by a hyphen (-)

[name^=”value”]

Selects elements that have the specified attribute with a value beginning exactly with a given string.

[name$=”value”]

Selects elements that have the specified attribute with a value ending with the given string. The comparison is case sensitive.

[name*=”value”]

Selects elements that have the specified attribute with a value containing a given substring.

[name!=”value”]

Select elements that either don’t have the specified attribute, or do have the specified attribute but not with a certain value.

Demo

The End

https://css-tricks.com/almanac/selectors/a/attribute/

https://api.jquery.com/category/selectors/

http://handlebarsjs.com/

http://codepen.io/indahibrahim/pen/YWzxRd

        p {
              color: grey;
          }

Selector

Property

 Value

Name

        p [name="foo"]{
              color: grey;
          }

[Attribute]

name

value

        <p name="foo">
              Some text
        </p>

[Attribute]