Shaiful Islam Shaiful Islam - 3 months ago 7
CSS Question

How to do CSS wild card search?

I have three

divs
with following class:

<div class="page-search-site health-bundle-medical-group">Some text here</div>
<div class="health-bundle-clinic">Some text here 2</div>
<div class="page-search-site health-bundle-hospital">Some text here 3</div>


Here
health-bundle-
text is common for all three classes. So I want to write a CSS which will work for all these three classes, which will work if it matches the common part. Is it possible?

Answer

What you need is called attribute selector. An example, using your html structure, is the following:

div.page-search-site[class*='-bundle-medical-group']  {
    color:red 
}

In the place of div you can add any element or remove it altogether, and in the place of class you can add any attribute of the specified element.

div.page-search-site[class*='-bundle-medical-group']
div.page-search-site[class*='-bundle-hospital']
div.page-search-site[class*='-bundle-clinic']

Demo: https://jsfiddle.net/sajib_hassan/jku1fdh8/

More information on CSS attribute selectors, you can find here and here.

Comments