Q:

how to add css matching a part of class attribute

HTML:
<div class="single-item item6  embeded-product6 demo">
    <figure class="imghvr-shutter-out-diag-2 embeded-product-conrner-4">
        <img src="/sites/all/themes/smart_sinepulse/img/smart_home_products/tele-health.png" style="
        width: 154px;
        ">
        <figcaption>
            <h3>Tele Health</h3>
        </figcaption> <a href="#tele-health" aria-controls="profile" role="tab" data-toggle="tab"></a>
    </figure>
</div>

I want to target all img inside .embeded-product6, .embeded-product7 and so on. I am trying as follows:
div[class^="embeded-product"] img{
    background:red; 
}

But it is not working. Any idea?

A:

That's because you have multiple classes, and the first class is not embeded-product-*
If you want to achieve that you need to use [class*="embeded-product"]

div[class*="embeded-product"] img {
  background: red;
}
<div class="single-item item6  embeded-product6 demo">
  <figure class="imghvr-shutter-out-diag-2 embeded-product-conrner-4">
    <img src="/sites/all/themes/smart_sinepulse/img/smart_home_products/tele-health.png">
    <figcaption>
      <h3>Tele Health</h3>
    </figcaption>
    <a href="#tele-health" aria-controls="profile" role="tab" data-toggle="tab"></a>
  </figure>
</div>

Remember how CSS Selectors works

[attr^=value]
      Represents an element with an attribute name of attr whose value is prefixed (preceded) by value.

and

[attr*=value]
      Represents an element with an attribute name of attr whose value contains at least one occurrence of value within the string.

