CODEWITHSUNDEEP
htmlcsscss-selectors
ak_arjun
ak_arjun

Reputation: 53

CSS selector select all img tags inside a div irrespective of child level

I want to select all img tags inside a div, so that a common CSS can be applied to it.

I don't know the level to which img tag can be for example

<div class="my_div">
   <div>
      <p>
         <img src="x"/>
      </p>
      <img src="y"/>
      <p>
        <a>
           <img src="z"/>
        </a>
     </p>
   </div>
</div>

And this structure can change as it is dynamic in nature only constant is top div my_div. I want to apply css on all img as:

{
  max-width:100% !important;
}

Any ideas how can it be achieved?

Upvotes: 2

Views: 24357

Answers (5)

B.Habibzadeh
B.Habibzadeh

Reputation: 538

for CSS in angular component:

:host ::ng-deep .mydiv img { 
  background-color: blue;
}

for CSS in index page:

body ::ng-deep .mydiv img{
  background-color: green;
}

Upvotes: 0

Vineet
Vineet

Reputation: 21

This should do the trick for you:

div.my_div img
{    
  //CSS goes here    
  // Like - width:300px;    
}

This ensure that it is applied to "all the images" in the Div having class "my_div"

Upvotes: 0

Mr. Pyramid
Mr. Pyramid

Reputation: 3935

try this 

.my_div img
{
   max-width:100%;
}

if this doesn't applies then use !important like this

.my_div img
{
   max-width:100% !important;
}

Upvotes: 8

Keshav Bhadouria
Keshav Bhadouria

Reputation: 199

if you want to add CSS for all img then you can use 

img{max-width:100% !important;}

and if you want to target an img inside of a div so you can just add class name before the img tag

.my_div img{max-width:100% !important;}

Upvotes: 2

Vishal Panchal
Vishal Panchal

Reputation: 5

try this

.my_div div img
{
  max-width:100% !important;
}

Upvotes: 0

Related Questions