CSS - CSS Attribute Dollar Selector



 CSS Attribute Dollor 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.
CSS Attribute Dollar Selector
  • In CSS, the [attribute$="value"] selector is used to select elements whose attribute value ends with a named value.

code css - Example

[class$="test"] 
{
background: green;
}
click below button to copy the code. By - css tutorial - team

Sample Code - css html

 Tryit<!DOCTYPE html>
<html>
    <head>
        <style>
        [class$="test"]
        {
            background: green;
        }
        </style>                     
    </head>
    <body>
        <div class="first_test">Welcome To Wikitechy </div> 
        <p class="my-test">Wikitechy wants to reshape e-learning platform.</p> 
        <p class="mytest">More than 500 solutions for errors </p> 
    </body>
</html>
click below button to copy the code. By - css tutorial - team

Code Explanation - css style

Code Explanation Attribute Dollar Selector
  1. 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”

  2. Note : Class is an attribute and test is value.
  3. Background property with a value green displays a green background for an element.
  4. 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".
  5. 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.”
  6. The paragraph text “More than 500 solutions for errors” will also have the styles specified in the [class$="test"].

html stylesheet - Output :

Output Attribute Dollar Selector
  1. The three paragraph text will have a background color green as shown & displayed in the browser window.

This page provides a detailed information on class in css , learn html and css , css programming , css website , css transition generator , css design , css language , css a , advanced css , html and css tutorial , css coding , html css tutorial , css javascript , html & css , free css , html and css editor , html css javascript , html css editor , css test , html css templates , css editor online.


View More Quick Examples

CSS BASICS & SELECTORS CSS SELECTOR ATTRIBUTE CSS STYLE FORMS COLORS & BACKGROUND CSS MARGIN & PADDING CSS WIDTH & HEIGHT CSS LINKS CSS BLOCKS

Related Searches to CSS Attribute Dollar Selector