Explore 100's Of Free Video Tutorials

Keep Learning, Keep Coding & Keep Sharing

CSS

CSS Attribute Selector Part 3

Notes:

CSS Attribute Selector (Square Brackets) - Part 3:

4.
selector[attribute name^=”value”]{
declaration list;
}
It selects any html element targeted by the selector, which contains an attribute name where the attribute value begins with the value specified in attribute expression

Ex:
a[href^=”https://”]{
border:2px solid red;
}
It selects any anchor element, which contains an attribute href, where href attribute value begins with https://

5.
selector[attribute name$=”value”]{
declaration list;
}
It selects any html element targeted by the selector, which contains an attribute name where the attribute value ends with the value specified in attribute expression

Ex:
a[href$=”tutorials”]{
border:2px solid red;
}
It selects any anchor element, which contains an attribute href, where href attribute value ends with tutorials

6.
selector[attribute name*=”value”]{
declaration list;
}
It selects any html element targeted by the selector, which contains an attribute name where the attribute value contains the value specified in attribute expression

Ex:
a[href*=”.com”]{
border:2px solid red;
}
It selects any anchor element, which contains an attribute href, where href attribute value contains .com.

Interview Questions:

1. Which symbol indicates “ends with” in attribute selector?
a. tilde
b. dollar
c. cap
d. star
Answer: b