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

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We don't have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads!

We need money to operate the site, and almost all of it comes from our online advertising.

Please add wikitechy.com to your ad blocking whitelist or disable your adblocking software.

×