CODEWITHSUNDEEP
htmlcsscss-selectors
Abdus Sattar Bhuiyan
Abdus Sattar Bhuiyan

Reputation: 3074

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?

Upvotes: 0

Views: 59

Answers (2)

user2652061
user2652061

Reputation: 191

we can simply use below style to achieve the style

.embeded-product6 img{background:red;}

Upvotes: -1

dippas
dippas

Reputation: 60563

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.

Upvotes: 3

Related Questions