attribute contains selector in CSS3

How to select elements with an attribute value containing a specific word in CSS3?

By using [attribute~=value] we can select the elements with an attribute value containing a specific word.

<style>
        [title~=Funda] {
            border: 2px solid red;
        }
</style>

<body>
    <a href="http://www.foodpunda.com" title="Food Punda">FoodPunda</a>
    <a href="http://www.techfunda.com" title="Tech Funda">TecFunda</a>
    <a href="http://www.fundoovideo.com" title="Fundoo Video">FundooVideo</a>
    <br />
    <img src="rpg-map-brick-border-clip-art.jpg" title="brickfun" width="100" height="150" />
    <img src="snitfunda.jpg" title="IT Funda" width="100" height="150" />
    <img src="microsoft-word-clip-art-borders-2571.jpg" title="microsoft" width="100" height="150" />
</body>

In the above code snippet we have given style to the [attribute~=value] selector. So that the selector selects the element with an given attribute value containing a specific word and applies style to it.

OUTPUT

Views: 3294 | Post Order: 38

CSS3 > Selectors

attribute contains selector in CSS3

How to select elements with an attribute value containing a specific word in CSS3?

Related Posts

Utility Tools