CSS - CSS Attribute Dollar Selector
Learn css - css tutorial - CSS Attribute Dollor Selector - css examples - css programs
CSS Attribute dollar selector - Definition and Usage
- In css dollar($) selector is used to choose the element whose value is end with attribute value.
- Selector is convenient when you want to set a style for particular elements with end of attribute value.
- It is used to select the end of the string.
- In CSS, the [attribute$="value"] selector is used to select elements whose attribute value ends with a named value.
code css - Example
Sample Code - css html
Code Explanation - css style
- Here [class$="test"] defines the selector being used to select the elements whose attribute value contains a named value, here we have the named value as “test”
- Background property with a value green displays a green background for an element.
- Div tag <div> is used to apply styles for multiple elements. Class name first_test will have functionalities of [class$=”text”] since its value that ends with "test".
- Similarly calling my-test class for a paragraph tag <p> will have the styles specified in the [class$=”text” attribute] for the paragraph text “wikitechy wants to reshape e-learning platform.”
- The paragraph text “More than 500 solutions for errors” will also have the styles specified in the [class$="test"].
html stylesheet - Output :
- The three paragraph text will have a background color green as shown & displayed in the browser window.