How to do CSS wild card search? [duplicate]


Tags: css

Problem :

This question already has an answer here:

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?



Solution :

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.


    CSS Howto..

    how to make text transparent without changing to an image using css

    How to replace with a
    filled with CSS?

    How to skew element but keep text normal (unskewed)

    How can I prevent a flex container from overflowing/underflowing?

    How can I Add sub menus to dropdown menus?

    jQuery how to select children first level div's

    How do I make images fit the entire screen fully, regardless of screen size?

    how to set css width equal to length of longest text

    How to change the indentation of all the lines except the first line in bulleted or non bulleted list?

    How do I go from fixed width to percentage width in a CSS stylesheet?

    How to apply background image to a xhtml file? [closed]

    How to make div stack first vertically then horizontally? [duplicate]

    How do I arrange this in CSS?

    How Can I Override Style Info from a CSS Class in the Body of a Page?

    How to have a common header and footer in a HTML CSS web app?

    How do I change the Mailchimp subscribe button color using inline CSS?

    How to reset Chrome dev tools CSS styles filter?

    How can I change the color CSS property of an element using jQuery

    How to stop text from vertically centering in a table?

    Showing calendar exactly below a textbox

    How to prevent right-to-left text appearence while using arabic language?

    How can I make one item with its own class a different colour from others?

    How to override CSS style during hover in a table row?

    CSS question how to make one div appear over another?

    background image not showing on nested

    How can i display all buttons to right in bootstrap panel heading?

    How to add hover class to jQuery click(function() accordian divs?

    How to make a pure javascript .css() function using variable variables [duplicate]

    How to position
    element absolute from browser window?

    CSS/Javascript: How to draw minimal border around an inline element?