How to do CSS wild card search?

Question

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?

You mean `page-search-site-health-bundle page-search-site-health-bundle-medical-group` ? — Magesh Kumaar, Aug 05 '16 at 10:27

score 1 · Answer 1 · answered Aug 05 '16 at 10:27

div[class|=page-search-site-health-bundle] {
  color: red;
}

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

Read More (https://developer.mozilla.org/en/docs/Web/Guide/CSS/Getting_started/Selectors)

score 1 · Accepted Answer · answered Aug 05 '16 at 10:34

1

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.

answered Aug 05 '16 at 10:34

Sajib Hassan

446
4
12

Thanks for your answer with details. It worked!! – Shaiful Islam Aug 05 '16 at 10:40
1

Is this not the complete reverse of what you were looking for, which was to be able to select the elements based on the text their class names have in common? – Shaggy Aug 05 '16 at 11:02

score 1 · Answer 3 · answered Aug 05 '16 at 10:59

You're looking for a selctor that selects all elements with a list of class names beginning with health-bundle- or containing health-bundle- preceded by a space so you'll need to use attribute selectors, rather than class selectors, which don't support wildcards.

[class^="health-bundle-"],[class*=" health-bundle-"]{
    color:#f00;
}

<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>

score 0 · Answer 4 · answered Aug 05 '16 at 10:27

0

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

answered Aug 05 '16 at 10:27

3rdthemagical

5,271
18
36

Head In Cloud · Answer 5 · 2016-08-05T11:43:03.193

0

Try this

div[class*="health-bundle"]{background:red;}

edited Aug 05 '16 at 11:43

answered Aug 05 '16 at 10:29

Head In Cloud

2,001
1
8
10

Note that this won't select the second element, which doesn't have a `.page-search-site` class. – Shaggy Aug 05 '16 at 11:07
use div[class*="health-bundle"]{background:red;} you changed html code – Head In Cloud Aug 05 '16 at 11:42
Is there anything common in your class you can use [class*="common word"] – Head In Cloud Aug 05 '16 at 11:46

kamoroso94 · Answer 6 · 2016-08-05T17:55:09.843

0

The CSS selector you're looking for looks like this.

div.page-search-site[class*=health-bundle]

It selects all div elements with class page-search-site and class attribute containing the substring health-bundle.

edited Aug 05 '16 at 17:55

answered Aug 05 '16 at 10:37

kamoroso94

1,713
1
16
19

I take it you didn't test this before posting it? It won't match *any* of the elements included in the question. – Shaggy Aug 05 '16 at 11:06
Ah, I see your point. I didn't think about the fact that the class attribute has all the classes so it would never work. Blame my laziness, but I'll fix this tomorrow; it's pretty late here. – kamoroso94 Aug 05 '16 at 11:11

How to do CSS wild card search?

6 Answers6